@onewelcome/react-lib-components 10.0.0 → 10.0.1

package/dist/components/Form/FormSelectorWrapper/FormSelectorWrapper.module.scss.cjs.js

@@ -1,3 +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 */.FormSelectorWrapper_error_E7GBT input+span{outline:var(--error) solid 1px;outline-offset:-1px;border-radius:2px;overflow:hidden}.FormSelectorWrapper_helper-text_E7GBT{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size))}.FormSelectorWrapper_children-container_E7GBT>span:nth-of-type(2){margin-right:.5rem}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=success]{color:var(--success);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=error]{color:var(--error);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=info]{color:var(--default);font-size:var(--font-size-big)}.FormSelectorWrapper_disabled_E7GBT input{color:var(--disabled)}.FormSelectorWrapper_disabled_E7GBT input:disabled{cursor:not-allowed}.FormSelectorWrapper_disabled_E7GBT label{cursor:not-allowed}.FormSelectorWrapper_required_E7GBT{color:var(--error)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="FormSelectorWrapper_error_E7GBT",r="FormSelectorWrapper_disabled_E7GBT",o="FormSelectorWrapper_required_E7GBT",t={error:e,"helper-text":"FormSelectorWrapper_helper-text_E7GBT","children-container":"FormSelectorWrapper_children-container_E7GBT",disabled:r,required:o};exports.default=t,exports.disabled=r,exports.error=e,exports.required=o;
+!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 */.FormSelectorWrapper_error_k4xuc input+span{outline:var(--error) solid 1px;outline-offset:-1px;border-radius:2px;overflow:hidden}.FormSelectorWrapper_helper-text_k4xuc{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size))}.FormSelectorWrapper_children-container_k4xuc>span:nth-of-type(2){margin-right:.5rem}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=success]{color:var(--success);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=error]{color:var(--error);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=info]{color:var(--default);font-size:var(--font-size-big)}.FormSelectorWrapper_disabled_k4xuc input{color:var(--disabled)}.FormSelectorWrapper_disabled_k4xuc input:disabled{cursor:not-allowed}.FormSelectorWrapper_disabled_k4xuc label{cursor:not-allowed}.FormSelectorWrapper_required_k4xuc{color:var(--error)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="FormSelectorWrapper_error_k4xuc",r="FormSelectorWrapper_disabled_k4xuc",o="FormSelectorWrapper_required_k4xuc",t={error:e,"helper-text":"FormSelectorWrapper_helper-text_k4xuc","children-container":"FormSelectorWrapper_children-container_k4xuc",disabled:r,required:o};exports.default=t,exports.disabled=r,exports.error=e,exports.required=o;
 //# sourceMappingURL=FormSelectorWrapper.module.scss.cjs.js.map

package/dist/components/Form/FormSelectorWrapper/FormSelectorWrapper.module.scss.es.js

@@ -1,11 +1,11 @@
-!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 */.FormSelectorWrapper_error_E7GBT input+span{outline:var(--error) solid 1px;outline-offset:-1px;border-radius:2px;overflow:hidden}.FormSelectorWrapper_helper-text_E7GBT{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size))}.FormSelectorWrapper_children-container_E7GBT>span:nth-of-type(2){margin-right:.5rem}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=success]{color:var(--success);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=error]{color:var(--error);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_E7GBT [data-icon-status=info]{color:var(--default);font-size:var(--font-size-big)}.FormSelectorWrapper_disabled_E7GBT input{color:var(--disabled)}.FormSelectorWrapper_disabled_E7GBT input:disabled{cursor:not-allowed}.FormSelectorWrapper_disabled_E7GBT label{cursor:not-allowed}.FormSelectorWrapper_required_E7GBT{color:var(--error)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
-const error = "FormSelectorWrapper_error_E7GBT";
-const disabled = "FormSelectorWrapper_disabled_E7GBT";
-const required = "FormSelectorWrapper_required_E7GBT";
+!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 */.FormSelectorWrapper_error_k4xuc input+span{outline:var(--error) solid 1px;outline-offset:-1px;border-radius:2px;overflow:hidden}.FormSelectorWrapper_helper-text_k4xuc{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size))}.FormSelectorWrapper_children-container_k4xuc>span:nth-of-type(2){margin-right:.5rem}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=success]{color:var(--success);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=error]{color:var(--error);font-size:var(--font-size-big)}.FormSelectorWrapper_children-container_k4xuc [data-icon-status=info]{color:var(--default);font-size:var(--font-size-big)}.FormSelectorWrapper_disabled_k4xuc input{color:var(--disabled)}.FormSelectorWrapper_disabled_k4xuc input:disabled{cursor:not-allowed}.FormSelectorWrapper_disabled_k4xuc label{cursor:not-allowed}.FormSelectorWrapper_required_k4xuc{color:var(--error)}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+const error = "FormSelectorWrapper_error_k4xuc";
+const disabled = "FormSelectorWrapper_disabled_k4xuc";
+const required = "FormSelectorWrapper_required_k4xuc";
 const classes = {
   error,
-  "helper-text": "FormSelectorWrapper_helper-text_E7GBT",
-  "children-container": "FormSelectorWrapper_children-container_E7GBT",
+  "helper-text": "FormSelectorWrapper_helper-text_k4xuc",
+  "children-container": "FormSelectorWrapper_children-container_k4xuc",
   disabled,
   required
 };

package/dist/components/Form/Input/Input.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Input_sr-only_E7GBT{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Input_hidden_E7GBT{display:none}.Input_slide-in_E7GBT{animation:Input_slide-in_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-in_E7GBT{animation-duration:.1ms}}.Input_slide-out_E7GBT{animation:Input_slide-out_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-out_E7GBT{animation-duration:.1ms}}@keyframes Input_slide-in_E7GBT{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Input_slide-out_E7GBT{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 */.Input_input-wrapper_E7GBT{position:relative;display:flex;align-items:center;border:0;border-radius:var(--input-border-radius);background-color:var(--input-background-color);padding:0 calc(.5 * var(--font-size));transition-property:background-color;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_E7GBT{transition-duration:.1ms}}.Input_input-wrapper_E7GBT input:-webkit-autofill,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus,.Input_input-wrapper_E7GBT input:-webkit-autofill:active{-webkit-transition:background-color 5000s ease-in-out 0s!important;transition:background-color 5000s ease-in-out 0s!important}.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{content:"";position:absolute;display:block;width:100%;height:100%;border-radius:var(--input-border-radius)}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{background-color:#e8f0fe}}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{background-color:#faffbd}}.Input_input-wrapper_E7GBT:hover .Input_outline_E7GBT{border-color:var(--input-border-color);background-color:var(--input-hover-background-color)}.Input_input-wrapper_E7GBT .Input_outline_E7GBT.Input_disabled_E7GBT{border-color:var(--disabled);background-color:var(--input-disabled-background-color)}.Input_input-wrapper_E7GBT .Input_outline_E7GBT.Input_error_E7GBT{border-color:var(--error)}.Input_input-wrapper_E7GBT [data-icon-status=success],.Input_input-wrapper_E7GBT [data-icon-status=error]{height:100%;width:calc(1.25 * var(--font-size));box-sizing:border-box;font-size:var(--icon-font-big);display:flex;align-items:center;justify-content:center;z-index:2}.Input_input-wrapper_E7GBT [data-icon-status=success]:before,.Input_input-wrapper_E7GBT [data-icon-status=error]:before{font-size:var(--icon-font-big);height:calc(1.25 * var(--font-size));width:calc(1.25 * var(--font-size));display:flex;align-items:center;justify-content:center}.Input_input-wrapper_E7GBT [data-icon-status=success]{color:var(--success)}.Input_input-wrapper_E7GBT [data-icon-status=error]{color:var(--error)}.Input_input-wrapper_E7GBT[data-readonlyview=true]{color:var(--read-only-text-color)}.Input_input-wrapper_E7GBT[data-readonlyview=true] .Input_Input-module_E7GBT{border-color:var(--read-only-border-color)}.Input_input-wrapper_E7GBT[data-readonlyview=true] span.Input_outline_E7GBT{color:var(--read-only-text-color);border-color:var(--read-only-border-color);background-color:var(--color-white)}.Input_input-wrapper_E7GBT[data-readonlyview=true]:hover .Input_outline_E7GBT{color:var(--read-only-text-color);background-color:var(--color-white);border-color:var(--read-only-border-color)}.Input_input-wrapper_E7GBT [data-prefix],.Input_input-wrapper_E7GBT [data-suffix]{display:block;z-index:1;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_E7GBT [data-prefix],.Input_input-wrapper_E7GBT [data-suffix]{transition-duration:.1ms}}.Input_input-wrapper_E7GBT.Input_focus_E7GBT:not(.Input_disabled_E7GBT):not([data-readonlyview=true]),.Input_input-wrapper_E7GBT[data-readonlyview=true]:focus:not(.Input_disabled_E7GBT),.Input_input-wrapper_E7GBT[data-readonlyview=true]:focus-visible:not(.Input_disabled_E7GBT){position:relative;z-index:2;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:calc(.125 * var(--font-size));border-radius:var(--focus-border-radius)}.Input_input_E7GBT{padding:0;height:calc(2.75 * var(--font-size));color:var(--color-blue-grey900);font-size:var(--input-font-size);font-family:var(--font-family);box-sizing:border-box;border:0;border-radius:var(--input-border-radius);background-color:transparent;z-index:1}.Input_input_E7GBT:not(.Input_shrink-width-for-date-icon_E7GBT){width:100%}.Input_input_E7GBT:disabled{cursor:not-allowed;color:var(--greyed-out)}.Input_input_E7GBT.Input_shrink-width-for-date-icon_E7GBT{width:auto}.Input_input_E7GBT{transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input_E7GBT{transition-duration:.1ms}}.Input_input_E7GBT:focus:not(:disabled){outline:none}[data-readonlyview=true] .Input_outline_E7GBT{border-color:var(--read-only-border-color)}.Input_outline_E7GBT{pointer-events:none;position:absolute;margin:0;padding:0;top:0;right:0;bottom:0;left:0;border-color:var(--input-border-color);border-style:var(--input-border-style);border-width:var(--input-border-width);border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_outline_E7GBT{transition-duration:.1ms}}.Input_error_E7GBT input{padding-right:calc(1.25 * var(--font-size))}.Input_error_E7GBT input.Input_remove-extra-indent_E7GBT{padding-right:0}.Input_success_E7GBT input{padding-right:calc(1.25 * var(--font-size))}@media only screen and (min-width: 30em){.Input_input-wrapper_E7GBT{padding:0 calc(.5 * var(--font-size))}}')),document.head.appendChild(t)}}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="Input_outline_E7GBT",t="Input_disabled_E7GBT",s="Input_error_E7GBT",r="Input_focus_E7GBT",u="Input_input_E7GBT",o="Input_success_E7GBT",p={"input-wrapper":"Input_input-wrapper_E7GBT",outline:e,disabled:t,error:s,focus:r,input:u,"shrink-width-for-date-icon":"Input_shrink-width-for-date-icon_E7GBT",success:o};exports.default=p,exports.disabled=t,exports.error=s,exports.focus=r,exports.input=u,exports.outline=e,exports.success=o;
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Input_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Input_hidden_k4xuc{display:none}.Input_slide-in_k4xuc{animation:Input_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-in_k4xuc{animation-duration:.1ms}}.Input_slide-out_k4xuc{animation:Input_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-out_k4xuc{animation-duration:.1ms}}@keyframes Input_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Input_slide-out_k4xuc{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 */.Input_input-wrapper_k4xuc{position:relative;display:flex;align-items:center;border:0;border-radius:var(--input-border-radius);background-color:var(--input-background-color);padding:0 calc(.5 * var(--font-size));transition-property:background-color;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_k4xuc{transition-duration:.1ms}}.Input_input-wrapper_k4xuc input:-webkit-autofill,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus,.Input_input-wrapper_k4xuc input:-webkit-autofill:active{-webkit-transition:background-color 5000s ease-in-out 0s!important;transition:background-color 5000s ease-in-out 0s!important}.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{content:"";position:absolute;display:block;width:100%;height:100%;border-radius:var(--input-border-radius)}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{background-color:#e8f0fe}}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{background-color:#faffbd}}.Input_input-wrapper_k4xuc:hover .Input_outline_k4xuc{border-color:var(--input-border-color);background-color:var(--input-hover-background-color)}.Input_input-wrapper_k4xuc .Input_outline_k4xuc.Input_disabled_k4xuc{border-color:var(--disabled);background-color:var(--input-disabled-background-color)}.Input_input-wrapper_k4xuc .Input_outline_k4xuc.Input_error_k4xuc{border-color:var(--error)}.Input_input-wrapper_k4xuc [data-icon-status=success],.Input_input-wrapper_k4xuc [data-icon-status=error]{height:100%;width:calc(1.25 * var(--font-size));box-sizing:border-box;font-size:var(--icon-font-big);display:flex;align-items:center;justify-content:center;z-index:2}.Input_input-wrapper_k4xuc [data-icon-status=success]:before,.Input_input-wrapper_k4xuc [data-icon-status=error]:before{font-size:var(--icon-font-big);height:calc(1.25 * var(--font-size));width:calc(1.25 * var(--font-size));display:flex;align-items:center;justify-content:center}.Input_input-wrapper_k4xuc [data-icon-status=success]{color:var(--success)}.Input_input-wrapper_k4xuc [data-icon-status=error]{color:var(--error)}.Input_input-wrapper_k4xuc[data-readonlyview=true]{color:var(--read-only-text-color)}.Input_input-wrapper_k4xuc[data-readonlyview=true] .Input_Input-module_k4xuc{border-color:var(--read-only-border-color)}.Input_input-wrapper_k4xuc[data-readonlyview=true] span.Input_outline_k4xuc{color:var(--read-only-text-color);border-color:var(--read-only-border-color);background-color:var(--color-white)}.Input_input-wrapper_k4xuc[data-readonlyview=true]:hover .Input_outline_k4xuc{color:var(--read-only-text-color);background-color:var(--color-white);border-color:var(--read-only-border-color)}.Input_input-wrapper_k4xuc [data-prefix],.Input_input-wrapper_k4xuc [data-suffix]{display:block;z-index:1;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_k4xuc [data-prefix],.Input_input-wrapper_k4xuc [data-suffix]{transition-duration:.1ms}}.Input_input-wrapper_k4xuc.Input_focus_k4xuc:not(.Input_disabled_k4xuc):not([data-readonlyview=true]),.Input_input-wrapper_k4xuc[data-readonlyview=true]:focus:not(.Input_disabled_k4xuc),.Input_input-wrapper_k4xuc[data-readonlyview=true]:focus-visible:not(.Input_disabled_k4xuc){position:relative;z-index:2;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:calc(.125 * var(--font-size));border-radius:var(--focus-border-radius)}.Input_input_k4xuc{padding:0;height:calc(2.75 * var(--font-size));color:var(--color-blue-grey900);font-size:var(--input-font-size);font-family:var(--font-family);box-sizing:border-box;border:0;border-radius:var(--input-border-radius);background-color:transparent;z-index:1}.Input_input_k4xuc:not(.Input_shrink-width-for-date-icon_k4xuc){width:100%}.Input_input_k4xuc:disabled{cursor:not-allowed;color:var(--greyed-out)}.Input_input_k4xuc.Input_shrink-width-for-date-icon_k4xuc{width:auto}.Input_input_k4xuc{transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input_k4xuc{transition-duration:.1ms}}.Input_input_k4xuc:focus:not(:disabled){outline:none}[data-readonlyview=true] .Input_outline_k4xuc{border-color:var(--read-only-border-color)}.Input_outline_k4xuc{pointer-events:none;position:absolute;margin:0;padding:0;top:0;right:0;bottom:0;left:0;border-color:var(--input-border-color);border-style:var(--input-border-style);border-width:var(--input-border-width);border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_outline_k4xuc{transition-duration:.1ms}}.Input_error_k4xuc input{padding-right:calc(1.25 * var(--font-size))}.Input_error_k4xuc input.Input_remove-extra-indent_k4xuc{padding-right:0}.Input_success_k4xuc input{padding-right:calc(1.25 * var(--font-size))}@media only screen and (min-width: 30em){.Input_input-wrapper_k4xuc{padding:0 calc(.5 * var(--font-size))}}')),document.head.appendChild(t)}}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="Input_outline_k4xuc",t="Input_disabled_k4xuc",u="Input_error_k4xuc",s="Input_focus_k4xuc",r="Input_input_k4xuc",o="Input_success_k4xuc",p={"input-wrapper":"Input_input-wrapper_k4xuc",outline:e,disabled:t,error:u,focus:s,input:r,"shrink-width-for-date-icon":"Input_shrink-width-for-date-icon_k4xuc",success:o};exports.default=p,exports.disabled=t,exports.error=u,exports.focus=s,exports.input=r,exports.outline=e,exports.success=o;
 //# sourceMappingURL=Input.module.scss.cjs.js.map

package/dist/components/Form/Input/Input.module.scss.es.js

@@ -1,18 +1,18 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Input_sr-only_E7GBT{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Input_hidden_E7GBT{display:none}.Input_slide-in_E7GBT{animation:Input_slide-in_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-in_E7GBT{animation-duration:.1ms}}.Input_slide-out_E7GBT{animation:Input_slide-out_E7GBT .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-out_E7GBT{animation-duration:.1ms}}@keyframes Input_slide-in_E7GBT{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Input_slide-out_E7GBT{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 */.Input_input-wrapper_E7GBT{position:relative;display:flex;align-items:center;border:0;border-radius:var(--input-border-radius);background-color:var(--input-background-color);padding:0 calc(.5 * var(--font-size));transition-property:background-color;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_E7GBT{transition-duration:.1ms}}.Input_input-wrapper_E7GBT input:-webkit-autofill,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus,.Input_input-wrapper_E7GBT input:-webkit-autofill:active{-webkit-transition:background-color 5000s ease-in-out 0s!important;transition:background-color 5000s ease-in-out 0s!important}.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{content:"";position:absolute;display:block;width:100%;height:100%;border-radius:var(--input-border-radius)}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{background-color:#e8f0fe}}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){.Input_input-wrapper_E7GBT input:-webkit-autofill~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:hover~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:focus~.Input_outline_E7GBT:after,.Input_input-wrapper_E7GBT input:-webkit-autofill:active~.Input_outline_E7GBT:after{background-color:#faffbd}}.Input_input-wrapper_E7GBT:hover .Input_outline_E7GBT{border-color:var(--input-border-color);background-color:var(--input-hover-background-color)}.Input_input-wrapper_E7GBT .Input_outline_E7GBT.Input_disabled_E7GBT{border-color:var(--disabled);background-color:var(--input-disabled-background-color)}.Input_input-wrapper_E7GBT .Input_outline_E7GBT.Input_error_E7GBT{border-color:var(--error)}.Input_input-wrapper_E7GBT [data-icon-status=success],.Input_input-wrapper_E7GBT [data-icon-status=error]{height:100%;width:calc(1.25 * var(--font-size));box-sizing:border-box;font-size:var(--icon-font-big);display:flex;align-items:center;justify-content:center;z-index:2}.Input_input-wrapper_E7GBT [data-icon-status=success]:before,.Input_input-wrapper_E7GBT [data-icon-status=error]:before{font-size:var(--icon-font-big);height:calc(1.25 * var(--font-size));width:calc(1.25 * var(--font-size));display:flex;align-items:center;justify-content:center}.Input_input-wrapper_E7GBT [data-icon-status=success]{color:var(--success)}.Input_input-wrapper_E7GBT [data-icon-status=error]{color:var(--error)}.Input_input-wrapper_E7GBT[data-readonlyview=true]{color:var(--read-only-text-color)}.Input_input-wrapper_E7GBT[data-readonlyview=true] .Input_Input-module_E7GBT{border-color:var(--read-only-border-color)}.Input_input-wrapper_E7GBT[data-readonlyview=true] span.Input_outline_E7GBT{color:var(--read-only-text-color);border-color:var(--read-only-border-color);background-color:var(--color-white)}.Input_input-wrapper_E7GBT[data-readonlyview=true]:hover .Input_outline_E7GBT{color:var(--read-only-text-color);background-color:var(--color-white);border-color:var(--read-only-border-color)}.Input_input-wrapper_E7GBT [data-prefix],.Input_input-wrapper_E7GBT [data-suffix]{display:block;z-index:1;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_E7GBT [data-prefix],.Input_input-wrapper_E7GBT [data-suffix]{transition-duration:.1ms}}.Input_input-wrapper_E7GBT.Input_focus_E7GBT:not(.Input_disabled_E7GBT):not([data-readonlyview=true]),.Input_input-wrapper_E7GBT[data-readonlyview=true]:focus:not(.Input_disabled_E7GBT),.Input_input-wrapper_E7GBT[data-readonlyview=true]:focus-visible:not(.Input_disabled_E7GBT){position:relative;z-index:2;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:calc(.125 * var(--font-size));border-radius:var(--focus-border-radius)}.Input_input_E7GBT{padding:0;height:calc(2.75 * var(--font-size));color:var(--color-blue-grey900);font-size:var(--input-font-size);font-family:var(--font-family);box-sizing:border-box;border:0;border-radius:var(--input-border-radius);background-color:transparent;z-index:1}.Input_input_E7GBT:not(.Input_shrink-width-for-date-icon_E7GBT){width:100%}.Input_input_E7GBT:disabled{cursor:not-allowed;color:var(--greyed-out)}.Input_input_E7GBT.Input_shrink-width-for-date-icon_E7GBT{width:auto}.Input_input_E7GBT{transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input_E7GBT{transition-duration:.1ms}}.Input_input_E7GBT:focus:not(:disabled){outline:none}[data-readonlyview=true] .Input_outline_E7GBT{border-color:var(--read-only-border-color)}.Input_outline_E7GBT{pointer-events:none;position:absolute;margin:0;padding:0;top:0;right:0;bottom:0;left:0;border-color:var(--input-border-color);border-style:var(--input-border-style);border-width:var(--input-border-width);border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_outline_E7GBT{transition-duration:.1ms}}.Input_error_E7GBT input{padding-right:calc(1.25 * var(--font-size))}.Input_error_E7GBT input.Input_remove-extra-indent_E7GBT{padding-right:0}.Input_success_E7GBT input{padding-right:calc(1.25 * var(--font-size))}@media only screen and (min-width: 30em){.Input_input-wrapper_E7GBT{padding:0 calc(.5 * var(--font-size))}}')),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const outline = "Input_outline_E7GBT";
-const disabled = "Input_disabled_E7GBT";
-const error = "Input_error_E7GBT";
-const focus = "Input_focus_E7GBT";
-const input = "Input_input_E7GBT";
-const success = "Input_success_E7GBT";
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('.Input_sr-only_k4xuc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.Input_hidden_k4xuc{display:none}.Input_slide-in_k4xuc{animation:Input_slide-in_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-in_k4xuc{animation-duration:.1ms}}.Input_slide-out_k4xuc{animation:Input_slide-out_k4xuc .5s forwards}@media (prefers-reduced-motion: reduce){.Input_slide-out_k4xuc{animation-duration:.1ms}}@keyframes Input_slide-in_k4xuc{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes Input_slide-out_k4xuc{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 */.Input_input-wrapper_k4xuc{position:relative;display:flex;align-items:center;border:0;border-radius:var(--input-border-radius);background-color:var(--input-background-color);padding:0 calc(.5 * var(--font-size));transition-property:background-color;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_k4xuc{transition-duration:.1ms}}.Input_input-wrapper_k4xuc input:-webkit-autofill,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus,.Input_input-wrapper_k4xuc input:-webkit-autofill:active{-webkit-transition:background-color 5000s ease-in-out 0s!important;transition:background-color 5000s ease-in-out 0s!important}.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{content:"";position:absolute;display:block;width:100%;height:100%;border-radius:var(--input-border-radius)}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{background-color:#e8f0fe}}@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm){.Input_input-wrapper_k4xuc input:-webkit-autofill~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:hover~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:focus~.Input_outline_k4xuc:after,.Input_input-wrapper_k4xuc input:-webkit-autofill:active~.Input_outline_k4xuc:after{background-color:#faffbd}}.Input_input-wrapper_k4xuc:hover .Input_outline_k4xuc{border-color:var(--input-border-color);background-color:var(--input-hover-background-color)}.Input_input-wrapper_k4xuc .Input_outline_k4xuc.Input_disabled_k4xuc{border-color:var(--disabled);background-color:var(--input-disabled-background-color)}.Input_input-wrapper_k4xuc .Input_outline_k4xuc.Input_error_k4xuc{border-color:var(--error)}.Input_input-wrapper_k4xuc [data-icon-status=success],.Input_input-wrapper_k4xuc [data-icon-status=error]{height:100%;width:calc(1.25 * var(--font-size));box-sizing:border-box;font-size:var(--icon-font-big);display:flex;align-items:center;justify-content:center;z-index:2}.Input_input-wrapper_k4xuc [data-icon-status=success]:before,.Input_input-wrapper_k4xuc [data-icon-status=error]:before{font-size:var(--icon-font-big);height:calc(1.25 * var(--font-size));width:calc(1.25 * var(--font-size));display:flex;align-items:center;justify-content:center}.Input_input-wrapper_k4xuc [data-icon-status=success]{color:var(--success)}.Input_input-wrapper_k4xuc [data-icon-status=error]{color:var(--error)}.Input_input-wrapper_k4xuc[data-readonlyview=true]{color:var(--read-only-text-color)}.Input_input-wrapper_k4xuc[data-readonlyview=true] .Input_Input-module_k4xuc{border-color:var(--read-only-border-color)}.Input_input-wrapper_k4xuc[data-readonlyview=true] span.Input_outline_k4xuc{color:var(--read-only-text-color);border-color:var(--read-only-border-color);background-color:var(--color-white)}.Input_input-wrapper_k4xuc[data-readonlyview=true]:hover .Input_outline_k4xuc{color:var(--read-only-text-color);background-color:var(--color-white);border-color:var(--read-only-border-color)}.Input_input-wrapper_k4xuc [data-prefix],.Input_input-wrapper_k4xuc [data-suffix]{display:block;z-index:1;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input-wrapper_k4xuc [data-prefix],.Input_input-wrapper_k4xuc [data-suffix]{transition-duration:.1ms}}.Input_input-wrapper_k4xuc.Input_focus_k4xuc:not(.Input_disabled_k4xuc):not([data-readonlyview=true]),.Input_input-wrapper_k4xuc[data-readonlyview=true]:focus:not(.Input_disabled_k4xuc),.Input_input-wrapper_k4xuc[data-readonlyview=true]:focus-visible:not(.Input_disabled_k4xuc){position:relative;z-index:2;outline:calc(.125 * var(--font-size)) solid var(--color-focus);outline-offset:calc(.125 * var(--font-size));border-radius:var(--focus-border-radius)}.Input_input_k4xuc{padding:0;height:calc(2.75 * var(--font-size));color:var(--color-blue-grey900);font-size:var(--input-font-size);font-family:var(--font-family);box-sizing:border-box;border:0;border-radius:var(--input-border-radius);background-color:transparent;z-index:1}.Input_input_k4xuc:not(.Input_shrink-width-for-date-icon_k4xuc){width:100%}.Input_input_k4xuc:disabled{cursor:not-allowed;color:var(--greyed-out)}.Input_input_k4xuc.Input_shrink-width-for-date-icon_k4xuc{width:auto}.Input_input_k4xuc{transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_input_k4xuc{transition-duration:.1ms}}.Input_input_k4xuc:focus:not(:disabled){outline:none}[data-readonlyview=true] .Input_outline_k4xuc{border-color:var(--read-only-border-color)}.Input_outline_k4xuc{pointer-events:none;position:absolute;margin:0;padding:0;top:0;right:0;bottom:0;left:0;border-color:var(--input-border-color);border-style:var(--input-border-style);border-width:var(--input-border-width);border-radius:var(--input-border-radius);transition-property:all;transition-duration:.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){.Input_outline_k4xuc{transition-duration:.1ms}}.Input_error_k4xuc input{padding-right:calc(1.25 * var(--font-size))}.Input_error_k4xuc input.Input_remove-extra-indent_k4xuc{padding-right:0}.Input_success_k4xuc input{padding-right:calc(1.25 * var(--font-size))}@media only screen and (min-width: 30em){.Input_input-wrapper_k4xuc{padding:0 calc(.5 * var(--font-size))}}')),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const outline = "Input_outline_k4xuc";
+const disabled = "Input_disabled_k4xuc";
+const error = "Input_error_k4xuc";
+const focus = "Input_focus_k4xuc";
+const input = "Input_input_k4xuc";
+const success = "Input_success_k4xuc";
 const classes = {
-  "input-wrapper": "Input_input-wrapper_E7GBT",
+  "input-wrapper": "Input_input-wrapper_k4xuc",
   outline,
   disabled,
   error,
   focus,
   input,
-  "shrink-width-for-date-icon": "Input_shrink-width-for-date-icon_E7GBT",
+  "shrink-width-for-date-icon": "Input_shrink-width-for-date-icon_k4xuc",
   success
 };
 export {

package/dist/components/Form/Label/Label.module.scss.cjs.js

@@ -1,3 +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 */.Label_label_E7GBT{cursor:text;color:var(--greyed-out);font-size:var(--font-size)}')),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="Label_label_E7GBT",l={label:e};exports.default=l,exports.label=e;
+!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 */.Label_label_k4xuc{cursor:text;color:var(--greyed-out);font-size:var(--font-size)}')),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="Label_label_k4xuc",l={label:e};exports.default=l,exports.label=e;
 //# sourceMappingURL=Label.module.scss.cjs.js.map

package/dist/components/Form/Label/Label.module.scss.es.js

@@ -1,5 +1,5 @@
-!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 */.Label_label_E7GBT{cursor:text;color:var(--greyed-out);font-size:var(--font-size)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
-const label = "Label_label_E7GBT";
+!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 */.Label_label_k4xuc{cursor:text;color:var(--greyed-out);font-size:var(--font-size)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const label = "Label_label_k4xuc";
 const classes = {
   label
 };

package/dist/components/Form/Radio/Radio.module.scss.cjs.js

@@ -1,3 +1,3 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.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 */.Radio_radio-wrapper_E7GBT{position:relative}.Radio_radio-wrapper_E7GBT+.Radio_radio-wrapper_E7GBT{margin-top:.75rem}.Radio_error_E7GBT{color:var(--error)}.Radio_error-message_E7GBT{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size));font-size:var(--font-size-sub)}.Radio_helper-text_E7GBT{margin-top:.25rem;margin-left:1.75rem}.Radio_error-icon_E7GBT{margin-right:.5rem;font-size:var(--font-size-big)}.Radio_radio-container_E7GBT{display:flex}.Radio_radio-container_E7GBT label{display:inline-block;margin-left:calc(.5 * var(--font-size));font-size:var(--font-size-form-label);font-family:var(--font-family);margin-top:.15rem}.Radio_radio-container_E7GBT label.Radio_no-margin-top_E7GBT{margin-top:0}.Radio_disabled_E7GBT .Radio_radio-container_E7GBT label{cursor:not-allowed}.Radio_native-input_E7GBT{position:absolute;top:0;left:0;opacity:0;margin:0;width:var(--font-size-big);height:var(--font-size-big);z-index:2}.Radio_native-input_E7GBT+span[data-icon=true]:before{display:block;width:var(--font-size-big);height:var(--font-size-big)}.Radio_native-input_E7GBT:checked+*{color:var(--radio-checked-color)}.Radio_native-input_E7GBT:checked+*.Radio_disabled_E7GBT{color:var(--disabled);cursor:not-allowed;pointer-events:none}.Radio_native-input_E7GBT:focus-visible+*{border-radius:100%;outline:2px solid var(--color-focus);outline-offset:2px}.Radio_native-input_E7GBT.Radio_error_E7GBT+*{border-radius:100%}.Radio_native-input_E7GBT.Radio_error_E7GBT:hover+.Radio_radio_E7GBT:before{outline-color:var(--radio-hover-background-color)}.Radio_native-input_E7GBT.Radio_error_E7GBT:active+.Radio_radio_E7GBT:before{outline-color:var(--radio-pressed-background-color)}.Radio_native-input_E7GBT:hover+.Radio_input_E7GBT.Radio_circle_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-hover-background-color)}.Radio_native-input_E7GBT:active+.Radio_input_E7GBT.Radio_circle_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-pressed-background-color)}.Radio_native-input_E7GBT:hover+.Radio_input_E7GBT.Radio_radio_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-hover-background-color);color:var(--radio-hover-color)}.Radio_native-input_E7GBT:active+.Radio_input_E7GBT.Radio_radio_E7GBT:not(.Radio_disabled_E7GBT){color:var(--radio-pressed-color);background-color:var(--radio-pressed-background-color)}.Radio_input_E7GBT{font-size:var(--font-size-big);width:var(--font-size-big);height:var(--font-size-big);z-index:1;border-radius:100%;color:var(--color-blue-grey500)}.Radio_input_E7GBT:active{border-radius:100%}.Radio_disabled_E7GBT .Radio_input_E7GBT{color:var(--disabled)}.Radio_disabled_E7GBT{color:var(--disabled);pointer-events:none}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT{color:var(--read-only-text-color)}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT span.Radio_input_E7GBT{color:var(--read-only-text-color);cursor:not-allowed}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT span.Radio_input_E7GBT:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT label{-webkit-user-select:text;user-select:text}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~span.Radio_input_E7GBT{color:var(--read-only-text-color);cursor:not-allowed}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~span.Radio_input_E7GBT:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~label{-webkit-user-select:text;user-select:text;pointer-events:none}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true] :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="Radio_error_E7GBT",o="Radio_disabled_E7GBT",e="Radio_radio_E7GBT",i="Radio_input_E7GBT",a="Radio_circle_E7GBT",d={"radio-wrapper":"Radio_radio-wrapper_E7GBT",error:r,"error-message":"Radio_error-message_E7GBT","radio-container":"Radio_radio-container_E7GBT","no-margin-top":"Radio_no-margin-top_E7GBT",disabled:o,"native-input":"Radio_native-input_E7GBT",radio:e,input:i,circle:a};exports.circle=a,exports.default=d,exports.disabled=o,exports.error=r,exports.input=i,exports.radio=e;
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.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 */.Radio_radio-wrapper_k4xuc{position:relative}.Radio_radio-wrapper_k4xuc+.Radio_radio-wrapper_k4xuc{margin-top:.75rem}.Radio_error_k4xuc{color:var(--error)}.Radio_error-message_k4xuc{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size));font-size:var(--font-size-sub)}.Radio_helper-text_k4xuc{margin-top:.25rem;margin-left:1.75rem}.Radio_error-icon_k4xuc{margin-right:.5rem;font-size:var(--font-size-big)}.Radio_radio-container_k4xuc{display:flex}.Radio_radio-container_k4xuc label{display:inline-block;margin-left:calc(.5 * var(--font-size));font-size:var(--font-size-form-label);font-family:var(--font-family);margin-top:.15rem}.Radio_radio-container_k4xuc label.Radio_no-margin-top_k4xuc{margin-top:0}.Radio_disabled_k4xuc .Radio_radio-container_k4xuc label{cursor:not-allowed}.Radio_native-input_k4xuc{position:absolute;top:0;left:0;opacity:0;margin:0;width:var(--font-size-big);height:var(--font-size-big);z-index:2}.Radio_native-input_k4xuc+span[data-icon=true]:before{display:block;width:var(--font-size-big);height:var(--font-size-big)}.Radio_native-input_k4xuc:checked+*{color:var(--radio-checked-color)}.Radio_native-input_k4xuc:checked+*.Radio_disabled_k4xuc{color:var(--disabled);cursor:not-allowed;pointer-events:none}.Radio_native-input_k4xuc:focus-visible+*{border-radius:100%;outline:2px solid var(--color-focus);outline-offset:2px}.Radio_native-input_k4xuc.Radio_error_k4xuc+*{border-radius:100%}.Radio_native-input_k4xuc.Radio_error_k4xuc:hover+.Radio_radio_k4xuc:before{outline-color:var(--radio-hover-background-color)}.Radio_native-input_k4xuc.Radio_error_k4xuc:active+.Radio_radio_k4xuc:before{outline-color:var(--radio-pressed-background-color)}.Radio_native-input_k4xuc:hover+.Radio_input_k4xuc.Radio_circle_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-hover-background-color)}.Radio_native-input_k4xuc:active+.Radio_input_k4xuc.Radio_circle_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-pressed-background-color)}.Radio_native-input_k4xuc:hover+.Radio_input_k4xuc.Radio_radio_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-hover-background-color);color:var(--radio-hover-color)}.Radio_native-input_k4xuc:active+.Radio_input_k4xuc.Radio_radio_k4xuc:not(.Radio_disabled_k4xuc){color:var(--radio-pressed-color);background-color:var(--radio-pressed-background-color)}.Radio_input_k4xuc{font-size:var(--font-size-big);width:var(--font-size-big);height:var(--font-size-big);z-index:1;border-radius:100%;color:var(--color-blue-grey500)}.Radio_input_k4xuc:active{border-radius:100%}.Radio_disabled_k4xuc .Radio_input_k4xuc{color:var(--disabled)}.Radio_disabled_k4xuc{color:var(--disabled);pointer-events:none}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc{color:var(--read-only-text-color)}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc span.Radio_input_k4xuc{color:var(--read-only-text-color);cursor:not-allowed}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc span.Radio_input_k4xuc:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc label{-webkit-user-select:text;user-select:text}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~span.Radio_input_k4xuc{color:var(--read-only-text-color);cursor:not-allowed}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~span.Radio_input_k4xuc:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~label{-webkit-user-select:text;user-select:text;pointer-events:none}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true] :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="Radio_error_k4xuc",o="Radio_disabled_k4xuc",e="Radio_radio_k4xuc",i="Radio_input_k4xuc",a="Radio_circle_k4xuc",d={"radio-wrapper":"Radio_radio-wrapper_k4xuc",error:r,"error-message":"Radio_error-message_k4xuc","radio-container":"Radio_radio-container_k4xuc","no-margin-top":"Radio_no-margin-top_k4xuc",disabled:o,"native-input":"Radio_native-input_k4xuc",radio:e,input:i,circle:a};exports.circle=a,exports.default=d,exports.disabled=o,exports.error=r,exports.input=i,exports.radio=e;
 //# sourceMappingURL=Radio.module.scss.cjs.js.map

package/dist/components/Form/Radio/Radio.module.scss.es.js

@@ -1,17 +1,17 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.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 */.Radio_radio-wrapper_E7GBT{position:relative}.Radio_radio-wrapper_E7GBT+.Radio_radio-wrapper_E7GBT{margin-top:.75rem}.Radio_error_E7GBT{color:var(--error)}.Radio_error-message_E7GBT{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size));font-size:var(--font-size-sub)}.Radio_helper-text_E7GBT{margin-top:.25rem;margin-left:1.75rem}.Radio_error-icon_E7GBT{margin-right:.5rem;font-size:var(--font-size-big)}.Radio_radio-container_E7GBT{display:flex}.Radio_radio-container_E7GBT label{display:inline-block;margin-left:calc(.5 * var(--font-size));font-size:var(--font-size-form-label);font-family:var(--font-family);margin-top:.15rem}.Radio_radio-container_E7GBT label.Radio_no-margin-top_E7GBT{margin-top:0}.Radio_disabled_E7GBT .Radio_radio-container_E7GBT label{cursor:not-allowed}.Radio_native-input_E7GBT{position:absolute;top:0;left:0;opacity:0;margin:0;width:var(--font-size-big);height:var(--font-size-big);z-index:2}.Radio_native-input_E7GBT+span[data-icon=true]:before{display:block;width:var(--font-size-big);height:var(--font-size-big)}.Radio_native-input_E7GBT:checked+*{color:var(--radio-checked-color)}.Radio_native-input_E7GBT:checked+*.Radio_disabled_E7GBT{color:var(--disabled);cursor:not-allowed;pointer-events:none}.Radio_native-input_E7GBT:focus-visible+*{border-radius:100%;outline:2px solid var(--color-focus);outline-offset:2px}.Radio_native-input_E7GBT.Radio_error_E7GBT+*{border-radius:100%}.Radio_native-input_E7GBT.Radio_error_E7GBT:hover+.Radio_radio_E7GBT:before{outline-color:var(--radio-hover-background-color)}.Radio_native-input_E7GBT.Radio_error_E7GBT:active+.Radio_radio_E7GBT:before{outline-color:var(--radio-pressed-background-color)}.Radio_native-input_E7GBT:hover+.Radio_input_E7GBT.Radio_circle_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-hover-background-color)}.Radio_native-input_E7GBT:active+.Radio_input_E7GBT.Radio_circle_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-pressed-background-color)}.Radio_native-input_E7GBT:hover+.Radio_input_E7GBT.Radio_radio_E7GBT:not(.Radio_disabled_E7GBT){background-color:var(--radio-hover-background-color);color:var(--radio-hover-color)}.Radio_native-input_E7GBT:active+.Radio_input_E7GBT.Radio_radio_E7GBT:not(.Radio_disabled_E7GBT){color:var(--radio-pressed-color);background-color:var(--radio-pressed-background-color)}.Radio_input_E7GBT{font-size:var(--font-size-big);width:var(--font-size-big);height:var(--font-size-big);z-index:1;border-radius:100%;color:var(--color-blue-grey500)}.Radio_input_E7GBT:active{border-radius:100%}.Radio_disabled_E7GBT .Radio_input_E7GBT{color:var(--disabled)}.Radio_disabled_E7GBT{color:var(--disabled);pointer-events:none}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT{color:var(--read-only-text-color)}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT span.Radio_input_E7GBT{color:var(--read-only-text-color);cursor:not-allowed}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT span.Radio_input_E7GBT:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}[data-readonlyview=true] .Radio_radio-wrapper_E7GBT label{-webkit-user-select:text;user-select:text}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~span.Radio_input_E7GBT{color:var(--read-only-text-color);cursor:not-allowed}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~span.Radio_input_E7GBT:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true]~label{-webkit-user-select:text;user-select:text;pointer-events:none}.Radio_radio-container_E7GBT input[type=radio][data-readonlyview=true] :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
-const error = "Radio_error_E7GBT";
-const disabled = "Radio_disabled_E7GBT";
-const radio = "Radio_radio_E7GBT";
-const input = "Radio_input_E7GBT";
-const circle = "Radio_circle_E7GBT";
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.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 */.Radio_radio-wrapper_k4xuc{position:relative}.Radio_radio-wrapper_k4xuc+.Radio_radio-wrapper_k4xuc{margin-top:.75rem}.Radio_error_k4xuc{color:var(--error)}.Radio_error-message_k4xuc{margin-top:.25rem;margin-left:calc(1.75 * var(--font-size));font-size:var(--font-size-sub)}.Radio_helper-text_k4xuc{margin-top:.25rem;margin-left:1.75rem}.Radio_error-icon_k4xuc{margin-right:.5rem;font-size:var(--font-size-big)}.Radio_radio-container_k4xuc{display:flex}.Radio_radio-container_k4xuc label{display:inline-block;margin-left:calc(.5 * var(--font-size));font-size:var(--font-size-form-label);font-family:var(--font-family);margin-top:.15rem}.Radio_radio-container_k4xuc label.Radio_no-margin-top_k4xuc{margin-top:0}.Radio_disabled_k4xuc .Radio_radio-container_k4xuc label{cursor:not-allowed}.Radio_native-input_k4xuc{position:absolute;top:0;left:0;opacity:0;margin:0;width:var(--font-size-big);height:var(--font-size-big);z-index:2}.Radio_native-input_k4xuc+span[data-icon=true]:before{display:block;width:var(--font-size-big);height:var(--font-size-big)}.Radio_native-input_k4xuc:checked+*{color:var(--radio-checked-color)}.Radio_native-input_k4xuc:checked+*.Radio_disabled_k4xuc{color:var(--disabled);cursor:not-allowed;pointer-events:none}.Radio_native-input_k4xuc:focus-visible+*{border-radius:100%;outline:2px solid var(--color-focus);outline-offset:2px}.Radio_native-input_k4xuc.Radio_error_k4xuc+*{border-radius:100%}.Radio_native-input_k4xuc.Radio_error_k4xuc:hover+.Radio_radio_k4xuc:before{outline-color:var(--radio-hover-background-color)}.Radio_native-input_k4xuc.Radio_error_k4xuc:active+.Radio_radio_k4xuc:before{outline-color:var(--radio-pressed-background-color)}.Radio_native-input_k4xuc:hover+.Radio_input_k4xuc.Radio_circle_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-hover-background-color)}.Radio_native-input_k4xuc:active+.Radio_input_k4xuc.Radio_circle_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-pressed-background-color)}.Radio_native-input_k4xuc:hover+.Radio_input_k4xuc.Radio_radio_k4xuc:not(.Radio_disabled_k4xuc){background-color:var(--radio-hover-background-color);color:var(--radio-hover-color)}.Radio_native-input_k4xuc:active+.Radio_input_k4xuc.Radio_radio_k4xuc:not(.Radio_disabled_k4xuc){color:var(--radio-pressed-color);background-color:var(--radio-pressed-background-color)}.Radio_input_k4xuc{font-size:var(--font-size-big);width:var(--font-size-big);height:var(--font-size-big);z-index:1;border-radius:100%;color:var(--color-blue-grey500)}.Radio_input_k4xuc:active{border-radius:100%}.Radio_disabled_k4xuc .Radio_input_k4xuc{color:var(--disabled)}.Radio_disabled_k4xuc{color:var(--disabled);pointer-events:none}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc{color:var(--read-only-text-color)}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc span.Radio_input_k4xuc{color:var(--read-only-text-color);cursor:not-allowed}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc span.Radio_input_k4xuc:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}[data-readonlyview=true] .Radio_radio-wrapper_k4xuc label{-webkit-user-select:text;user-select:text}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~span.Radio_input_k4xuc{color:var(--read-only-text-color);cursor:not-allowed}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~span.Radio_input_k4xuc:before{outline:1px solid var(--read-only-border-color);outline-offset:-1px;border-radius:50%}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true]~label{-webkit-user-select:text;user-select:text;pointer-events:none}.Radio_radio-container_k4xuc input[type=radio][data-readonlyview=true] :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}')),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+const error = "Radio_error_k4xuc";
+const disabled = "Radio_disabled_k4xuc";
+const radio = "Radio_radio_k4xuc";
+const input = "Radio_input_k4xuc";
+const circle = "Radio_circle_k4xuc";
 const classes = {
-  "radio-wrapper": "Radio_radio-wrapper_E7GBT",
+  "radio-wrapper": "Radio_radio-wrapper_k4xuc",
   error,
-  "error-message": "Radio_error-message_E7GBT",
-  "radio-container": "Radio_radio-container_E7GBT",
-  "no-margin-top": "Radio_no-margin-top_E7GBT",
+  "error-message": "Radio_error-message_k4xuc",
+  "radio-container": "Radio_radio-container_k4xuc",
+  "no-margin-top": "Radio_no-margin-top_k4xuc",
   disabled,
-  "native-input": "Radio_native-input_E7GBT",
+  "native-input": "Radio_native-input_k4xuc",
   radio,
   input,
   circle

package/dist/components/Form/Select/MultiSelect/MultiSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MultiSelect.module.scss.cjs.js"),t=require("react"),s=require("../../../../hooks/useClickOutside.cjs.js"),r=require("../../../../hooks/useDetermineStatusIcon.cjs.js"),l=require("../../../../readyclasses.module.scss.cjs.js"),n=require("../../../../util/helper.cjs.js"),a=require("../../../Icon/Icon.cjs.js"),i=require("../Select.interfaces.cjs.js"),c=require("../useAddNewBtn.cjs.js"),o=require("../useSelectPositionList.cjs.js"),u=require("./SelectButton.cjs.js"),d=require("./SelectedOptions.cjs.js"),p=require("./useArrowNavigation.cjs.js"),h=require("./useSearch.cjs.js"),f=require("../../../withReadOnly.cjs.js"),m=(e,t)=>`${e}_option${t}`,v=e=>`${e}_listbox`,b=e=>t.Children.toArray(e).reduce(((e,s)=>"string"==typeof s||"number"==typeof s?e+s:t.isValidElement(s)&&s.props.children?e+b(s.props.children):e),""),y=f.withReadOnly(t.forwardRef((({id:f,children:y,name:S,disabled:j=!1,labeledBy:C,placeholder:w,describedBy:E,selectButtonProps:g={},className:N,error:x=!1,success:I=!1,value:R,clearLabel:B="Clear selection",noResultsLabel:q="No results found",onChange:O,addNew:P,search:k={enabled:!0,renderThreshold:0,searchPlaceholder:"Search item"},isReadOnlyView:A,...L},$)=>{const D=t.useRef(f??n.generateID(20)),[F,M]=t.useState(!1),[V,H]=t.useState([]),T=t.useRef(null),_=t.useRef(null),[K,U]=t.useState(0),[z,G]=t.useState(!1),[J,Q]=t.useState(!1),[W,X]=t.useState(t.Children.count(y)-V.length),{filter:Y,renderSearch:Z,searchInputRef:ee,resetSearchState:te,searchVisible:se}=h.useSearch({selectId:D.current,expanded:F,search:k,searchInputClassName:e.default["select-search"],optionsCount:W,focusedSelectItem:K,setFocusedSelectItem:U,describedBy:E,getOptionId:m,getListboxId:v}),{addBtnRef:re,addNewBtnOptionsContainerClassName:le,renderAddNew:ne}=c.useAddNewBtn({id:m(D.current,W),addNew:P,filter:Y,focusedSelectItem:K,optionsCount:W,searchInputRef:ee,shouldClick:z,onClickCallback:()=>{G(!1),te()}}),ae=$||t.createRef(),ie=t.useRef(null),ce=!!L["data-readonlyview"]||A,{onArrowNavigation:oe}=p.useArrowNavigation({expanded:F,setExpanded:M,setFocusedSelectItem:U,childrenCount:W,setShouldClick:G,addBtnRef:re,searchInputRef:ee,customSelectButtonRef:ie,onClose:te,isReadOnlyView:ce}),{listPosition:ue,opacity:de,optionsListMaxHeight:pe,setListPosition:he,setOpacity:fe}=o.useSelectPositionList({expanded:F,optionListReference:_,containerReference:T,addBtnRef:re}),me=r.useDetermineStatusIcon({success:I,error:x});t.useEffect((()=>{F&&ee.current&&(Q(!0),ee.current.focus()),!F&&ie.current&&J&&(Q(!1),ie.current.focus())}),[F,ie.current,J,ee.current]),t.useEffect((()=>{var e;(e=>{const s=t.Children.map(y,(e=>e)),r=e.map((e=>{const t=s.find((t=>t.props.value===e));return{value:e,label:null==t?void 0:t.props.children,fixed:null==t?void 0:t.props.fixed}}));H(r)})(R),e=R,ae.current&&[...ae.current.options].forEach((t=>{e.includes(t.value)?t.selected=!0:t.selected=!1}))}),[R]);const ve=t.useRef(null);s.useClickOutside(ve,(()=>{F&&(M(!1),he(i.Position.Below),fe(0))}),[F]);const be=[];F&&be.push(e.default.expanded),x&&be.push(e.default.error),j&&be.push(e.default.disabled),N&&be.push(N),I&&be.push(e.default.success);const ye=()=>{L["data-readonlyview"]||A||(M((e=>!e)),G(!1))},Se=t.createElement("div",{className:`list-wrapper-container ${e.default["list-wrapper-container"]}`},t.createElement("div",{ref:_,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:F?"block":"none",opacity:de,maxHeight:pe.wrapper,pointerEvents:F?"auto":"none",top:ue===i.Position.Below?"4px":"initial",bottom:ue===i.Position.Above?"4px":"initial"}},t.createElement("ul",{id:v(D.current),className:le,role:"listbox","aria-multiselectable":"true",style:{maxHeight:pe.list}},(()=>{const s=e=>e.filter((e=>"object"==typeof e&&"props"in e&&!V.find((t=>t.value===e.props.value))));let r;return r=l(s(""!==Y?t.Children.toArray(y).filter((e=>b(e.props.children).toLowerCase().includes(Y.toLowerCase()))):t.Children.toArray(y))),W!==r.length&&X(r.length),0===r.length?t.createElement("li",{className:e.default["no-results"]},q):r;function l(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{U(e)},onOptionSelect:e=>{(e=>{if(ae.current&&e){const t=e.getAttribute("data-value"),s=[...ae.current.options],r=s.filter((e=>e.selected)).map((e=>e.value));s.forEach((e=>{(e.value===t||r.includes(e.value))&&(e.selected=!0)})),ae.current.dispatchEvent(new Event("change",{bubbles:!0}))}M(!1),te()})(e.current),M(!1),G(!1)},isSearching:!1,selectOpened:F,childIndex:s,hasFocus:K===s,shouldClick:z,id:m(D.current,s)})))}})()),ne()));return t.createElement("div",{ref:ve},t.createElement("select",{...n.filterProps(L,/^data-/,!1),tabIndex:-1,multiple:!0,"aria-hidden":"true",ref:ae,name:S,onChange:e=>{null==O||O(e)},className:l.default["sr-only"]},t.createElement("option",{value:""}),t.Children.map(y,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...n.filterProps(L,/^data-/),id:D.current,ref:T,onKeyDown:oe,className:`custom-select ${e.default.select} ${be.join(" ")}`},ue===i.Position.Above?Se:void 0,t.createElement("div",{className:`${e.default["custom-select"]} ${be.join(" ")} `,style:{display:"flex"}},t.createElement("div",{className:e.default["display-container"],"data-display":!0},t.createElement(u.SelectButton,{...g,onClick:ye,name:S,ref:ie,disabled:j,"aria-disabled":j,"aria-invalid":x,"aria-expanded":F,"aria-haspopup":"listbox","aria-labelledby":C,"aria-describedby":E}),0===(null==R?void 0:R.length)&&w&&t.createElement("span",{className:e.default.placeholder},w),(null==R?void 0:R.length)>0&&t.createElement(d.SelectedOptions,{disabled:j,display:V,onClick:ye,onRemove:e=>{ae.current&&([...ae.current.options].find((t=>t.value===e)).selected=!1,ae.current.dispatchEvent(new Event("change",{bubbles:!0})))}}),se&&Z()),t.createElement("div",{className:e.default.status},me||(F?t.createElement(a.Icon,{className:e.default["chevron-icon"],icon:a.Icons.ChevronUp}):t.createElement(a.Icon,{className:e.default["chevron-icon"],icon:a.Icons.ChevronDown})))),ue===i.Position.Below?Se:void 0))})));exports.MultiSelect=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MultiSelect.module.scss.cjs.js"),t=require("react"),s=require("react-dom"),r=require("../../../../hooks/useClickOutside.cjs.js"),n=require("../../../../hooks/useDetermineStatusIcon.cjs.js"),l=require("../../../../hooks/useGetDomRoot.cjs.js"),a=require("../../../../readyclasses.module.scss.cjs.js"),o=require("../../../../util/helper.cjs.js"),i=require("../../../Icon/Icon.cjs.js"),c=require("../Select.interfaces.cjs.js"),u=require("../useAddNewBtn.cjs.js"),d=require("../useSelectPositionList.cjs.js"),p=require("./SelectButton.cjs.js"),f=require("./SelectedOptions.cjs.js"),m=require("./useArrowNavigation.cjs.js"),h=require("./useSearch.cjs.js"),v=require("../../../withReadOnly.cjs.js"),b=(e,t)=>`${e}_option${t}`,w=e=>`${e}_listbox`,y=e=>t.Children.toArray(e).reduce(((e,s)=>"string"==typeof s||"number"==typeof s?e+s:t.isValidElement(s)&&s.props.children?e+y(s.props.children):e),""),E=v.withReadOnly(t.forwardRef((({id:v,children:E,name:j,disabled:S=!1,labeledBy:C,placeholder:g,describedBy:R,selectButtonProps:x={},className:N,error:I=!1,success:q=!1,value:B,clearLabel:O="Clear selection",noResultsLabel:L="No results found",onChange:P,addNew:$,search:k={enabled:!0,renderThreshold:0,searchPlaceholder:"Search item"},isReadOnlyView:A,domRoot:D,...F},z)=>{const M=t.useRef(v??o.generateID(20)),[T,V]=t.useState(!1),[H,G]=t.useState([]),_=t.useRef(null),K=t.useRef(null),U=t.useRef(null),J=t.useRef(null),{root:Q}=l.useGetDomRoot(D,_),[W,X]=t.useState(0),[Y,Z]=t.useState(!1),[ee,te]=t.useState(!1),[se,re]=t.useState(t.Children.count(E)-H.length),{filter:ne,renderSearch:le,searchInputRef:ae,resetSearchState:oe,searchVisible:ie}=h.useSearch({selectId:M.current,expanded:T,search:k,searchInputClassName:e.default["select-search"],optionsCount:se,focusedSelectItem:W,setFocusedSelectItem:X,describedBy:R,getOptionId:b,getListboxId:w}),{addBtnRef:ce,addNewBtnOptionsContainerClassName:ue,renderAddNew:de}=u.useAddNewBtn({id:b(M.current,se),addNew:$,filter:ne,focusedSelectItem:W,optionsCount:se,searchInputRef:ae,shouldClick:Y,onClickCallback:()=>{Z(!1),oe()}}),pe=z||t.createRef(),fe=t.useRef(null),me=!!F["data-readonlyview"]||A,{onArrowNavigation:he}=m.useArrowNavigation({expanded:T,setExpanded:V,setFocusedSelectItem:X,childrenCount:se,setShouldClick:Z,addBtnRef:ce,searchInputRef:ae,customSelectButtonRef:fe,onClose:oe,isReadOnlyView:me}),{listPosition:ve,opacity:be,optionsListMaxHeight:we,setListPosition:ye,setOpacity:Ee}=d.useSelectPositionList({expanded:T,optionListReference:U,containerReference:K,addBtnRef:ce}),je=n.useDetermineStatusIcon({success:q,error:I});t.useEffect((()=>{T&&ae.current&&(te(!0),ae.current.focus()),!T&&fe.current&&ee&&(te(!1),fe.current.focus())}),[T,fe.current,ee,ae.current]),t.useEffect((()=>{var e;(e=>{const s=t.Children.map(E,(e=>e)),r=e.map((e=>{const t=s.find((t=>t.props.value===e));return{value:e,label:null==t?void 0:t.props.children,fixed:null==t?void 0:t.props.fixed}}));G(r)})(B),e=B,pe.current&&[...pe.current.options].forEach((t=>{e.includes(t.value)?t.selected=!0:t.selected=!1}))}),[B]),r.useClickOutside(_,(()=>{T&&(V(!1),ye(c.Position.Below),Ee(0))}),[T]);const Se=[];T&&Se.push(e.default.expanded),I&&Se.push(e.default.error),S&&Se.push(e.default.disabled),N&&Se.push(N),q&&Se.push(e.default.success);const Ce=()=>{F["data-readonlyview"]||A||(V((e=>!e)),Z(!1))};t.useEffect((()=>{if(!T)return;const e=K.current,t=J.current;if(!e||!t)return;let s=null;const r=()=>{if(!e||!t)return;const s=e.getBoundingClientRect(),r=s.left,n=ve===c.Position.Below?s.bottom:s.top;t.style.position="fixed",t.style.zIndex="1000",t.style.left="0",t.style.top="0",t.style.width=`${s.width}px`,t.style.transform=`translate3d(${r}px, ${n}px, 0)`},n=()=>{null==s&&(s=globalThis.requestAnimationFrame((()=>{s=null,r()})))};r();const l=()=>n(),a=()=>n();window.addEventListener("scroll",l,{passive:!0,capture:!0}),window.addEventListener("resize",a);const o=new ResizeObserver((()=>{n()}));return o.observe(e),()=>{window.removeEventListener("scroll",l,!0),window.removeEventListener("resize",a),o.disconnect(),null!=s&&globalThis.cancelAnimationFrame(s)}}),[T,ve]);const ge=t.createElement("div",{className:`list-wrapper-container ${e.default["list-wrapper-container"]}`},t.createElement("div",{ref:U,className:`list-wrapper ${e.default["list-wrapper"]}`,style:{display:T?"block":"none",opacity:be,maxHeight:we.wrapper,pointerEvents:T?"auto":"none",top:ve===c.Position.Below?"4px":void 0,bottom:ve===c.Position.Above?"4px":void 0}},t.createElement("ul",{id:w(M.current),className:ue,role:"listbox","aria-multiselectable":"true",style:{maxHeight:we.list}},(()=>{const s=e=>e.filter((e=>"object"==typeof e&&"props"in e&&!H.find((t=>t.value===e.props.value))));let r;return r=n(s(""!==ne?t.Children.toArray(E).filter((e=>y(e.props.children).toLowerCase().includes(ne.toLowerCase()))):t.Children.toArray(E))),se!==r.length&&re(r.length),0===r.length?t.createElement("li",{className:e.default["no-results"]},L):r;function n(e){return t.Children.map(e,((e,s)=>t.cloneElement(e,{onFocusChange:e=>{X(e)},onOptionSelect:e=>{(e=>{if(pe.current&&e){const t=e.getAttribute("data-value"),s=[...pe.current.options],r=s.filter((e=>e.selected)).map((e=>e.value));s.forEach((e=>{(e.value===t||r.includes(e.value))&&(e.selected=!0)})),pe.current.dispatchEvent(new Event("change",{bubbles:!0}))}V(!1),oe()})(e.current),V(!1),Z(!1)},isSearching:!1,selectOpened:T,childIndex:s,hasFocus:W===s,shouldClick:Y,id:b(M.current,s)})))}})()),de()));return t.createElement(t.Fragment,null,t.createElement("div",{ref:_},t.createElement("select",{...o.filterProps(F,/^data-/,!1),tabIndex:-1,multiple:!0,"aria-hidden":"true",ref:pe,name:j,onChange:e=>{null==P||P(e)},className:a.default["sr-only"]},t.createElement("option",{value:""}),t.Children.map(E,(e=>t.createElement("option",{value:e.props.value})))),t.createElement("div",{...o.filterProps(F,/^data-/),id:M.current,ref:K,onKeyDown:he,className:`custom-select ${e.default.select} ${Se.join(" ")}`},t.createElement("div",{className:`${e.default["custom-select"]} ${Se.join(" ")} `,style:{display:"flex"}},t.createElement("div",{className:e.default["display-container"],"data-display":!0},t.createElement(p.SelectButton,{...x,onClick:Ce,name:j,ref:fe,disabled:S,"aria-disabled":S,"aria-invalid":I,"aria-expanded":T,"aria-haspopup":"listbox","aria-labelledby":C,"aria-describedby":R}),0===(null==B?void 0:B.length)&&g&&t.createElement("span",{className:e.default.placeholder},g),(null==B?void 0:B.length)>0&&t.createElement(f.SelectedOptions,{disabled:S,display:H,onClick:Ce,onRemove:e=>{pe.current&&([...pe.current.options].find((t=>t.value===e)).selected=!1,pe.current.dispatchEvent(new Event("change",{bubbles:!0})))}}),ie&&le()),t.createElement("div",{className:e.default.status},je||(T?t.createElement(i.Icon,{className:e.default["chevron-icon"],icon:i.Icons.ChevronUp}):t.createElement(i.Icon,{className:e.default["chevron-icon"],icon:i.Icons.ChevronDown})))))),s.createPortal(t.createElement("div",{ref:J,className:`${e.default.select} ${Se.join(" ")}`},ge),Q))})));exports.MultiSelect=E;
 //# sourceMappingURL=MultiSelect.cjs.js.map

package/dist/components/Form/Select/MultiSelect/MultiSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs.js","sources":["../../../../../src/components/Form/Select/MultiSelect/MultiSelect.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 classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n  ForwardRefRenderFunction,\n  ReactElement,\n  createRef,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { useClickOutside } from \"../../../../hooks/useClickOutside\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps, Position } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n  `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst extractTextFromChildren = (children: React.ReactNode): string => {\n  return React.Children.toArray(children).reduce((text: string, child) => {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return text + child;\n    }\n    if (React.isValidElement(child) && child.props.children) {\n      return text + extractTextFromChildren(child.props.children);\n    }\n    return text;\n  }, \"\");\n};\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n  {\n    id,\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    selectButtonProps = {},\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search = { enabled: true, renderThreshold: 0, searchPlaceholder: \"Search item\" },\n    isReadOnlyView,\n    ...rest\n  }: MultiSelectProps,\n  ref\n) => {\n  const multiSelectId = useRef(id ?? generateID(20));\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState<Display[]>([]);\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n    React.Children.count(children) - display.length\n  );\n  const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n    selectId: multiSelectId.current,\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount: optionsVisibleCount,\n    focusedSelectItem,\n    setFocusedSelectItem,\n    describedBy,\n    getOptionId,\n    getListboxId\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    id: getOptionId(multiSelectId.current, optionsVisibleCount),\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount: optionsVisibleCount,\n    searchInputRef,\n    shouldClick,\n    onClickCallback: () => {\n      setShouldClick(false);\n      resetSearchState();\n    }\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      const value = optionElement.getAttribute(\"data-value\")!;\n      const options = [...nativeSelect.current.options];\n      const lastSelectedOptionValues = options\n        .filter(option => option.selected)\n        .map(option => option.value);\n      options.forEach(option => {\n        if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n          option.selected = true;\n        }\n      });\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    setExpanded(false);\n    resetSearchState();\n  };\n\n  const onSelectedOptionRemoveHandler = (value: string) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.find(option => option.value === value)!.selected = false;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const readOnlyView = !!rest[\"data-readonlyview\"] || isReadOnlyView;\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    setFocusedSelectItem,\n    childrenCount: optionsVisibleCount,\n    setShouldClick,\n    addBtnRef,\n    searchInputRef,\n    customSelectButtonRef,\n    onClose: resetSearchState,\n    isReadOnlyView: readOnlyView\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (values: string[]) => {\n    const options = React.Children.map(children, child => child);\n    const displayArray: Display[] = values.map(value => {\n      const option = options.find(option => option.props.value === value);\n      return { value, label: option?.props.children, fixed: option?.props.fixed };\n    });\n    setDisplay(displayArray);\n  };\n\n  const syncSelectedOption = (vals: string[]) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.forEach(option => {\n        if (vals.includes(option.value)) {\n          option.selected = true;\n        } else {\n          option.selected = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n    const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n      return internalChildren.filter(\n        child =>\n          typeof child === \"object\" &&\n          \"props\" in child &&\n          !display.find(option => option.value === child.props.value)\n      );\n    };\n\n    let results;\n    if (filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(child => {\n        const childElement = child as ReactElement;\n        const childText = extractTextFromChildren(childElement.props.children);\n        return childText.toLowerCase().includes(filter.toLowerCase());\n      });\n\n      results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n    } else {\n      results = _internalRenderChildren(\n        filterOutSelectedChildren(React.Children.toArray(children))\n      );\n    }\n\n    optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n    if (results.length === 0) {\n      return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n    }\n\n    return results;\n\n    function _internalRenderChildren(internalChildren: ReactChildrenType) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child as ReactElement, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setExpanded(false);\n            setShouldClick(false);\n          },\n          isSearching: false,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          id: getOptionId(multiSelectId.current, index)\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded && searchInputRef.current) {\n      setShouldFocusButtonAfterClose(true);\n      searchInputRef.current.focus();\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      setShouldFocusButtonAfterClose(false);\n      customSelectButtonRef.current.focus();\n    }\n  }, [\n    expanded,\n    customSelectButtonRef.current,\n    shouldFocusButtonAfterClose,\n    searchInputRef.current\n  ]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n    syncSelectedOption(value);\n  }, [value]);\n\n  const myElementRef = useRef<HTMLDivElement>(null);\n\n  useClickOutside(myElementRef, () => {\n    if (!expanded) {\n      return;\n    }\n    setExpanded(false);\n    setListPosition(Position.Below);\n    setOpacity(0);\n  }, [expanded]);\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  const onSelectButtonClick = () => {\n    if (rest[\"data-readonlyview\"] || isReadOnlyView) {\n      return;\n    }\n    setExpanded(expanded => !expanded);\n    setShouldClick(false);\n  };\n\n  const optionsElement = (\n    <div className={`list-wrapper-container ${classes[\"list-wrapper-container\"]}`}>\n      <div\n        ref={optionListReference}\n        className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n        style={{\n          display: expanded ? \"block\" : \"none\",\n          opacity: opacity,\n          maxHeight: optionsListMaxHeight.wrapper,\n          pointerEvents: expanded ? \"auto\" : \"none\",\n          top: listPosition === Position.Below ? \"4px\" : \"initial\",\n          bottom: listPosition === Position.Above ? \"4px\" : \"initial\"\n        }}\n      >\n        <ul\n          id={getListboxId(multiSelectId.current)}\n          className={addNewBtnOptionsContainerClassName}\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          style={{ maxHeight: optionsListMaxHeight.list }}\n        >\n          {renderOptions()}\n        </ul>\n        {renderAddNew()}\n      </div>\n    </div>\n  );\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <div ref={myElementRef}>\n      <select\n        {...filterProps(rest, /^data-/, false)}\n        tabIndex={-1}\n        multiple={true}\n        aria-hidden=\"true\"\n        ref={nativeSelect}\n        name={name}\n        onChange={nativeOnChangeHandler}\n        className={readyclasses[\"sr-only\"]}\n      >\n        <option value=\"\"></option>\n        {React.Children.map(children, child => (\n          <option value={child.props.value}></option>\n        ))}\n      </select>\n      <div\n        {...filterProps(rest, /^data-/)}\n        id={multiSelectId.current}\n        ref={containerReference}\n        onKeyDown={onArrowNavigation}\n        className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n      >\n        {listPosition === Position.Above ? optionsElement : undefined}\n        <div\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: \"flex\" }}\n        >\n          <div className={classes[\"display-container\"]} data-display>\n            <SelectButton\n              {...selectButtonProps}\n              onClick={onSelectButtonClick}\n              name={name}\n              ref={customSelectButtonRef}\n              disabled={disabled}\n              aria-disabled={disabled}\n              aria-invalid={error}\n              aria-expanded={expanded}\n              aria-haspopup=\"listbox\"\n              aria-labelledby={labeledBy}\n              aria-describedby={describedBy}\n            />\n            {value?.length === 0 && placeholder && (\n              <span className={classes[\"placeholder\"]}>{placeholder}</span>\n            )}\n            {value?.length > 0 && (\n              <SelectedOptions\n                disabled={disabled}\n                display={display}\n                onClick={onSelectButtonClick}\n                onRemove={onSelectedOptionRemoveHandler}\n              />\n            )}\n            {searchVisible && renderSearch()}\n          </div>\n          <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n        </div>\n        {listPosition === Position.Below ? optionsElement : undefined}\n      </div>\n    </div>\n  );\n};\n\nexport const MultiSelect = withReadOnly(React.forwardRef(MultiSelectComponent));\n"],"names":["getOptionId","multiSelectId","optionIndex","getListboxId","extractTextFromChildren","children","React","Children","toArray","reduce","text","child","isValidElement","props","MultiSelect","withReadOnly","forwardRef","id","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","searchPlaceholder","isReadOnlyView","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","containerReference","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","customSelectButtonRef","readOnlyView","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","icon","useDetermineStatusIcon","useEffect","focus","vals","values","options","map","displayArray","option","find","label","fixed","syncDisplayValue","forEach","includes","selected","myElementRef","useClickOutside","Position","Below","additionalClasses","push","onSelectButtonClick","optionsElement","default","createElement","style","maxHeight","wrapper","pointerEvents","top","bottom","Above","role","list","filterOutSelectedChildren","internalChildren","results","_internalRenderChildren","toLowerCase","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","optionElement","getAttribute","lastSelectedOptionValues","dispatchEvent","Event","bubbles","onOptionChangeHandler","isSearching","selectOpened","hasFocus","renderOptions","filterProps","tabIndex","multiple","event","readyclasses","onKeyDown","select","join","SelectButton","onClick","SelectedOptions","onRemove","Icon","Icons","ChevronUp","ChevronDown"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs.js","sources":["../../../../../src/components/Form/Select/MultiSelect/MultiSelect.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 classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n  ForwardRefRenderFunction,\n  ReactElement,\n  createRef,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useClickOutside } from \"../../../../hooks/useClickOutside\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport { useGetDomRoot } from \"../../../../hooks/useGetDomRoot\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps, Position } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\nimport { withReadOnly } from \"../../../withReadOnly\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n  `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst extractTextFromChildren = (children: React.ReactNode): string => {\n  return React.Children.toArray(children).reduce((text: string, child) => {\n    if (typeof child === \"string\" || typeof child === \"number\") {\n      return text + child;\n    }\n    if (React.isValidElement(child) && child.props.children) {\n      return text + extractTextFromChildren(child.props.children);\n    }\n    return text;\n  }, \"\");\n};\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n  {\n    id,\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    selectButtonProps = {},\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search = { enabled: true, renderThreshold: 0, searchPlaceholder: \"Search item\" },\n    isReadOnlyView,\n    domRoot,\n    ...rest\n  }: MultiSelectProps,\n  ref\n) => {\n  const multiSelectId = useRef(id ?? generateID(20));\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState<Display[]>([]);\n  const myElementRef = useRef<HTMLDivElement>(null);\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const portalRef = useRef<HTMLDivElement>(null);\n  const { root } = useGetDomRoot(domRoot, myElementRef);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n    React.Children.count(children) - display.length\n  );\n  const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n    selectId: multiSelectId.current,\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount: optionsVisibleCount,\n    focusedSelectItem,\n    setFocusedSelectItem,\n    describedBy,\n    getOptionId,\n    getListboxId\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    id: getOptionId(multiSelectId.current, optionsVisibleCount),\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount: optionsVisibleCount,\n    searchInputRef,\n    shouldClick,\n    onClickCallback: () => {\n      setShouldClick(false);\n      resetSearchState();\n    }\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      const value = optionElement.getAttribute(\"data-value\")!;\n      const options = [...nativeSelect.current.options];\n      const lastSelectedOptionValues = options\n        .filter(option => option.selected)\n        .map(option => option.value);\n      options.forEach(option => {\n        if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n          option.selected = true;\n        }\n      });\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    setExpanded(false);\n    resetSearchState();\n  };\n\n  const onSelectedOptionRemoveHandler = (value: string) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.find(option => option.value === value)!.selected = false;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const readOnlyView = !!rest[\"data-readonlyview\"] || isReadOnlyView;\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    setFocusedSelectItem,\n    childrenCount: optionsVisibleCount,\n    setShouldClick,\n    addBtnRef,\n    searchInputRef,\n    customSelectButtonRef,\n    onClose: resetSearchState,\n    isReadOnlyView: readOnlyView\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (values: string[]) => {\n    const options = React.Children.map(children, child => child);\n    const displayArray: Display[] = values.map(value => {\n      const option = options.find(option => option.props.value === value);\n      return { value, label: option?.props.children, fixed: option?.props.fixed };\n    });\n    setDisplay(displayArray);\n  };\n\n  const syncSelectedOption = (vals: string[]) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.forEach(option => {\n        if (vals.includes(option.value)) {\n          option.selected = true;\n        } else {\n          option.selected = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n    const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n      return internalChildren.filter(\n        child =>\n          typeof child === \"object\" &&\n          \"props\" in child &&\n          !display.find(option => option.value === child.props.value)\n      );\n    };\n\n    let results;\n    if (filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(child => {\n        const childElement = child as ReactElement;\n        const childText = extractTextFromChildren(childElement.props.children);\n        return childText.toLowerCase().includes(filter.toLowerCase());\n      });\n\n      results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n    } else {\n      results = _internalRenderChildren(\n        filterOutSelectedChildren(React.Children.toArray(children))\n      );\n    }\n\n    optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n    if (results.length === 0) {\n      return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n    }\n\n    return results;\n\n    function _internalRenderChildren(internalChildren: ReactChildrenType) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child as ReactElement, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setExpanded(false);\n            setShouldClick(false);\n          },\n          isSearching: false,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          id: getOptionId(multiSelectId.current, index)\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded && searchInputRef.current) {\n      setShouldFocusButtonAfterClose(true);\n      searchInputRef.current.focus();\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      setShouldFocusButtonAfterClose(false);\n      customSelectButtonRef.current.focus();\n    }\n  }, [\n    expanded,\n    customSelectButtonRef.current,\n    shouldFocusButtonAfterClose,\n    searchInputRef.current\n  ]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n    syncSelectedOption(value);\n  }, [value]);\n\n  useClickOutside(myElementRef, () => {\n    if (!expanded) {\n      return;\n    }\n    setExpanded(false);\n    setListPosition(Position.Below);\n    setOpacity(0);\n  }, [expanded]);\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  const onSelectButtonClick = () => {\n    if (rest[\"data-readonlyview\"] || isReadOnlyView) {\n      return;\n    }\n    setExpanded(expanded => !expanded);\n    setShouldClick(false);\n  };\n\n  useEffect(() => {\n    if (!expanded) {\n      return;\n    }\n\n    const anchor = containerReference.current;\n    const portal = portalRef.current;\n\n    if (!anchor || !portal) {\n      return;\n    }\n\n    let frameId: number | null = null;\n\n    const updatePosition = () => {\n      if (!anchor || !portal) {\n        return;\n      }\n\n      const rect = anchor.getBoundingClientRect();\n      const x = rect.left;\n      const y = listPosition === Position.Below ? rect.bottom : rect.top;\n\n      portal.style.position = \"fixed\";\n      portal.style.zIndex = \"1000\";\n      portal.style.left = \"0\";\n      portal.style.top = \"0\";\n      portal.style.width = `${rect.width}px`;\n      portal.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n    };\n\n    const scheduleUpdate = () => {\n      if (frameId != null) {\n        return;\n      }\n      frameId = globalThis.requestAnimationFrame(() => {\n        frameId = null;\n        updatePosition();\n      });\n    };\n\n    updatePosition();\n\n    const handleScroll = () => scheduleUpdate();\n    const handleResize = () => scheduleUpdate();\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true, capture: true });\n    window.addEventListener(\"resize\", handleResize);\n\n    const resizeObserver = new ResizeObserver(() => {\n      scheduleUpdate();\n    });\n    resizeObserver.observe(anchor);\n\n    return () => {\n      window.removeEventListener(\"scroll\", handleScroll, true);\n      window.removeEventListener(\"resize\", handleResize);\n      resizeObserver.disconnect();\n      if (frameId != null) {\n        globalThis.cancelAnimationFrame(frameId);\n      }\n    };\n  }, [expanded, listPosition]);\n\n  const optionsElement = (\n    <div className={`list-wrapper-container ${classes[\"list-wrapper-container\"]}`}>\n      <div\n        ref={optionListReference}\n        className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n        style={{\n          display: expanded ? \"block\" : \"none\",\n          opacity: opacity,\n          maxHeight: optionsListMaxHeight.wrapper,\n          pointerEvents: expanded ? \"auto\" : \"none\",\n          top: listPosition === Position.Below ? \"4px\" : undefined,\n          bottom: listPosition === Position.Above ? \"4px\" : undefined\n        }}\n      >\n        <ul\n          id={getListboxId(multiSelectId.current)}\n          className={addNewBtnOptionsContainerClassName}\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          style={{ maxHeight: optionsListMaxHeight.list }}\n        >\n          {renderOptions()}\n        </ul>\n        {renderAddNew()}\n      </div>\n    </div>\n  );\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <>\n      <div ref={myElementRef}>\n        <select\n          {...filterProps(rest, /^data-/, false)}\n          tabIndex={-1}\n          multiple={true}\n          aria-hidden=\"true\"\n          ref={nativeSelect}\n          name={name}\n          onChange={nativeOnChangeHandler}\n          className={readyclasses[\"sr-only\"]}\n        >\n          <option value=\"\"></option>\n          {React.Children.map(children, child => (\n            <option value={child.props.value}></option>\n          ))}\n        </select>\n        <div\n          {...filterProps(rest, /^data-/)}\n          id={multiSelectId.current}\n          ref={containerReference}\n          onKeyDown={onArrowNavigation}\n          className={`custom-select ${classes.select} ${additionalClasses.join(\" \")}`}\n        >\n          <div\n            className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n            style={{ display: \"flex\" }}\n          >\n            <div className={classes[\"display-container\"]} data-display>\n              <SelectButton\n                {...selectButtonProps}\n                onClick={onSelectButtonClick}\n                name={name}\n                ref={customSelectButtonRef}\n                disabled={disabled}\n                aria-disabled={disabled}\n                aria-invalid={error}\n                aria-expanded={expanded}\n                aria-haspopup=\"listbox\"\n                aria-labelledby={labeledBy}\n                aria-describedby={describedBy}\n              />\n              {value?.length === 0 && placeholder && (\n                <span className={classes[\"placeholder\"]}>{placeholder}</span>\n              )}\n              {value?.length > 0 && (\n                <SelectedOptions\n                  disabled={disabled}\n                  display={display}\n                  onClick={onSelectButtonClick}\n                  onRemove={onSelectedOptionRemoveHandler}\n                />\n              )}\n              {searchVisible && renderSearch()}\n            </div>\n            <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n          </div>\n        </div>\n      </div>\n      {createPortal(\n        <div ref={portalRef} className={`${classes.select} ${additionalClasses.join(\" \")}`}>\n          {optionsElement}\n        </div>,\n        root\n      )}\n    </>\n  );\n};\n\nexport const MultiSelect = withReadOnly(React.forwardRef(MultiSelectComponent));\n"],"names":["getOptionId","multiSelectId","optionIndex","getListboxId","extractTextFromChildren","children","React","Children","toArray","reduce","text","child","isValidElement","props","MultiSelect","withReadOnly","forwardRef","id","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","searchPlaceholder","isReadOnlyView","domRoot","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","myElementRef","containerReference","optionListReference","portalRef","root","useGetDomRoot","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","customSelectButtonRef","readOnlyView","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","icon","useDetermineStatusIcon","useEffect","focus","vals","values","options","map","displayArray","option","find","label","fixed","syncDisplayValue","forEach","includes","selected","useClickOutside","Position","Below","additionalClasses","push","onSelectButtonClick","anchor","portal","frameId","updatePosition","rect","getBoundingClientRect","x","left","y","bottom","top","style","position","zIndex","width","transform","scheduleUpdate","globalThis","requestAnimationFrame","handleScroll","handleResize","window","addEventListener","passive","capture","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","cancelAnimationFrame","optionsElement","default","createElement","maxHeight","wrapper","pointerEvents","Above","role","list","filterOutSelectedChildren","internalChildren","results","_internalRenderChildren","toLowerCase","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","optionElement","getAttribute","lastSelectedOptionValues","dispatchEvent","Event","bubbles","onOptionChangeHandler","isSearching","selectOpened","hasFocus","renderOptions","Fragment","filterProps","tabIndex","multiple","event","readyclasses","onKeyDown","select","join","SelectButton","onClick","SelectedOptions","onRemove","Icon","Icons","ChevronUp","ChevronDown","createPortal"],"mappings":"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"}

package/dist/components/Form/Select/MultiSelect/MultiSelect.es.js

@@ -1,7 +1,9 @@
 import classes from "./MultiSelect.module.scss.es.js";
 import React, { useRef, useState, createRef, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { useClickOutside } from "../../../../hooks/useClickOutside.es.js";
 import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon.es.js";
+import { useGetDomRoot } from "../../../../hooks/useGetDomRoot.es.js";
 import readyclasses from "../../../../readyclasses.module.scss.es.js";
 import { generateID, filterProps } from "../../../../util/helper.es.js";
 import { Icon, Icons } from "../../../Icon/Icon.es.js";
@@ -45,13 +47,17 @@ const MultiSelectComponent = ({
   addNew,
   search = { enabled: true, renderThreshold: 0, searchPlaceholder: "Search item" },
   isReadOnlyView,
+  domRoot,
   ...rest
 }, ref) => {
   const multiSelectId = useRef(id ?? generateID(20));
   const [expanded, setExpanded] = useState(false);
   const [display, setDisplay] = useState([]);
+  const myElementRef = useRef(null);
   const containerReference = useRef(null);
   const optionListReference = useRef(null);
+  const portalRef = useRef(null);
+  const { root } = useGetDomRoot(domRoot, myElementRef);
   const [focusedSelectItem, setFocusedSelectItem] = useState(0);
   const [shouldClick, setShouldClick] = useState(
     false
@@ -214,7 +220,6 @@ const MultiSelectComponent = ({
     syncDisplayValue(value);
     syncSelectedOption(value);
   }, [value]);
-  const myElementRef = useRef(null);
   useClickOutside(myElementRef, () => {
     if (!expanded) {
       return;
@@ -236,6 +241,57 @@ const MultiSelectComponent = ({
     setExpanded((expanded2) => !expanded2);
     setShouldClick(false);
   };
+  useEffect(() => {
+    if (!expanded) {
+      return;
+    }
+    const anchor = containerReference.current;
+    const portal = portalRef.current;
+    if (!anchor || !portal) {
+      return;
+    }
+    let frameId = null;
+    const updatePosition = () => {
+      if (!anchor || !portal) {
+        return;
+      }
+      const rect = anchor.getBoundingClientRect();
+      const x = rect.left;
+      const y = listPosition === Position.Below ? rect.bottom : rect.top;
+      portal.style.position = "fixed";
+      portal.style.zIndex = "1000";
+      portal.style.left = "0";
+      portal.style.top = "0";
+      portal.style.width = `${rect.width}px`;
+      portal.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    };
+    const scheduleUpdate = () => {
+      if (frameId != null) {
+        return;
+      }
+      frameId = globalThis.requestAnimationFrame(() => {
+        frameId = null;
+        updatePosition();
+      });
+    };
+    updatePosition();
+    const handleScroll = () => scheduleUpdate();
+    const handleResize = () => scheduleUpdate();
+    window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    window.addEventListener("resize", handleResize);
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleUpdate();
+    });
+    resizeObserver.observe(anchor);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleResize);
+      resizeObserver.disconnect();
+      if (frameId != null) {
+        globalThis.cancelAnimationFrame(frameId);
+      }
+    };
+  }, [expanded, listPosition]);
   const optionsElement = /* @__PURE__ */ React.createElement("div", { className: `list-wrapper-container ${classes["list-wrapper-container"]}` }, /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -246,8 +302,8 @@ const MultiSelectComponent = ({
         opacity,
         maxHeight: optionsListMaxHeight.wrapper,
         pointerEvents: expanded ? "auto" : "none",
-        top: listPosition === Position.Below ? "4px" : "initial",
-        bottom: listPosition === Position.Above ? "4px" : "initial"
+        top: listPosition === Position.Below ? "4px" : void 0,
+        bottom: listPosition === Position.Above ? "4px" : void 0
       }
     },
     /* @__PURE__ */ React.createElement(
@@ -263,7 +319,7 @@ const MultiSelectComponent = ({
     ),
     renderAddNew()
   ));
-  return /* @__PURE__ */ React.createElement("div", { ref: myElementRef }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: myElementRef }, /* @__PURE__ */ React.createElement(
     "select",
     {
       ...filterProps(rest, /^data-/, false),
@@ -286,7 +342,6 @@ const MultiSelectComponent = ({
       onKeyDown: onArrowNavigation,
       className: `custom-select ${classes.select} ${additionalClasses.join(" ")}`
     },
-    listPosition === Position.Above ? optionsElement : void 0,
     /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -318,8 +373,10 @@ const MultiSelectComponent = ({
         }
       ), searchVisible && renderSearch()),
       /* @__PURE__ */ React.createElement("div", { className: classes["status"] }, icon || renderChevronIcon())
-    ),
-    listPosition === Position.Below ? optionsElement : void 0
+    )
+  )), createPortal(
+    /* @__PURE__ */ React.createElement("div", { ref: portalRef, className: `${classes.select} ${additionalClasses.join(" ")}` }, optionsElement),
+    root
   ));
 };
 const MultiSelect = withReadOnly(React.forwardRef(MultiSelectComponent));