@simplybusiness/mobius 4.16.0 → 5.0.0

package/dist/cjs/components/Logo/Logo.js

@@ -18,7 +18,7 @@ function _interop_require_default(obj) {
 }
 const Logo = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { className, width, height, ...otherProps } = props;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Logo", className);
+    const classes = (0, _dedupe.default)("mobius", "mobius-logo", className);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
         width: width,
         height: height,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LogoElementType = SVGSVGElement;\n\nexport interface LogoProps extends DOMProps, RefAttributes<LogoElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Custom width. When defined along with height, it will scale proportionally */\n  width?: string;\n  /** Custom height. When defined along with width, it will scale proportionally */\n  height?: string;\n}\n\nexport type LogoRef = Ref<LogoElementType>;\n\nexport const Logo: ForwardedRefComponent<LogoProps, LogoElementType> =\n  forwardRef((props: LogoProps, ref: LogoRef) => {\n    const { className, width, height, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius/Logo\", className);\n\n    return (\n      <svg\n        width={width}\n        height={height}\n        ref={ref}\n        className={classes}\n        viewBox=\"0 0 144 37\"\n        {...otherProps}\n      >\n        <defs>\n          <linearGradient\n            id=\"logo-gradient\"\n            x1=\"83.508%\"\n            x2=\"11.891%\"\n            y1=\"76.042%\"\n            y2=\"26.973%\"\n          >\n            <stop stopColor=\"#4632D8\" offset=\"0%\" />\n            <stop stopColor=\"#9084E8\" offset=\"100%\" />\n          </linearGradient>\n        </defs>\n        <g>\n          <path\n            fill=\"#0E0A2B\"\n            d=\"M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z\"\n          />\n          <path\n            fill=\"url(#logo-gradient)\"\n            d=\"M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z\"\n          />\n          <path\n            fill=\"#0E0A2B\"\n            d=\"M138.199 25.455c0-.4.074-.784.222-1.14.148-.354.355-.665.606-.932.267-.266.563-.473.903-.621.34-.148.725-.222 1.11-.222.4 0 .784.074 1.125.222.355.148.666.355.917.621.267.267.474.578.622.933.148.355.222.74.222 1.14 0 .399-.074.784-.222 1.139a2.86 2.86 0 01-.622.932 3.087 3.087 0 01-.917.637 2.646 2.646 0 01-1.125.236c-.4 0-.77-.074-1.11-.236a2.777 2.777 0 01-.903-.637 2.821 2.821 0 01-.606-.932 2.898 2.898 0 01-.222-1.14zm.71 0c0 .326.06.622.163.903.103.281.266.518.459.725a2.051 2.051 0 001.524.666c.31 0 .592-.059.858-.177a2.175 2.175 0 001.155-1.214c.118-.281.162-.577.162-.903 0-.325-.059-.621-.162-.902a2.422 2.422 0 00-.46-.726 2.112 2.112 0 00-.695-.488 2.073 2.073 0 00-.858-.178c-.31 0-.592.06-.844.178a2.051 2.051 0 00-.68.488 2.45 2.45 0 00-.46.726 2.636 2.636 0 00-.162.902zm1.154-1.14c0-.221.119-.34.34-.34h.889c.296 0 .532.09.695.252.178.163.267.4.267.68a.623.623 0 01-.06.297.557.557 0 01-.133.222.512.512 0 01-.163.148c-.059.044-.118.059-.162.074v.014l.03.03c.014.015.014.03.029.06l.044.088.34.666c.06.118.075.207.045.281-.03.074-.104.104-.207.104h-.104c-.192 0-.31-.089-.385-.252l-.384-.829h-.4v.74c0 .222-.104.34-.31.34h-.06c-.207 0-.31-.118-.31-.34v-2.234zm1.051 1.037c.133 0 .252-.045.31-.119.075-.074.104-.192.104-.325s-.03-.252-.103-.326a.413.413 0 00-.296-.118h-.385v.873h.37v.015z\"\n          />\n        </g>\n      </svg>\n    );\n  });\n"],"names":["Logo","forwardRef","props","ref","className","width","height","otherProps","classes","classNames","svg","viewBox","defs","linearGradient","id","x1","x2","y1","y2","stop","stopColor","offset","g","path","fill","d"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;uBAlBkC;+DACxB;;;;;;AAiBhB,MAAMA,qBACXC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,YAAY,GAAGL;IAEpD,MAAMM,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeL;IAEpD,qBACE,sBAACM;QACCL,OAAOA;QACPC,QAAQA;QACRH,KAAKA;QACLC,WAAWI;QACXG,SAAQ;QACP,GAAGJ,UAAU;;0BAEd,qBAACK;0BACC,cAAA,sBAACC;oBACCC,IAAG;oBACHC,IAAG;oBACHC,IAAG;oBACHC,IAAG;oBACHC,IAAG;;sCAEH,qBAACC;4BAAKC,WAAU;4BAAUC,QAAO;;sCACjC,qBAACF;4BAAKC,WAAU;4BAAUC,QAAO;;;;;0BAGrC,sBAACC;;kCACC,qBAACC;wBACCC,MAAK;wBACLC,GAAE;;kCAEJ,qBAACF;wBACCC,MAAK;wBACLC,GAAE;;kCAEJ,qBAACF;wBACCC,MAAK;wBACLC,GAAE;;;;;;AAKZ"}
+{"version":3,"sources":["../../../../src/components/Logo/Logo.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type LogoElementType = SVGSVGElement;\n\nexport interface LogoProps extends DOMProps, RefAttributes<LogoElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Custom width. When defined along with height, it will scale proportionally */\n  width?: string;\n  /** Custom height. When defined along with width, it will scale proportionally */\n  height?: string;\n}\n\nexport type LogoRef = Ref<LogoElementType>;\n\nexport const Logo: ForwardedRefComponent<LogoProps, LogoElementType> =\n  forwardRef((props: LogoProps, ref: LogoRef) => {\n    const { className, width, height, ...otherProps } = props;\n\n    const classes = classNames(\"mobius\", \"mobius-logo\", className);\n\n    return (\n      <svg\n        width={width}\n        height={height}\n        ref={ref}\n        className={classes}\n        viewBox=\"0 0 144 37\"\n        {...otherProps}\n      >\n        <defs>\n          <linearGradient\n            id=\"logo-gradient\"\n            x1=\"83.508%\"\n            x2=\"11.891%\"\n            y1=\"76.042%\"\n            y2=\"26.973%\"\n          >\n            <stop stopColor=\"#4632D8\" offset=\"0%\" />\n            <stop stopColor=\"#9084E8\" offset=\"100%\" />\n          </linearGradient>\n        </defs>\n        <g>\n          <path\n            fill=\"#0E0A2B\"\n            d=\"M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z\"\n          />\n          <path\n            fill=\"url(#logo-gradient)\"\n            d=\"M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z\"\n          />\n          <path\n            fill=\"#0E0A2B\"\n            d=\"M138.199 25.455c0-.4.074-.784.222-1.14.148-.354.355-.665.606-.932.267-.266.563-.473.903-.621.34-.148.725-.222 1.11-.222.4 0 .784.074 1.125.222.355.148.666.355.917.621.267.267.474.578.622.933.148.355.222.74.222 1.14 0 .399-.074.784-.222 1.139a2.86 2.86 0 01-.622.932 3.087 3.087 0 01-.917.637 2.646 2.646 0 01-1.125.236c-.4 0-.77-.074-1.11-.236a2.777 2.777 0 01-.903-.637 2.821 2.821 0 01-.606-.932 2.898 2.898 0 01-.222-1.14zm.71 0c0 .326.06.622.163.903.103.281.266.518.459.725a2.051 2.051 0 001.524.666c.31 0 .592-.059.858-.177a2.175 2.175 0 001.155-1.214c.118-.281.162-.577.162-.903 0-.325-.059-.621-.162-.902a2.422 2.422 0 00-.46-.726 2.112 2.112 0 00-.695-.488 2.073 2.073 0 00-.858-.178c-.31 0-.592.06-.844.178a2.051 2.051 0 00-.68.488 2.45 2.45 0 00-.46.726 2.636 2.636 0 00-.162.902zm1.154-1.14c0-.221.119-.34.34-.34h.889c.296 0 .532.09.695.252.178.163.267.4.267.68a.623.623 0 01-.06.297.557.557 0 01-.133.222.512.512 0 01-.163.148c-.059.044-.118.059-.162.074v.014l.03.03c.014.015.014.03.029.06l.044.088.34.666c.06.118.075.207.045.281-.03.074-.104.104-.207.104h-.104c-.192 0-.31-.089-.385-.252l-.384-.829h-.4v.74c0 .222-.104.34-.31.34h-.06c-.207 0-.31-.118-.31-.34v-2.234zm1.051 1.037c.133 0 .252-.045.31-.119.075-.074.104-.192.104-.325s-.03-.252-.103-.326a.413.413 0 00-.296-.118h-.385v.873h.37v.015z\"\n          />\n        </g>\n      </svg>\n    );\n  });\n"],"names":["Logo","forwardRef","props","ref","className","width","height","otherProps","classes","classNames","svg","viewBox","defs","linearGradient","id","x1","x2","y1","y2","stop","stopColor","offset","g","path","fill","d"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;uBAlBkC;+DACxB;;;;;;AAiBhB,MAAMA,qBACXC,IAAAA,iBAAU,EAAC,CAACC,OAAkBC;IAC5B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,YAAY,GAAGL;IAEpD,MAAMM,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeL;IAEpD,qBACE,sBAACM;QACCL,OAAOA;QACPC,QAAQA;QACRH,KAAKA;QACLC,WAAWI;QACXG,SAAQ;QACP,GAAGJ,UAAU;;0BAEd,qBAACK;0BACC,cAAA,sBAACC;oBACCC,IAAG;oBACHC,IAAG;oBACHC,IAAG;oBACHC,IAAG;oBACHC,IAAG;;sCAEH,qBAACC;4BAAKC,WAAU;4BAAUC,QAAO;;sCACjC,qBAACF;4BAAKC,WAAU;4BAAUC,QAAO;;;;;0BAGrC,sBAACC;;kCACC,qBAACC;wBACCC,MAAK;wBACLC,GAAE;;kCAEJ,qBAACF;wBACCC,MAAK;wBACLC,GAAE;;kCAEJ,qBAACF;wBACCC,MAAK;wBACLC,GAAE;;;;;;AAKZ"}

package/dist/cjs/components/Modal/Content.js

@@ -13,7 +13,7 @@ const _react = require("react");
 const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ref: ref,
         ...otherProps,
-        className: "mobius/ModalContent",
+        className: "mobius-modal__content",
         children: children
     }));
 Content.displayName = "Content";

package/dist/cjs/components/Modal/Content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {}\n\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius/ModalContent\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {}\n\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius-modal__content\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}

package/dist/cjs/components/Modal/Header.js

@@ -19,14 +19,14 @@ const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
         ref: ref,
         ...otherProps,
-        className: "mobius/ModalHeader",
+        className: "mobius-modal__header",
         children: [
             children,
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.Button, {
                 "aria-label": "Close",
                 variant: "basic",
                 onPress: onClose,
-                className: "mobius/ModalClose",
+                className: "mobius-modal__close",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
                         icon: _icons.cross

package/dist/cjs/components/Modal/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useModal } from \"./useModal\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useModal();\n\n    return (\n      <header ref={ref} {...otherProps} className=\"mobius/ModalHeader\">\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className=\"mobius/ModalClose\"\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useModal","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCyD;uBAE5C;wBAEC;sBACF;0BACI;AAUzB,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ;IAExC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;;kCAEV,qBAACK,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEV;;;;;AAI/B;AAGFN,OAAOiB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { useModal } from \"./useModal\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useModal();\n\n    return (\n      <header ref={ref} {...otherProps} className=\"mobius-modal__header\">\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className=\"mobius-modal__close\"\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useModal","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCyD;uBAE5C;wBAEC;sBACF;0BACI;AAUzB,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ;IAExC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;;kCAEV,qBAACK,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEV;;;;;AAI/B;AAGFN,OAAOiB,WAAW,GAAG"}

package/dist/cjs/components/Modal/Modal.js

@@ -48,7 +48,7 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             CSSVariable: TRANSITION_CSS_VARIABLE
         }
     });
-    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Modal", {
+    const modalClasses = (0, _dedupe.default)("mobius", "mobius-modal", {
         "--no-dialog-support": !shouldTransition,
         "--should-transition": shouldTransition && animation,
         "--slide-up": animation === "slideUp",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","rest","shouldTransition","setShouldTransition","useState","useDeprecationWarning","useEffect","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAgGSA;;;eAAAA;;;;+DA9Fc;uBAC+C;uBAC5C;uCACY;uBACZ;+BACK;8BACF;;;;;;AAM7B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACd,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzDC,IAAAA,4CAAqB,EAAC;QACpBT;QACAC;QACAC;QACAC;QACAC;IACF;IAEAM,IAAAA,gBAAS,EAAC;QACRH,oBAAoBI,IAAAA,6BAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BxB,KAAKqB;QACLpB;QACAE;QACAD;QACAuB,YAAY;YACVC,WAAW,CAAC,CAAClB;YACbmB,aAAa9B;QACf;IACF;IAEA,MAAM+B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACd;QACxB,uBAAuBA,oBAAoBP;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMyB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL7B,SAASqB;YACTjB;QACF,CAAA,GACA;QAACiB;QAAOjB;KAAW;IAGrB,qBACE,qBAAC0B;QACChC,KAAKiC,IAAAA,gBAAS,EAAC;YAACZ;YAAWrB;SAAI;QAC/BkC,UAAUX;QACVlB,WAAWuB;QACV,GAAGd,IAAI;kBAER,cAAA,qBAACqB,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3B1B;;;AAIT;AAEAR,MAAM0C,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\nimport { mergeRefs } from \"../../utils\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalProps } from \"./types\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n    ...rest\n  } = props;\n  const [shouldTransition, setShouldTransition] = useState(false);\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  useEffect(() => {\n    setShouldTransition(supportsDialog());\n  }, []);\n\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius-modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n      {...rest}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","rest","shouldTransition","setShouldTransition","useState","useDeprecationWarning","useEffect","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAgGSA;;;eAAAA;;;;+DA9Fc;uBAC+C;uBAC5C;uCACY;uBACZ;+BACK;8BACF;;;;;;AAM7B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACd,GAAGC,MACJ,GAAGf;IACJ,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzDC,IAAAA,4CAAqB,EAAC;QACpBT;QACAC;QACAC;QACAC;QACAC;IACF;IAEAM,IAAAA,gBAAS,EAAC;QACRH,oBAAoBI,IAAAA,6BAAc;IACpC,GAAG,EAAE;IAEL,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BxB,KAAKqB;QACLpB;QACAE;QACAD;QACAuB,YAAY;YACVC,WAAW,CAAC,CAAClB;YACbmB,aAAa9B;QACf;IACF;IAEA,MAAM+B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACd;QACxB,uBAAuBA,oBAAoBP;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMyB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL7B,SAASqB;YACTjB;QACF,CAAA,GACA;QAACiB;QAAOjB;KAAW;IAGrB,qBACE,qBAAC0B;QACChC,KAAKiC,IAAAA,gBAAS,EAAC;YAACZ;YAAWrB;SAAI;QAC/BkC,UAAUX;QACVlB,WAAWuB;QACV,GAAGd,IAAI;kBAER,cAAA,qBAACqB,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3B1B;;;AAIT;AAEAR,MAAM0C,WAAW,GAAG"}

package/dist/cjs/components/NumberField/NumberField.js

@@ -16,6 +16,7 @@ const _hooks = require("../../hooks");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
 const _ErrorMessage = require("../ErrorMessage");
 const _Label = require("../Label");
+const _Stack = require("../Stack");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -34,19 +35,19 @@ const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy
     });
-    const containerClasses = (0, _dedupe.default)("mobius/NumberField", className, {
+    const containerClasses = (0, _dedupe.default)("mobius-number-field", className, {
         "--is-optional": optional
     });
     const validationClasses = (0, _hooks.useValidationClasses)({
         validationState,
         isInvalid
     });
-    const inputClasses = (0, _dedupe.default)("mobius/NumberFieldInput", className, {
+    const inputClasses = (0, _dedupe.default)("mobius-number-field__input", className, {
         "--is-required": required,
         "--is-optional": optional,
         "--is-disabled": isDisabled
     }, validationClasses);
-    const labelClasses = (0, _dedupe.default)("mobius/NumberFieldLabel", {
+    const labelClasses = (0, _dedupe.default)("mobius-number-field__label", {
         "--is-disabled": isDisabled
     }, validationClasses);
     const errorMessageId = (0, _react.useId)();
@@ -74,7 +75,8 @@ const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             event.stopPropagation();
         }
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.Stack, {
+        gap: "xs",
         className: containerClasses,
         children: [
             label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
@@ -83,7 +85,7 @@ const NumberField = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 children: label
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/NumberFieldInputWrapper",
+                className: "mobius-number-field__input-wrapper",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
                     ...fieldProps,
                     ref: inputRef || ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    Validation,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius/NumberField\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n\n  const inputClasses = classNames(\n    \"mobius/NumberFieldInput\",\n    className,\n    {\n      \"--is-required\": required,\n      \"--is-optional\": optional,\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const labelClasses = classNames(\n    \"mobius/NumberFieldLabel\",\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/NumberFieldInputWrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n"],"names":["NumberField","forwardRef","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","useRef","value","setValue","useState","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","useLabel","containerClasses","classNames","validationClasses","useValidationClasses","inputClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","Label","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck","ErrorMessage"],"mappings":"AAAA;;;;;+BAyDaA;;;eAAAA;;;;+DAvDU;uBAUhB;uBAEuD;oCAE3B;8BACN;uBACP;;;;;;AAuCf,MAAMA,4BAGTC,IAAAA,iBAAU,EAAC,CAACC,OAAyBC;IACvC,MAAM,EACJC,EAAE,EACFC,UAAU,EACVC,UAAU,EACVC,KAAK,EACL,cAAcC,SAAS,EACvB,mBAAmBC,cAAc,EACjC,oBAAoBC,eAAe,EACnCC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,IAAI,EACJC,WAAW,EACXC,eAAe,CAAC,EAChBC,QAAQ,EACT,GAAGnB;IACJ,MAAMoB,WAAWC,IAAAA,aAAM,EAA0B;IACjD,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,eAAQ,EAASN;IAC3C,MAAMO,0BAA0BH,MAAMI,QAAQ,GAAGC,OAAO,CAAC,OAAO;IAChE,MAAMC,WAAW,OAAOxB,eAAe,aAAa,CAACA;IACrD,MAAMyB,WAAW,OAAOzB,eAAe,aAAaA;IAEpD,MAAM,EAAE0B,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,eAAQ,EAAC;QAC1C9B;QACAG;QACA,cAAcC;QACd,mBAAmBC;IACrB;IAEA,MAAM0B,mBAAmBC,IAAAA,eAAU,EAAC,sBAAsBzB,WAAW;QACnE,iBAAiBmB;IACnB;IAEA,MAAMO,oBAAoBC,IAAAA,2BAAoB,EAAC;QAC7CzB;QACAC;IACF;IAEA,MAAMyB,eAAeH,IAAAA,eAAU,EAC7B,2BACAzB,WACA;QACE,iBAAiBoB;QACjB,iBAAiBD;QACjB,iBAAiBzB;IACnB,GACAgC;IAGF,MAAMG,eAAeJ,IAAAA,eAAU,EAC7B,2BACA;QACE,iBAAiB/B;IACnB,GACAgC;IAGF,MAAMI,iBAAiBC,IAAAA,YAAK;IAC5B,MAAMC,yBAAyB/B,eAAe6B,iBAAiBG;IAC/D,MAAMC,cAAcC,IAAAA,sCAAkB,EAAC;QACrCH;QACAjC;KACD;IAED,MAAMqC,eAAe,CAACC;QACpB,+CAA+C;QAC/C,MAAMC,eAAeC,OAAOF,MAAMG,MAAM,CAAC3B,KAAK;QAC9C,IACE,AAACR,YAAYiC,eAAejC,YAC3BC,YAAYgC,eAAehC,UAC5B;YACA;QACF;QACAQ,SAASwB;QACT,IAAI5B,UAAU;YACZA,SAAS2B;QACX;IACF;IAEA,2BAA2B;IAC3B,MAAMI,oBAAoB,CACxBJ;QAEA,MAAMK,eAAe;QAErB,IAAIL,MAAMM,IAAI,IAAI,CAACD,aAAaE,IAAI,CAACP,MAAMM,IAAI,GAAG;YAChDN,MAAMQ,cAAc;YACpBR,MAAMS,eAAe;QACvB;IACF;IAEA,qBACE,sBAACC;QAAI/C,WAAWwB;;YACb5B,uBACC,qBAACoD,YAAK;gBAAE,GAAG3B,UAAU;gBAAErB,WAAW6B;0BAC/BjC;;0BAGL,qBAACmD;gBAAI/C,WAAU;0BACb,cAAA,qBAACiD;oBACE,GAAG3B,UAAU;oBACd9B,KAAKmB,YAAYnB;oBACjBQ,WAAW4B;oBACXsB,MAAK;oBACLxC,UAAU0B;oBACVe,eAAeV;oBACfW,KAAK9C;oBACL+C,KAAKhD;oBACLE,MAAMA;oBACNM,OAAOG;oBACPR,aAAaA;oBACbY,UAAUA;oBACVkC,oBAAkBpB;oBAClBqB,qBAAmBvB;oBACnBwB,gBAAcrD;oBACdsD,UAAUrD;oBACVsD,UAAUhE;oBACViE,cAAa;oBACbC,aAAY;oBACZC,YAAW;;;0BAGf,qBAACC,0BAAY;gBAACrE,IAAIqC;gBAAgB7B,cAAcA;;;;AAGtD"}
+{"version":3,"sources":["../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel, useValidationClasses } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Validation } from \"../../types\";\nimport { Stack } from \"../Stack\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    Validation,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isInvalid,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius-number-field\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const validationClasses = useValidationClasses({\n    validationState,\n    isInvalid,\n  });\n\n  const inputClasses = classNames(\n    \"mobius-number-field__input\",\n    className,\n    {\n      \"--is-required\": required,\n      \"--is-optional\": optional,\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const labelClasses = classNames(\n    \"mobius-number-field__label\",\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <Stack gap=\"xs\" className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-number-field__input-wrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={isInvalid}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </Stack>\n  );\n});\n"],"names":["NumberField","forwardRef","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isInvalid","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","useRef","value","setValue","useState","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","useLabel","containerClasses","classNames","validationClasses","useValidationClasses","inputClasses","labelClasses","errorMessageId","useId","shouldErrorMessageShow","undefined","describedBy","spaceDelimitedList","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","Stack","gap","Label","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck","ErrorMessage"],"mappings":"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"}

package/dist/cjs/components/PasswordField/PasswordField.js

@@ -23,7 +23,7 @@ function _interop_require_default(obj) {
 const PasswordField = /*#__PURE__*/ (0, _react.forwardRef)(({ className, ...props }, ref)=>{
     const [show, setShow] = (0, _react.useState)(false);
     const type = show ? "text" : "password";
-    const classes = (0, _dedupe.default)("mobius/PasswordField", className);
+    const classes = (0, _dedupe.default)("mobius-password-field", className);
     const localRef = (0, _react.useRef)(null);
     const handleShowHideButtonClick = ()=>{
         var _localRef_current;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { forwardRef, useState, useRef } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldProps,\n  type TextFieldRef,\n  type TextFieldElementType,\n} from \"../TextField\";\nimport { ShowHideButton } from \"./ShowHideButton\";\n\nexport interface PasswordFieldProps extends TextFieldProps {}\n\nexport type PasswordFieldRef = TextFieldRef;\n\nexport const PasswordField = forwardRef(\n  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {\n    const [show, setShow] = useState(false);\n    const type = show ? \"text\" : \"password\";\n    const classes = classNames(\"mobius/PasswordField\", className);\n    const localRef = useRef<TextFieldElementType>(null);\n\n    const handleShowHideButtonClick = () => {\n      setShow(oldShow => !oldShow);\n      localRef.current?.focus();\n    };\n\n    return (\n      <TextField\n        ref={mergeRefs([localRef, ref])}\n        className={classes}\n        {...props}\n        type={type}\n        suffixInside={\n          <ShowHideButton onClick={handleShowHideButtonClick} show={show} />\n        }\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","className","props","ref","show","setShow","useState","type","classes","classNames","localRef","useRef","handleShowHideButtonClick","oldShow","current","focus","TextField","mergeRefs","suffixInside","ShowHideButton","onClick"],"mappings":"AAAA;;;;;+BAiBaA;;;eAAAA;;;;+DAfU;uBACsB;2BACnB;2BAMnB;gCACwB;;;;;;AAMxB,MAAMA,8BAAgBC,IAAAA,iBAAU,EACrC,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAA2B,EAAEC;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGC,IAAAA,eAAQ,EAAC;IACjC,MAAMC,OAAOH,OAAO,SAAS;IAC7B,MAAMI,UAAUC,IAAAA,eAAU,EAAC,wBAAwBR;IACnD,MAAMS,WAAWC,IAAAA,aAAM,EAAuB;IAE9C,MAAMC,4BAA4B;YAEhCF;QADAL,QAAQQ,CAAAA,UAAW,CAACA;SACpBH,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,KAAK;IACzB;IAEA,qBACE,qBAACC,oBAAS;QACRb,KAAKc,IAAAA,oBAAS,EAAC;YAACP;YAAUP;SAAI;QAC9BF,WAAWO;QACV,GAAGN,KAAK;QACTK,MAAMA;QACNW,4BACE,qBAACC,8BAAc;YAACC,SAASR;YAA2BR,MAAMA;;;AAIlE"}
+{"version":3,"sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { forwardRef, useState, useRef } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldProps,\n  type TextFieldRef,\n  type TextFieldElementType,\n} from \"../TextField\";\nimport { ShowHideButton } from \"./ShowHideButton\";\n\nexport interface PasswordFieldProps extends TextFieldProps {}\n\nexport type PasswordFieldRef = TextFieldRef;\n\nexport const PasswordField = forwardRef(\n  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {\n    const [show, setShow] = useState(false);\n    const type = show ? \"text\" : \"password\";\n    const classes = classNames(\"mobius-password-field\", className);\n    const localRef = useRef<TextFieldElementType>(null);\n\n    const handleShowHideButtonClick = () => {\n      setShow(oldShow => !oldShow);\n      localRef.current?.focus();\n    };\n\n    return (\n      <TextField\n        ref={mergeRefs([localRef, ref])}\n        className={classes}\n        {...props}\n        type={type}\n        suffixInside={\n          <ShowHideButton onClick={handleShowHideButtonClick} show={show} />\n        }\n      />\n    );\n  },\n);\n"],"names":["PasswordField","forwardRef","className","props","ref","show","setShow","useState","type","classes","classNames","localRef","useRef","handleShowHideButtonClick","oldShow","current","focus","TextField","mergeRefs","suffixInside","ShowHideButton","onClick"],"mappings":"AAAA;;;;;+BAiBaA;;;eAAAA;;;;+DAfU;uBACsB;2BACnB;2BAMnB;gCACwB;;;;;;AAMxB,MAAMA,8BAAgBC,IAAAA,iBAAU,EACrC,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAA2B,EAAEC;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGC,IAAAA,eAAQ,EAAC;IACjC,MAAMC,OAAOH,OAAO,SAAS;IAC7B,MAAMI,UAAUC,IAAAA,eAAU,EAAC,yBAAyBR;IACpD,MAAMS,WAAWC,IAAAA,aAAM,EAAuB;IAE9C,MAAMC,4BAA4B;YAEhCF;QADAL,QAAQQ,CAAAA,UAAW,CAACA;SACpBH,oBAAAA,SAASI,OAAO,cAAhBJ,wCAAAA,kBAAkBK,KAAK;IACzB;IAEA,qBACE,qBAACC,oBAAS;QACRb,KAAKc,IAAAA,oBAAS,EAAC;YAACP;YAAUP;SAAI;QAC9BF,WAAWO;QACV,GAAGN,KAAK;QACTK,MAAMA;QACNW,4BACE,qBAACC,8BAAc;YAACC,SAASR;YAA2BR,MAAMA;;;AAIlE"}

package/dist/cjs/components/PasswordField/ShowHideButton.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "ShowHideButton", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const ShowHideButton = ({ show = false, onClick })=>/*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-        className: "mobius/PasswordFieldShowButton",
+        className: "mobius-password-field__show-button",
         type: "button",
         onClick: (e)=>{
             e.preventDefault();

package/dist/cjs/components/PasswordField/ShowHideButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PasswordField/ShowHideButton.tsx"],"sourcesContent":["export interface ShowHideButtonProps {\n  show?: boolean;\n  onClick: () => void;\n}\n\nexport const ShowHideButton = ({\n  show = false,\n  onClick,\n}: ShowHideButtonProps) => (\n  <button\n    className=\"mobius/PasswordFieldShowButton\"\n    type=\"button\"\n    onClick={e => {\n      e.preventDefault();\n      onClick();\n    }}\n    aria-label={`${show ? \"Hide\" : \"Show\"} password`}\n    data-testid=\"show-hide-button\"\n  >\n    {show ? \"hide\" : \"show\"}\n  </button>\n);\n"],"names":["ShowHideButton","show","onClick","button","className","type","e","preventDefault","aria-label","data-testid"],"mappings":";;;;+BAKaA;;;eAAAA;;;;AAAN,MAAMA,iBAAiB,CAAC,EAC7BC,OAAO,KAAK,EACZC,OAAO,EACa,iBACpB,qBAACC;QACCC,WAAU;QACVC,MAAK;QACLH,SAASI,CAAAA;YACPA,EAAEC,cAAc;YAChBL;QACF;QACAM,cAAY,CAAC,EAAEP,OAAO,SAAS,OAAO,SAAS,CAAC;QAChDQ,eAAY;kBAEXR,OAAO,SAAS"}
+{"version":3,"sources":["../../../../src/components/PasswordField/ShowHideButton.tsx"],"sourcesContent":["export interface ShowHideButtonProps {\n  show?: boolean;\n  onClick: () => void;\n}\n\nexport const ShowHideButton = ({\n  show = false,\n  onClick,\n}: ShowHideButtonProps) => (\n  <button\n    className=\"mobius-password-field__show-button\"\n    type=\"button\"\n    onClick={e => {\n      e.preventDefault();\n      onClick();\n    }}\n    aria-label={`${show ? \"Hide\" : \"Show\"} password`}\n    data-testid=\"show-hide-button\"\n  >\n    {show ? \"hide\" : \"show\"}\n  </button>\n);\n"],"names":["ShowHideButton","show","onClick","button","className","type","e","preventDefault","aria-label","data-testid"],"mappings":";;;;+BAKaA;;;eAAAA;;;;AAAN,MAAMA,iBAAiB,CAAC,EAC7BC,OAAO,KAAK,EACZC,OAAO,EACa,iBACpB,qBAACC;QACCC,WAAU;QACVC,MAAK;QACLH,SAASI,CAAAA;YACPA,EAAEC,cAAc;YAChBL;QACF;QACAM,cAAY,CAAC,EAAEP,OAAO,SAAS,OAAO,SAAS,CAAC;QAChDQ,eAAY;kBAEXR,OAAO,SAAS"}

package/dist/cjs/components/Popover/Popover.js

@@ -54,7 +54,7 @@ const Popover = (props)=>{
     const { getReferenceProps, getFloatingProps } = (0, _react.useInteractions)([
         dismiss
     ]);
-    const containerClasses = (0, _classnames.default)("mobius", "mobius/PopoverContainer", className);
+    const containerClasses = (0, _classnames.default)("mobius", "mobius-popover__container", className);
     const toggleVisibility = ()=>{
         if (isOpen) {
             setIsOpen(false);
@@ -66,7 +66,7 @@ const Popover = (props)=>{
     };
     const triggerComponent = /*#__PURE__*/ (0, _react1.cloneElement)(trigger, {
         ref: refs.setReference,
-        className: (0, _classnames.default)(trigger.props.className, "mobius/PopoverToggle"),
+        className: (0, _classnames.default)(trigger.props.className, "mobius-popover__toggle"),
         onClick: toggleVisibility,
         ...getReferenceProps()
     });
@@ -87,25 +87,25 @@ const Popover = (props)=>{
                 ...getFloatingProps(),
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: "mobius/Popover",
+                        className: "mobius-popover",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("header", {
-                                className: "mobius/PopoverHeader",
+                                className: "mobius-popover__header",
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
                                     type: "button",
-                                    className: "mobius/PopoverCloseButton",
+                                    className: "mobius-popover__close-button",
                                     onClick: toggleVisibility,
                                     "aria-label": "Close",
                                     variant: "ghost",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
                                         icon: _icons.cross,
                                         size: "md",
-                                        className: "mobius/PopoverCloseIcon"
+                                        className: "mobius-popover__close-icon"
                                     })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: "mobius/PopoverBody",
+                                className: "mobius-popover__body",
                                 children: children
                             })
                         ]
@@ -114,7 +114,7 @@ const Popover = (props)=>{
                         ref: arrowRef,
                         context: context,
                         width: 20,
-                        className: "mobius/PopoverArrowIcon"
+                        className: "mobius-popover__arrow-icon"
                     })
                 ]
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius/PopoverArrowIcon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,2BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAsBH;;;;kCAEvC,qBAAC8D,oBAAa;wBACZpB,KAAKtC;wBACLO,SAASA;wBACToD,OAAO;wBACP5D,WAAU;;;;;;AAMtB"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-popover__container\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius-popover__toggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius-popover\">\n            <header className=\"mobius-popover__header\">\n              <Button\n                type=\"button\"\n                className=\"mobius-popover__close-button\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius-popover__close-icon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius-popover__body\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius-popover__arrow-icon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,6BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAwBH;;;;kCAEzC,qBAAC8D,oBAAa;wBACZpB,KAAKtC;wBACLO,SAASA;wBACToD,OAAO;wBACP5D,WAAU;;;;;;AAMtB"}

package/dist/cjs/components/Progress/Progress.js

@@ -38,7 +38,7 @@ const getLabelComponent = (label, progressLabelId, showLabel)=>{
     if (showLabel) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
             id: progressLabelId,
-            className: "mobius/ProgressLabel",
+            className: "mobius-progress__label",
             elementType: "span",
             children: label
         });
@@ -46,7 +46,7 @@ const getLabelComponent = (label, progressLabelId, showLabel)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
             id: progressLabelId,
-            className: "mobius/ProgressLabel",
+            className: "mobius-progress__label",
             elementType: "span",
             children: label
         })
@@ -72,7 +72,7 @@ const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const clamp = (num, min, max)=>Math.min(Math.max(num, min), max);
     const percentage = clamp(Math.round((value - minValue) / (maxValue - minValue) * 100), 0, 100);
     const barWidth = `${percentage}%`;
-    const classes = (0, _dedupe.default)("mobius", "mobius/Progress", className, {
+    const classes = (0, _dedupe.default)("mobius", "mobius-progress", className, {
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary"
     });
@@ -93,9 +93,9 @@ const Progress = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         children: [
             labelComponent,
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "mobius/ProgressTrack",
+                className: "mobius-progress__track",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "mobius/ProgressBar",
+                    className: "mobius-progress__bar",
                     style: {
                         width: barWidth
                     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef, useId } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Label } from \"../Label\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"label\">,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  label: ReactNode;\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showLabel?: boolean;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nexport type ProgressRef = Ref<ProgressElementType>;\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  const numberValue = parseFloat(value as any);\n  return Number.isNaN(numberValue) ? defaultValue : numberValue;\n};\n\nconst getLabelComponent = (\n  label: ReactNode,\n  progressLabelId: string,\n  showLabel: boolean,\n) => {\n  if (showLabel) {\n    return (\n      <Label\n        id={progressLabelId}\n        className=\"mobius/ProgressLabel\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    );\n  }\n\n  return (\n    <VisuallyHidden>\n      <Label\n        id={progressLabelId}\n        className=\"mobius/ProgressLabel\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    </VisuallyHidden>\n  );\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =\n  forwardRef((props: ProgressProps, ref: ProgressRef) => {\n    const progressId = useId();\n    const progressLabelId = useId();\n    const {\n      id,\n      label,\n      showLabel = true,\n      showValueLabel = !!label,\n      valueFormatter,\n      variant = \"primary\",\n      className,\n    } = props;\n\n    let { value, minValue, maxValue } = props;\n\n    value = sanitizedValue(value, DEFAULT_VALUE);\n    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n    // Will never happen but lets appease the typescript gods\n    if (\n      value === undefined ||\n      minValue === undefined ||\n      maxValue === undefined\n    ) {\n      return null;\n    }\n\n    warnAboutInvalidValues(value, minValue, maxValue);\n\n    // Calculate the width of the progress bar as a percentage\n    const clamp = (num: number, min: number, max: number): number =>\n      Math.min(Math.max(num, min), max);\n    const percentage = clamp(\n      Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n      0,\n      100,\n    );\n    const barWidth = `${percentage}%`;\n\n    const classes = classNames(\"mobius\", \"mobius/Progress\", className, {\n      \"--is-primary\": variant === \"primary\",\n      \"--is-secondary\": variant === \"secondary\",\n    });\n\n    // Set progress aria values\n    const progressBarProps: Record<string, string> = {};\n    progressBarProps[\"aria-valuemin\"] = minValue.toString();\n    progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n    progressBarProps[\"aria-valuenow\"] = value.toString();\n    progressBarProps[\"aria-valuetext\"] =\n      valueFormatter instanceof Function\n        ? valueFormatter(value, minValue, maxValue!)\n        : barWidth;\n    const labelComponent = getLabelComponent(label, progressLabelId, showLabel);\n\n    return (\n      <div\n        id={id || progressId}\n        {...progressBarProps}\n        ref={ref}\n        className={classes}\n        role=\"progressbar\"\n        aria-labelledby={progressLabelId}\n      >\n        {labelComponent}\n        <div className=\"mobius/ProgressTrack\">\n          <div className=\"mobius/ProgressBar\" style={{ width: barWidth }} />\n        </div>\n        {showValueLabel && (\n          <Label data-testid=\"value-label\" elementType=\"span\">\n            {progressBarProps[\"aria-valuetext\"]}\n          </Label>\n        )}\n      </div>\n    );\n  });\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["Progress","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","getLabelComponent","label","progressLabelId","showLabel","Label","id","className","elementType","VisuallyHidden","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","forwardRef","props","ref","progressId","useId","showValueLabel","valueFormatter","variant","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","classNames","progressBarProps","toString","Function","labelComponent","div","role","aria-labelledby","style","width","data-testid","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport { ReactNode, Ref, RefAttributes, forwardRef, useId } from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Label } from \"../Label\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"label\">,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  label: ReactNode;\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showLabel?: boolean;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nexport type ProgressRef = Ref<ProgressElementType>;\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  const numberValue = parseFloat(value as any);\n  return Number.isNaN(numberValue) ? defaultValue : numberValue;\n};\n\nconst getLabelComponent = (\n  label: ReactNode,\n  progressLabelId: string,\n  showLabel: boolean,\n) => {\n  if (showLabel) {\n    return (\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    );\n  }\n\n  return (\n    <VisuallyHidden>\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    </VisuallyHidden>\n  );\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =\n  forwardRef((props: ProgressProps, ref: ProgressRef) => {\n    const progressId = useId();\n    const progressLabelId = useId();\n    const {\n      id,\n      label,\n      showLabel = true,\n      showValueLabel = !!label,\n      valueFormatter,\n      variant = \"primary\",\n      className,\n    } = props;\n\n    let { value, minValue, maxValue } = props;\n\n    value = sanitizedValue(value, DEFAULT_VALUE);\n    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n    // Will never happen but lets appease the typescript gods\n    if (\n      value === undefined ||\n      minValue === undefined ||\n      maxValue === undefined\n    ) {\n      return null;\n    }\n\n    warnAboutInvalidValues(value, minValue, maxValue);\n\n    // Calculate the width of the progress bar as a percentage\n    const clamp = (num: number, min: number, max: number): number =>\n      Math.min(Math.max(num, min), max);\n    const percentage = clamp(\n      Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n      0,\n      100,\n    );\n    const barWidth = `${percentage}%`;\n\n    const classes = classNames(\"mobius\", \"mobius-progress\", className, {\n      \"--is-primary\": variant === \"primary\",\n      \"--is-secondary\": variant === \"secondary\",\n    });\n\n    // Set progress aria values\n    const progressBarProps: Record<string, string> = {};\n    progressBarProps[\"aria-valuemin\"] = minValue.toString();\n    progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n    progressBarProps[\"aria-valuenow\"] = value.toString();\n    progressBarProps[\"aria-valuetext\"] =\n      valueFormatter instanceof Function\n        ? valueFormatter(value, minValue, maxValue!)\n        : barWidth;\n    const labelComponent = getLabelComponent(label, progressLabelId, showLabel);\n\n    return (\n      <div\n        id={id || progressId}\n        {...progressBarProps}\n        ref={ref}\n        className={classes}\n        role=\"progressbar\"\n        aria-labelledby={progressLabelId}\n      >\n        {labelComponent}\n        <div className=\"mobius-progress__track\">\n          <div className=\"mobius-progress__bar\" style={{ width: barWidth }} />\n        </div>\n        {showValueLabel && (\n          <Label data-testid=\"value-label\" elementType=\"span\">\n            {progressBarProps[\"aria-valuetext\"]}\n          </Label>\n        )}\n      </div>\n    );\n  });\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n"],"names":["Progress","warnAboutInvalidValues","value","minValue","maxValue","console","warn","sanitizedValue","defaultValue","numberValue","parseFloat","Number","isNaN","getLabelComponent","label","progressLabelId","showLabel","Label","id","className","elementType","VisuallyHidden","DEFAULT_VALUE","DEFAULT_MIN_VALUE","DEFAULT_MAX_VALUE","forwardRef","props","ref","progressId","useId","showValueLabel","valueFormatter","variant","undefined","clamp","num","min","max","Math","percentage","round","barWidth","classes","classNames","progressBarProps","toString","Function","labelComponent","div","role","aria-labelledby","style","width","data-testid","displayName"],"mappings":"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"}

package/dist/cjs/components/Radio/Radio.js

@@ -30,8 +30,8 @@ const Radio = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--is-multiline": !!isMultiline,
         "--is-required": isRequired
     };
-    const containerClasses = (0, _dedupe.default)("mobius/RadioLabel", radioClasses, className);
-    const inputClasses = (0, _dedupe.default)("mobius/RadioInput", radioClasses);
+    const containerClasses = (0, _dedupe.default)("mobius-radio__label", radioClasses, className);
+    const inputClasses = (0, _dedupe.default)("mobius-radio__input", radioClasses);
     const handleClick = (event)=>{
         if (onChange) {
             onChange(event);
@@ -65,19 +65,19 @@ const Radio = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                         ...rest
                     }),
                     isMultiline ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: "mobius/RadioContentMultiline",
+                        className: "mobius-radio__content--multiline",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: "mobius/RadioContentFirstLine",
+                                className: "mobius-radio__content-first-line",
                                 children: label
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: "mobius/RadioExtraContent",
+                                className: "mobius-radio__extra-content",
                                 children: children
                             })
                         ]
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "mobius/RadioContent",
+                        className: "mobius-radio__content",
                         children: label || children
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n  extends DOMProps,\n    AriaRadioProps,\n    RefAttributes<RadioElementType> {\n  children?: ReactNode;\n  className?: string;\n  label?: ReactNode;\n  errorMessage?: string;\n  value: string;\n  isDisabled?: boolean;\n  onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n  defaultChecked?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  name?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n  isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n  (props: RadioProps, ref: RadioRef) => {\n    const {\n      children,\n      value,\n      label,\n      className,\n      isDisabled,\n      errorMessage,\n      onChange,\n      defaultChecked,\n      groupDisabled,\n      name,\n      selected,\n      setSelected,\n      isRequired,\n      ...otherProps\n    } = props;\n    const realDisabled = groupDisabled || isDisabled;\n    const isMultiline = label && children;\n    const isDefaultSelected = selected === value || defaultChecked;\n    const radioClasses = {\n      \"--is-disabled\": realDisabled,\n      \"--is-selected\": selected === value,\n      \"--is-multiline\": !!isMultiline,\n      \"--is-required\": isRequired,\n    };\n    const containerClasses = classNames(\n      \"mobius/RadioLabel\",\n      radioClasses,\n      className,\n    );\n    const inputClasses = classNames(\"mobius/RadioInput\", radioClasses);\n\n    const handleClick = (event: MouseEvent<RadioElementType>) => {\n      if (onChange) {\n        onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n      }\n      if (setSelected) {\n        setSelected(event.currentTarget.value);\n      }\n    };\n\n    // Exlucde props that are passed via cloneElement in `<RadioGroup />`\n    const {\n      // @ts-ignore\n      // eslint-disable-next-line\n      orientation,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      \"aria-describedby\": _ariaDescribedBy,\n      ...rest\n    } = otherProps;\n\n    return (\n      <>\n        <Label className={containerClasses}>\n          <input\n            aria-describedby={otherProps[\"aria-describedby\"]}\n            disabled={realDisabled}\n            ref={ref}\n            className={inputClasses}\n            onClick={handleClick}\n            value={value}\n            tabIndex={0}\n            type=\"radio\"\n            defaultChecked={isDefaultSelected}\n            name={name}\n            required={isRequired}\n            {...rest}\n          />\n          {isMultiline ? (\n            <div className=\"mobius/RadioContentMultiline\">\n              <div className=\"mobius/RadioContentFirstLine\">{label}</div>\n              <div className=\"mobius/RadioExtraContent\">{children}</div>\n            </div>\n          ) : (\n            <div className=\"mobius/RadioContent\">{label || children}</div>\n          )}\n        </Label>\n        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n      </>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["Radio","forwardRef","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","classNames","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","Label","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","ErrorMessage","displayName"],"mappings":"AAAA;;;;;+BAsJSA;;;eAAAA;;;;+DApJc;uBAC+C;8BAIzC;uBACP;;;;;;AAwDtB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBC,IAAAA,eAAU,EACjC,qBACAF,cACAd;IAEF,MAAMiB,eAAeD,IAAAA,eAAU,EAAC,qBAAqBF;IAErD,MAAMI,cAAc,CAACC;QACnB,IAAIhB,UAAU;YACZA,SAASgB;QACX;QACA,IAAIX,aAAa;YACfA,YAAYW,MAAMC,aAAa,CAACtB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BuB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGb;IAEJ,qBACE;;0BACE,sBAACc,YAAK;gBAACxB,WAAWe;;kCAChB,qBAACU;wBACCC,oBAAkBhB,UAAU,CAAC,mBAAmB;wBAChDiB,UAAUhB;wBACVf,KAAKA;wBACLI,WAAWiB;wBACXW,SAASV;wBACTpB,OAAOA;wBACP+B,UAAU;wBACVC,MAAK;wBACL1B,gBAAgBS;wBAChBP,MAAMA;wBACNyB,UAAUtB;wBACT,GAAGc,IAAI;;oBAETX,4BACC,sBAACoB;wBAAIhC,WAAU;;0CACb,qBAACgC;gCAAIhC,WAAU;0CAAgCD;;0CAC/C,qBAACiC;gCAAIhC,WAAU;0CAA4BH;;;uCAG7C,qBAACmC;wBAAIhC,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,qBAAC+B,0BAAY;gBAAC/B,cAAcA;;;;AAGnD;AAGFT,MAAMyC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n  /**\n   * Defines a string value that labels the current element.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Identifies the element (or elements) that labels the current element.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Identifies the element (or elements) that describes the object.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * Identifies the element (or elements) that provide a detailed, extended description for the object.\n   */\n  \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n  extends DOMProps,\n    AriaRadioProps,\n    RefAttributes<RadioElementType> {\n  children?: ReactNode;\n  className?: string;\n  label?: ReactNode;\n  errorMessage?: string;\n  value: string;\n  isDisabled?: boolean;\n  onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n  defaultChecked?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  groupDisabled?: boolean;\n  /**\n   * **Internal:** Do not use\n   */\n  name?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  selected?: string;\n  /**\n   * **Internal:** Do not use\n   */\n  setSelected?: React.Dispatch<React.SetStateAction<string>>;\n  isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n  (props: RadioProps, ref: RadioRef) => {\n    const {\n      children,\n      value,\n      label,\n      className,\n      isDisabled,\n      errorMessage,\n      onChange,\n      defaultChecked,\n      groupDisabled,\n      name,\n      selected,\n      setSelected,\n      isRequired,\n      ...otherProps\n    } = props;\n    const realDisabled = groupDisabled || isDisabled;\n    const isMultiline = label && children;\n    const isDefaultSelected = selected === value || defaultChecked;\n    const radioClasses = {\n      \"--is-disabled\": realDisabled,\n      \"--is-selected\": selected === value,\n      \"--is-multiline\": !!isMultiline,\n      \"--is-required\": isRequired,\n    };\n    const containerClasses = classNames(\n      \"mobius-radio__label\",\n      radioClasses,\n      className,\n    );\n    const inputClasses = classNames(\"mobius-radio__input\", radioClasses);\n\n    const handleClick = (event: MouseEvent<RadioElementType>) => {\n      if (onChange) {\n        onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n      }\n      if (setSelected) {\n        setSelected(event.currentTarget.value);\n      }\n    };\n\n    // Exlucde props that are passed via cloneElement in `<RadioGroup />`\n    const {\n      // @ts-ignore\n      // eslint-disable-next-line\n      orientation,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      \"aria-describedby\": _ariaDescribedBy,\n      ...rest\n    } = otherProps;\n\n    return (\n      <>\n        <Label className={containerClasses}>\n          <input\n            aria-describedby={otherProps[\"aria-describedby\"]}\n            disabled={realDisabled}\n            ref={ref}\n            className={inputClasses}\n            onClick={handleClick}\n            value={value}\n            tabIndex={0}\n            type=\"radio\"\n            defaultChecked={isDefaultSelected}\n            name={name}\n            required={isRequired}\n            {...rest}\n          />\n          {isMultiline ? (\n            <div className=\"mobius-radio__content--multiline\">\n              <div className=\"mobius-radio__content-first-line\">{label}</div>\n              <div className=\"mobius-radio__extra-content\">{children}</div>\n            </div>\n          ) : (\n            <div className=\"mobius-radio__content\">{label || children}</div>\n          )}\n        </Label>\n        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n      </>\n    );\n  },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["Radio","forwardRef","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","classNames","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","Label","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","ErrorMessage","displayName"],"mappings":"AAAA;;;;;+BAsJSA;;;eAAAA;;;;+DApJc;uBAC+C;8BAIzC;uBACP;;;;;;AAwDtB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBC,IAAAA,eAAU,EACjC,uBACAF,cACAd;IAEF,MAAMiB,eAAeD,IAAAA,eAAU,EAAC,uBAAuBF;IAEvD,MAAMI,cAAc,CAACC;QACnB,IAAIhB,UAAU;YACZA,SAASgB;QACX;QACA,IAAIX,aAAa;YACfA,YAAYW,MAAMC,aAAa,CAACtB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BuB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGb;IAEJ,qBACE;;0BACE,sBAACc,YAAK;gBAACxB,WAAWe;;kCAChB,qBAACU;wBACCC,oBAAkBhB,UAAU,CAAC,mBAAmB;wBAChDiB,UAAUhB;wBACVf,KAAKA;wBACLI,WAAWiB;wBACXW,SAASV;wBACTpB,OAAOA;wBACP+B,UAAU;wBACVC,MAAK;wBACL1B,gBAAgBS;wBAChBP,MAAMA;wBACNyB,UAAUtB;wBACT,GAAGc,IAAI;;oBAETX,4BACC,sBAACoB;wBAAIhC,WAAU;;0CACb,qBAACgC;gCAAIhC,WAAU;0CAAoCD;;0CACnD,qBAACiC;gCAAIhC,WAAU;0CAA+BH;;;uCAGhD,qBAACmC;wBAAIhC,WAAU;kCAAyBD,SAASF;;;;YAGpDK,8BAAgB,qBAAC+B,0BAAY;gBAAC/B,cAAcA;;;;AAGnD;AAGFT,MAAMyC,WAAW,GAAG"}