@simplybusiness/mobius 4.4.4 → 4.4.6

package/dist/esm/components/Icon/IconStyle.js

@@ -0,0 +1,403 @@
+const styleText = `
+svg:not(:root).svg-inline--mobius-icon, svg:not(:host).svg-inline--mobius-icon {
+  overflow: visible;
+  box-sizing: content-box;
+}
+
+.svg-inline--mobius-icon {
+  display: var(--mobius-icon-display, inline-block);
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}
+.svg-inline--mobius-icon.mobius-icon-2xs {
+  vertical-align: 0.1em;
+}
+.svg-inline--mobius-icon.mobius-icon-xs {
+  vertical-align: 0em;
+}
+.svg-inline--mobius-icon.mobius-icon-sm {
+  vertical-align: -0.0714285705em;
+}
+.svg-inline--mobius-icon.mobius-icon-lg {
+  vertical-align: -0.2em;
+}
+.svg-inline--mobius-icon.mobius-icon-xl {
+  vertical-align: -0.25em;
+}
+.svg-inline--mobius-icon.mobius-icon-2xl {
+  vertical-align: -0.3125em;
+}
+.svg-inline--mobius-icon.mobius-icon-pull-left {
+  margin-right: var(--mobius-icon-pull-margin, 0.3em);
+  width: auto;
+}
+.svg-inline--mobius-icon.mobius-icon-pull-right {
+  margin-left: var(--mobius-icon-pull-margin, 0.3em);
+  width: auto;
+}
+.svg-inline--mobius-icon.mobius-icon-li {
+  width: var(--mobius-icon-li-width, 2em);
+  top: 0.25em;
+}
+.svg-inline--mobius-icon.mobius-icon-fw {
+  width: var(--mobius-icon-fw-width, 1.25em);
+}
+
+.mobius-icon-layers svg.svg-inline--mobius-icon {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.mobius-icon-layers-counter, .mobius-icon-layers-text {
+  display: inline-block;
+  position: absolute;
+  text-align: center;
+}
+
+.mobius-icon-layers {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  text-align: center;
+  vertical-align: -0.125em;
+  width: 1em;
+}
+.mobius-icon-layers svg.svg-inline--mobius-icon {
+  transform-origin: center center;
+}
+
+.mobius-icon-layers-text {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: center center;
+}
+
+.mobius-icon-layers-counter {
+  background-color: var(--mobius-icon-counter-background-color, #ff253a);
+  border-radius: var(--mobius-icon-counter-border-radius, 1em);
+  box-sizing: border-box;
+  color: var(--mobius-icon-inverse, #fff);
+  line-height: var(--mobius-icon-counter-line-height, 1);
+  max-width: var(--mobius-icon-counter-max-width, 5em);
+  min-width: var(--mobius-icon-counter-min-width, 1.5em);
+  overflow: hidden;
+  padding: var(--mobius-icon-counter-padding, 0.25em 0.5em);
+  right: var(--mobius-icon-right, 0);
+  text-overflow: ellipsis;
+  top: var(--mobius-icon-top, 0);
+  transform: scale(var(--mobius-icon-counter-scale, 0.25));
+  transform-origin: top right;
+}
+
+.mobius-icon-layers-bottom-right {
+  bottom: var(--mobius-icon-bottom, 0);
+  right: var(--mobius-icon-right, 0);
+  top: auto;
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: bottom right;
+}
+
+.mobius-icon-layers-bottom-left {
+  bottom: var(--mobius-icon-bottom, 0);
+  left: var(--mobius-icon-left, 0);
+  right: auto;
+  top: auto;
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: bottom left;
+}
+
+.mobius-icon-layers-top-right {
+  top: var(--mobius-icon-top, 0);
+  right: var(--mobius-icon-right, 0);
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: top right;
+}
+
+.mobius-icon-layers-top-left {
+  left: var(--mobius-icon-left, 0);
+  right: auto;
+  top: var(--mobius-icon-top, 0);
+  transform: scale(var(--mobius-icon-layers-scale, 0.25));
+  transform-origin: top left;
+}
+
+.mobius-icon-1x {
+  font-size: 1em;
+}
+
+.mobius-icon-2x {
+  font-size: 2em;
+}
+
+.mobius-icon-3x {
+  font-size: 3em;
+}
+
+.mobius-icon-4x {
+  font-size: 4em;
+}
+
+.mobius-icon-5x {
+  font-size: 5em;
+}
+
+.mobius-icon-6x {
+  font-size: 6em;
+}
+
+.mobius-icon-7x {
+  font-size: 7em;
+}
+
+.mobius-icon-8x {
+  font-size: 8em;
+}
+
+.mobius-icon-9x {
+  font-size: 9em;
+}
+
+.mobius-icon-10x {
+  font-size: 10em;
+}
+
+.mobius-icon-2xs {
+  font-size: 0.625em;
+  line-height: 0.1em;
+  vertical-align: 0.225em;
+}
+
+.mobius-icon-xs {
+  font-size: 0.75em;
+  line-height: 0.0833333337em;
+  vertical-align: 0.125em;
+}
+
+.mobius-icon-sm {
+  font-size: 0.875em;
+  line-height: 0.0714285718em;
+  vertical-align: 0.0535714295em;
+}
+
+.mobius-icon-lg {
+  font-size: 1.25em;
+  line-height: 0.05em;
+  vertical-align: -0.075em;
+}
+
+.mobius-icon-xl {
+  font-size: 1.5em;
+  line-height: 0.0416666682em;
+  vertical-align: -0.125em;
+}
+
+.mobius-icon-2xl {
+  font-size: 2em;
+  line-height: 0.03125em;
+  vertical-align: -0.1875em;
+}
+
+.mobius-icon-fw {
+  text-align: center;
+  width: 1.25em;
+}
+
+.mobius-icon-ul {
+  list-style-type: none;
+  margin-left: var(--mobius-icon-li-margin, 2.5em);
+  padding-left: 0;
+}
+.mobius-icon-ul > li {
+  position: relative;
+}
+
+.mobius-icon-li {
+  left: calc(var(--mobius-icon-li-width, 2em) * -1);
+  position: absolute;
+  text-align: center;
+  width: var(--mobius-icon-li-width, 2em);
+  line-height: inherit;
+}
+
+.mobius-icon-border {
+  border-color: var(--mobius-icon-border-color, #eee);
+  border-radius: var(--mobius-icon-border-radius, 0.1em);
+  border-style: var(--mobius-icon-border-style, solid);
+  border-width: var(--mobius-icon-border-width, 0.08em);
+  padding: var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);
+}
+
+.mobius-icon-pull-left {
+  float: left;
+  margin-right: var(--mobius-icon-pull-margin, 0.3em);
+}
+
+.mobius-icon-pull-right {
+  float: right;
+  margin-left: var(--mobius-icon-pull-margin, 0.3em);
+}
+
+.mobius-icon-spin {
+  animation-name: mobius-icon-spin;
+  animation-delay: var(--mobius-icon-animation-delay, 0s);
+  animation-direction: var(--mobius-icon-animation-direction, normal);
+  animation-duration: var(--mobius-icon-animation-duration, 2s);
+  animation-iteration-count: var(--mobius-icon-animation-iteration-count, infinite);
+  animation-timing-function: var(--mobius-icon-animation-timing, linear);
+}
+
+.mobius-icon-spin-reverse {
+  --mobius-icon-animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.mobius-icon-spin {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+@keyframes mobius-icon-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.mobius-icon-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.mobius-icon-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.mobius-icon-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.mobius-icon-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.mobius-icon-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.mobius-icon-flip-both,
+.mobius-icon-flip-horizontal.mobius-icon-flip-vertical {
+  transform: scale(-1, -1);
+}
+
+.mobius-icon-rotate-by {
+  transform: rotate(var(--mobius-icon-rotate-angle, none));
+}
+
+.mobius-icon-stack {
+  display: inline-block;
+  vertical-align: middle;
+  height: 2em;
+  position: relative;
+  width: 2.5em;
+}
+
+.mobius-icon-stack-1x,
+.mobius-icon-stack-2x {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: var(--mobius-icon-stack-z-index, auto);
+}
+
+.svg-inline--mobius-icon.mobius-icon-stack-1x {
+  height: 1em;
+  width: 1.25em;
+}
+.svg-inline--mobius-icon.mobius-icon-stack-2x {
+  height: 2em;
+  width: 2.5em;
+}
+
+.mobius-icon-inverse {
+  color: var(--mobius-icon-inverse, #fff);
+}
+
+.sr-only,
+.mobius-icon-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.sr-only-focusable:not(:focus),
+.mobius-icon-sr-only-focusable:not(:focus) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.svg-inline--mobius-icon .mobius-icon-primary {
+  fill: var(--mobius-icon-primary-color, currentColor);
+  opacity: var(--mobius-icon-primary-opacity, 1);
+}
+
+.svg-inline--mobius-icon .mobius-icon-secondary {
+  fill: var(--mobius-icon-secondary-color, currentColor);
+  opacity: var(--mobius-icon-secondary-opacity, 0.4);
+}
+
+.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {
+  opacity: var(--mobius-icon-secondary-opacity, 0.4);
+}
+
+.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary {
+  opacity: var(--mobius-icon-primary-opacity, 1);
+}
+
+.svg-inline--mobius-icon mask .mobius-icon-primary,
+.svg-inline--mobius-icon mask .mobius-icon-secondary {
+  fill: black;
+}
+
+.fad.mobius-icon-inverse,
+.mobius-icon-duotone.mobius-icon-inverse {
+  color: var(--mobius-icon-inverse, #fff);
+}
+`;
+let appliedStyles = false;
+export function applyStyles() {
+    if (appliedStyles) {
+        return;
+    }
+    appliedStyles = true;
+    const style = document.createElement("style");
+    style.setAttribute("data-id", "icon-style");
+    style.innerText = styleText;
+    document.head.append(style);
+}
+
+//# sourceMappingURL=IconStyle.js.map

package/dist/esm/components/Icon/IconStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Icon/IconStyle.tsx"],"sourcesContent":["const styleText = `\nsvg:not(:root).svg-inline--mobius-icon, svg:not(:host).svg-inline--mobius-icon {\n  overflow: visible;\n  box-sizing: content-box;\n}\n\n.svg-inline--mobius-icon {\n  display: var(--mobius-icon-display, inline-block);\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n.svg-inline--mobius-icon.mobius-icon-2xs {\n  vertical-align: 0.1em;\n}\n.svg-inline--mobius-icon.mobius-icon-xs {\n  vertical-align: 0em;\n}\n.svg-inline--mobius-icon.mobius-icon-sm {\n  vertical-align: -0.0714285705em;\n}\n.svg-inline--mobius-icon.mobius-icon-lg {\n  vertical-align: -0.2em;\n}\n.svg-inline--mobius-icon.mobius-icon-xl {\n  vertical-align: -0.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-2xl {\n  vertical-align: -0.3125em;\n}\n.svg-inline--mobius-icon.mobius-icon-pull-left {\n  margin-right: var(--mobius-icon-pull-margin, 0.3em);\n  width: auto;\n}\n.svg-inline--mobius-icon.mobius-icon-pull-right {\n  margin-left: var(--mobius-icon-pull-margin, 0.3em);\n  width: auto;\n}\n.svg-inline--mobius-icon.mobius-icon-li {\n  width: var(--mobius-icon-li-width, 2em);\n  top: 0.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-fw {\n  width: var(--mobius-icon-fw-width, 1.25em);\n}\n\n.mobius-icon-layers svg.svg-inline--mobius-icon {\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.mobius-icon-layers-counter, .mobius-icon-layers-text {\n  display: inline-block;\n  position: absolute;\n  text-align: center;\n}\n\n.mobius-icon-layers {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  text-align: center;\n  vertical-align: -0.125em;\n  width: 1em;\n}\n.mobius-icon-layers svg.svg-inline--mobius-icon {\n  transform-origin: center center;\n}\n\n.mobius-icon-layers-text {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: center center;\n}\n\n.mobius-icon-layers-counter {\n  background-color: var(--mobius-icon-counter-background-color, #ff253a);\n  border-radius: var(--mobius-icon-counter-border-radius, 1em);\n  box-sizing: border-box;\n  color: var(--mobius-icon-inverse, #fff);\n  line-height: var(--mobius-icon-counter-line-height, 1);\n  max-width: var(--mobius-icon-counter-max-width, 5em);\n  min-width: var(--mobius-icon-counter-min-width, 1.5em);\n  overflow: hidden;\n  padding: var(--mobius-icon-counter-padding, 0.25em 0.5em);\n  right: var(--mobius-icon-right, 0);\n  text-overflow: ellipsis;\n  top: var(--mobius-icon-top, 0);\n  transform: scale(var(--mobius-icon-counter-scale, 0.25));\n  transform-origin: top right;\n}\n\n.mobius-icon-layers-bottom-right {\n  bottom: var(--mobius-icon-bottom, 0);\n  right: var(--mobius-icon-right, 0);\n  top: auto;\n  transform: scale(var(--mobius-icon-layers-scale, 0.25));\n  transform-origin: bottom right;\n}\n\n.mobius-icon-layers-bottom-left {\n  bottom: var(--mobius-icon-bottom, 0);\n  left: var(--mobius-icon-left, 0);\n  right: auto;\n  top: auto;\n  transform: scale(var(--mobius-icon-layers-scale, 0.25));\n  transform-origin: bottom left;\n}\n\n.mobius-icon-layers-top-right {\n  top: var(--mobius-icon-top, 0);\n  right: var(--mobius-icon-right, 0);\n  transform: scale(var(--mobius-icon-layers-scale, 0.25));\n  transform-origin: top right;\n}\n\n.mobius-icon-layers-top-left {\n  left: var(--mobius-icon-left, 0);\n  right: auto;\n  top: var(--mobius-icon-top, 0);\n  transform: scale(var(--mobius-icon-layers-scale, 0.25));\n  transform-origin: top left;\n}\n\n.mobius-icon-1x {\n  font-size: 1em;\n}\n\n.mobius-icon-2x {\n  font-size: 2em;\n}\n\n.mobius-icon-3x {\n  font-size: 3em;\n}\n\n.mobius-icon-4x {\n  font-size: 4em;\n}\n\n.mobius-icon-5x {\n  font-size: 5em;\n}\n\n.mobius-icon-6x {\n  font-size: 6em;\n}\n\n.mobius-icon-7x {\n  font-size: 7em;\n}\n\n.mobius-icon-8x {\n  font-size: 8em;\n}\n\n.mobius-icon-9x {\n  font-size: 9em;\n}\n\n.mobius-icon-10x {\n  font-size: 10em;\n}\n\n.mobius-icon-2xs {\n  font-size: 0.625em;\n  line-height: 0.1em;\n  vertical-align: 0.225em;\n}\n\n.mobius-icon-xs {\n  font-size: 0.75em;\n  line-height: 0.0833333337em;\n  vertical-align: 0.125em;\n}\n\n.mobius-icon-sm {\n  font-size: 0.875em;\n  line-height: 0.0714285718em;\n  vertical-align: 0.0535714295em;\n}\n\n.mobius-icon-lg {\n  font-size: 1.25em;\n  line-height: 0.05em;\n  vertical-align: -0.075em;\n}\n\n.mobius-icon-xl {\n  font-size: 1.5em;\n  line-height: 0.0416666682em;\n  vertical-align: -0.125em;\n}\n\n.mobius-icon-2xl {\n  font-size: 2em;\n  line-height: 0.03125em;\n  vertical-align: -0.1875em;\n}\n\n.mobius-icon-fw {\n  text-align: center;\n  width: 1.25em;\n}\n\n.mobius-icon-ul {\n  list-style-type: none;\n  margin-left: var(--mobius-icon-li-margin, 2.5em);\n  padding-left: 0;\n}\n.mobius-icon-ul > li {\n  position: relative;\n}\n\n.mobius-icon-li {\n  left: calc(var(--mobius-icon-li-width, 2em) * -1);\n  position: absolute;\n  text-align: center;\n  width: var(--mobius-icon-li-width, 2em);\n  line-height: inherit;\n}\n\n.mobius-icon-border {\n  border-color: var(--mobius-icon-border-color, #eee);\n  border-radius: var(--mobius-icon-border-radius, 0.1em);\n  border-style: var(--mobius-icon-border-style, solid);\n  border-width: var(--mobius-icon-border-width, 0.08em);\n  padding: var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);\n}\n\n.mobius-icon-pull-left {\n  float: left;\n  margin-right: var(--mobius-icon-pull-margin, 0.3em);\n}\n\n.mobius-icon-pull-right {\n  float: right;\n  margin-left: var(--mobius-icon-pull-margin, 0.3em);\n}\n\n.mobius-icon-spin {\n  animation-name: mobius-icon-spin;\n  animation-delay: var(--mobius-icon-animation-delay, 0s);\n  animation-direction: var(--mobius-icon-animation-direction, normal);\n  animation-duration: var(--mobius-icon-animation-duration, 2s);\n  animation-iteration-count: var(--mobius-icon-animation-iteration-count, infinite);\n  animation-timing-function: var(--mobius-icon-animation-timing, linear);\n}\n\n.mobius-icon-spin-reverse {\n  --mobius-icon-animation-direction: reverse;\n}\n\n@media (prefers-reduced-motion: reduce) {\n.mobius-icon-spin {\n    animation-delay: -1ms;\n    animation-duration: 1ms;\n    animation-iteration-count: 1;\n    transition-delay: 0s;\n    transition-duration: 0s;\n  }\n}\n@keyframes mobius-icon-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.mobius-icon-rotate-90 {\n  transform: rotate(90deg);\n}\n\n.mobius-icon-rotate-180 {\n  transform: rotate(180deg);\n}\n\n.mobius-icon-rotate-270 {\n  transform: rotate(270deg);\n}\n\n.mobius-icon-flip-horizontal {\n  transform: scale(-1, 1);\n}\n\n.mobius-icon-flip-vertical {\n  transform: scale(1, -1);\n}\n\n.mobius-icon-flip-both,\n.mobius-icon-flip-horizontal.mobius-icon-flip-vertical {\n  transform: scale(-1, -1);\n}\n\n.mobius-icon-rotate-by {\n  transform: rotate(var(--mobius-icon-rotate-angle, none));\n}\n\n.mobius-icon-stack {\n  display: inline-block;\n  vertical-align: middle;\n  height: 2em;\n  position: relative;\n  width: 2.5em;\n}\n\n.mobius-icon-stack-1x,\n.mobius-icon-stack-2x {\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: var(--mobius-icon-stack-z-index, auto);\n}\n\n.svg-inline--mobius-icon.mobius-icon-stack-1x {\n  height: 1em;\n  width: 1.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-stack-2x {\n  height: 2em;\n  width: 2.5em;\n}\n\n.mobius-icon-inverse {\n  color: var(--mobius-icon-inverse, #fff);\n}\n\n.sr-only,\n.mobius-icon-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.sr-only-focusable:not(:focus),\n.mobius-icon-sr-only-focusable:not(:focus) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.svg-inline--mobius-icon .mobius-icon-primary {\n  fill: var(--mobius-icon-primary-color, currentColor);\n  opacity: var(--mobius-icon-primary-opacity, 1);\n}\n\n.svg-inline--mobius-icon .mobius-icon-secondary {\n  fill: var(--mobius-icon-secondary-color, currentColor);\n  opacity: var(--mobius-icon-secondary-opacity, 0.4);\n}\n\n.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {\n  opacity: var(--mobius-icon-secondary-opacity, 0.4);\n}\n\n.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary {\n  opacity: var(--mobius-icon-primary-opacity, 1);\n}\n\n.svg-inline--mobius-icon mask .mobius-icon-primary,\n.svg-inline--mobius-icon mask .mobius-icon-secondary {\n  fill: black;\n}\n\n.fad.mobius-icon-inverse,\n.mobius-icon-duotone.mobius-icon-inverse {\n  color: var(--mobius-icon-inverse, #fff);\n}\n`;\n\nlet appliedStyles = false;\n\nexport function applyStyles() {\n  if (appliedStyles) {\n    return;\n  }\n  appliedStyles = true;\n\n  const style = document.createElement(\"style\");\n  style.setAttribute(\"data-id\", \"icon-style\");\n  style.innerText = styleText;\n  document.head.append(style);\n}\n"],"names":["styleText","appliedStyles","applyStyles","style","document","createElement","setAttribute","innerText","head","append"],"mappings":"AAAA,MAAMA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqYnB,CAAC;AAED,IAAIC,gBAAgB;AAEpB,OAAO,SAASC;IACd,IAAID,eAAe;QACjB;IACF;IACAA,gBAAgB;IAEhB,MAAME,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,YAAY,CAAC,WAAW;IAC9BH,MAAMI,SAAS,GAAGP;IAClBI,SAASI,IAAI,CAACC,MAAM,CAACN;AACvB"}

package/dist/esm/components/Modal/Modal.js

@@ -30,6 +30,9 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     // Add close handler, to enable closing animations
     const handleClose = useCallback((event)=>{
+        // `transitionend` may be called from another component but `event` may be undefined.
+        // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both
+        if (!event) return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();

package/dist/esm/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 {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\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  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close modal only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\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  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both\n      if (!event) return;\n\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close modal only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}

package/dist/esm/components/Radio/Radio.js

@@ -25,6 +25,11 @@ const Radio = /*#__PURE__*/ forwardRef((props, ref)=>{
             setSelected(event.currentTarget.value);
         }
     };
+    // Exlucde props that are passed via cloneElement in `<RadioGroup />`
+    const { // @ts-ignore
+    // eslint-disable-next-line
+    orientation, // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs(Label, {
@@ -41,7 +46,8 @@ const Radio = /*#__PURE__*/ forwardRef((props, ref)=>{
                         type: "radio",
                         defaultChecked: isDefaultSelected,
                         name: name,
-                        required: isRequired
+                        required: isRequired,
+                        ...rest
                     }),
                     isMultiline ? /*#__PURE__*/ _jsxs("div", {
                         className: "mobius/RadioContentMultiline",

package/dist/esm/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    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          />\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":["classNames","forwardRef","ErrorMessage","Label","Radio","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","inputClasses","handleClick","event","currentTarget","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAoDC,UAAU,QAAQ,QAAQ;AAI9E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAwDjC,MAAMC,sBAA6DH,WACjE,CAACI,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,mBAAmBzB,WACvB,qBACAwB,cACAd;IAEF,MAAMgB,eAAe1B,WAAW,qBAAqBwB;IAErD,MAAMG,cAAc,CAACC;QACnB,IAAIf,UAAU;YACZA,SAASe;QACX;QACA,IAAIV,aAAa;YACfA,YAAYU,MAAMC,aAAa,CAACrB,KAAK;QACvC;IACF;IAEA,qBACE;;0BACE,MAACL;gBAAMO,WAAWe;;kCAChB,KAACK;wBACCC,oBAAkBX,UAAU,CAAC,mBAAmB;wBAChDY,UAAUX;wBACVf,KAAKA;wBACLI,WAAWgB;wBACXO,SAASN;wBACTnB,OAAOA;wBACP0B,UAAU;wBACVC,MAAK;wBACLrB,gBAAgBS;wBAChBP,MAAMA;wBACNoB,UAAUjB;;oBAEXG,4BACC,MAACe;wBAAI3B,WAAU;;0CACb,KAAC2B;gCAAI3B,WAAU;0CAAgCD;;0CAC/C,KAAC4B;gCAAI3B,WAAU;0CAA4BH;;;uCAG7C,KAAC8B;wBAAI3B,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,KAACV;gBAAaU,cAAcA;;;;AAGnD;AAGFR,MAAMkC,WAAW,GAAG;AACpB,SAASlC,KAAK,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/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":["classNames","forwardRef","ErrorMessage","Label","Radio","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAoDC,UAAU,QAAQ,QAAQ;AAI9E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AAwDjC,MAAMC,sBAA6DH,WACjE,CAACI,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,mBAAmBzB,WACvB,qBACAwB,cACAd;IAEF,MAAMgB,eAAe1B,WAAW,qBAAqBwB;IAErD,MAAMG,cAAc,CAACC;QACnB,IAAIf,UAAU;YACZA,SAASe;QACX;QACA,IAAIV,aAAa;YACfA,YAAYU,MAAMC,aAAa,CAACrB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BsB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGZ;IAEJ,qBACE;;0BACE,MAACjB;gBAAMO,WAAWe;;kCAChB,KAACQ;wBACCC,oBAAkBd,UAAU,CAAC,mBAAmB;wBAChDe,UAAUd;wBACVf,KAAKA;wBACLI,WAAWgB;wBACXU,SAAST;wBACTnB,OAAOA;wBACP6B,UAAU;wBACVC,MAAK;wBACLxB,gBAAgBS;wBAChBP,MAAMA;wBACNuB,UAAUpB;wBACT,GAAGa,IAAI;;oBAETV,4BACC,MAACkB;wBAAI9B,WAAU;;0CACb,KAAC8B;gCAAI9B,WAAU;0CAAgCD;;0CAC/C,KAAC+B;gCAAI9B,WAAU;0CAA4BH;;;uCAG7C,KAACiC;wBAAI9B,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,KAACV;gBAAaU,cAAcA;;;;AAGnD;AAGFR,MAAMqC,WAAW,GAAG;AACpB,SAASrC,KAAK,GAAG"}

package/dist/esm/components/Slider/helpers.test.js

@@ -0,0 +1,73 @@
+import { renderHook } from "@testing-library/react";
+import { numberFormatter, unwrapFirstValue, useUnwrappedHandler, useWrappedValue, wrapValue, } from "./helpers";
+describe("Slider helpers", () => {
+    describe("unwrapFirstValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            expect(unwrapFirstValue(undefined)).toBeUndefined();
+        });
+        it("should return undefined if the value is an empty array", () => {
+            expect(unwrapFirstValue([])).toBeUndefined();
+        });
+        it("should return the first value if the value is an array with one element", () => {
+            expect(unwrapFirstValue([1])).toBe(1);
+        });
+        it("should return the first value if the value is an array with more than one element", () => {
+            expect(unwrapFirstValue([1, 2])).toBe(1);
+        });
+    });
+    describe("wrapValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            expect(wrapValue(undefined)).toBeUndefined();
+        });
+        it("should return the value if it is not an array", () => {
+            expect(wrapValue(1)).toEqual([1]);
+        });
+        it("should return an array of array if value is an array", () => {
+            expect(wrapValue([1])).toEqual([[1]]);
+        });
+    });
+    describe("useWrappedValue", () => {
+        it("should return undefined if the value is undefined", () => {
+            const { result } = renderHook(() => useWrappedValue(undefined));
+            expect(result.current).toBeUndefined();
+        });
+        it("should return the value if it is not an array", () => {
+            const { result } = renderHook(() => useWrappedValue(1));
+            expect(result.current).toEqual([1]);
+        });
+        it("should return an array of array if value is an array", () => {
+            const { result } = renderHook(() => useWrappedValue([1]));
+            expect(result.current).toEqual([[1]]);
+        });
+    });
+    describe("useUnwrappedHandler", () => {
+        it("should call the handler with the unwrapped value", () => {
+            const handler = jest.fn();
+            const { result } = renderHook(() => useUnwrappedHandler(handler));
+            result.current([1]);
+            expect(handler).toHaveBeenCalledWith(1);
+        });
+    });
+    describe("numberFormatter", () => {
+        it("returns an empty string when no params are passed", () => {
+            expect(numberFormatter(undefined)).toEqual("");
+        });
+        it("returns the unformatted value when no formatter is present", () => {
+            expect(numberFormatter(43)).toEqual("43");
+            expect(numberFormatter("QQ")).toEqual("QQ");
+        });
+        it("returns the unformatted value when format options are empty", () => {
+            const formatOptions = {};
+            expect(numberFormatter(35, formatOptions)).toEqual("35");
+        });
+        it("returns a formatted value, defaulting to en-GB locale", () => {
+            const formatOptions = { style: "currency", currency: "EUR" };
+            expect(numberFormatter(35.4, formatOptions)).toEqual("€35.40");
+        });
+        it("respects a locale if supplied", () => {
+            const formatOptions = { style: "currency", currency: "EUR" };
+            expect(numberFormatter(35.4, formatOptions, "de-DE")).toEqual("35,40 €");
+        });
+    });
+});
+//# sourceMappingURL=helpers.test.js.map

package/dist/esm/components/Slider/helpers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.test.js","sourceRoot":"","sources":["../../../../src/components/Slider/helpers.test.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames/dedupe";
+import { sizeClasses } from "../../utils";
+export const Stack = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { elementType: Element = "div", direction = "row", spacing = "xs", ...otherProps } = props;
+    const spaceClasses = sizeClasses(spacing);
+    const classes = classNames("mobius", "mobius/Stack", spaceClasses, {
+        "--is-horizontal": direction === "row",
+        "--is-vertical": direction === "column"
+    }, otherProps.className);
+    return /*#__PURE__*/ _jsx(Element, {
+        ref: ref,
+        ...otherProps,
+        className: classes
+    });
+});
+
+//# sourceMappingURL=Stack.js.map

package/dist/esm/components/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { SizeType } from \"../../types\";\nimport { sizeClasses } from \"../../utils\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  direction?: \"row\" | \"column\";\n  spacing?: SizeType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack: ForwardedRefComponent<StackProps, StackElementType> =\n  forwardRef((props: StackProps, ref: StackRef) => {\n    const {\n      elementType: Element = \"div\",\n      direction = \"row\",\n      spacing = \"xs\",\n      ...otherProps\n    } = props;\n\n    const spaceClasses = sizeClasses(spacing);\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Stack\",\n      spaceClasses,\n      {\n        \"--is-horizontal\": direction === \"row\",\n        \"--is-vertical\": direction === \"column\",\n      },\n      otherProps.className,\n    );\n\n    return <Element ref={ref} {...otherProps} className={classes} />;\n  });\n"],"names":["forwardRef","classNames","sizeClasses","Stack","props","ref","elementType","Element","direction","spacing","otherProps","spaceClasses","classes","className"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAI3C,SAASC,WAAW,QAAQ,cAAc;AAe1C,OAAO,MAAMC,sBACXH,WAAW,CAACI,OAAmBC;IAC7B,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,YAAY,KAAK,EACjBC,UAAU,IAAI,EACd,GAAGC,YACJ,GAAGN;IAEJ,MAAMO,eAAeT,YAAYO;IAEjC,MAAMG,UAAUX,WACd,UACA,gBACAU,cACA;QACE,mBAAmBH,cAAc;QACjC,iBAAiBA,cAAc;IACjC,GACAE,WAAWG,SAAS;IAGtB,qBAAO,KAACN;QAAQF,KAAKA;QAAM,GAAGK,UAAU;QAAEG,WAAWD;;AACvD,GAAG"}

package/dist/esm/components/Stack/index.js

@@ -0,0 +1,3 @@
+export * from "./Stack";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Stack/index.tsx"],"sourcesContent":["export * from \"./Stack\";\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}