@simplybusiness/mobius 4.8.6 → 4.8.8

package/dist/esm/components/Flex/propUtils.test.js

@@ -0,0 +1,97 @@
+import { withoutUndefinedValues, buildFlexStyles, splitProps, } from "./propUtils";
+describe("withoutUndefinedValues", () => {
+    it("returns object without undefined values", () => {
+        const props = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+            e: undefined,
+            f: undefined,
+        };
+        const actual = withoutUndefinedValues(props);
+        const expected = {
+            a: 1,
+            b: "Two",
+            c: [],
+            d: {},
+        };
+        expect(actual).toStrictEqual(expected);
+    });
+});
+describe("buildFlexStyles", () => {
+    describe("given a list of props", () => {
+        it("returns a specified list of flex props", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const expectedProps = Object.assign(Object.assign({}, props), { display: "flex" });
+            const actual = buildFlexStyles(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+    describe("given a list of partially defined props", () => {
+        it("returns flex props that are defined", () => {
+            const props = {
+                flexDirection: "row",
+                flexWrap: undefined,
+                flexGrow: "1",
+                flex: undefined,
+                justifyContent: "start",
+                alignItems: undefined,
+                alignContent: "center",
+                gap: undefined,
+                rowGap: "20px",
+                columnGap: undefined,
+            };
+            const expectedProps = {
+                flexDirection: "row",
+                flexGrow: "1",
+                justifyContent: "start",
+                alignContent: "center",
+                rowGap: "20px",
+                display: "flex",
+            };
+            const actual = buildFlexStyles(props);
+            expect(actual).toStrictEqual(expectedProps);
+        });
+    });
+});
+describe("splitProps", () => {
+    describe("given a list of props", () => {
+        it("returns an array with two items: 1) specified flex props; 2) all other props", () => {
+            const flexProps = {
+                flexDirection: "row",
+                flexWrap: "wrap",
+                flexGrow: "1",
+                flex: "1 1 0px",
+                justifyContent: "start",
+                alignItems: "stretch",
+                alignContent: "center",
+                gap: "10px",
+                rowGap: "20px",
+                columnGap: "30px",
+            };
+            const otherProps = {
+                a: 1,
+                b: "Two",
+                c: [],
+                d: {},
+            };
+            const props = Object.assign(Object.assign({}, flexProps), otherProps);
+            const actual = splitProps(props);
+            const expected = [flexProps, otherProps];
+            expect(actual).toStrictEqual(expected);
+        });
+    });
+});
+//# sourceMappingURL=propUtils.test.js.map

package/dist/esm/components/Flex/propUtils.test.js.map

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

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

@@ -6,18 +6,18 @@ import { supportsDialog } from "../../utils/polyfill-tests";
 import { mergeRefs } from "../../utils";
 import { ModalContext } from "./ModalContext";
 import { useDialog } from "../../hooks";
+import { useDeprecationWarning } from "../../hooks/useDeprecationWarning";
 const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
     size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
-    const hasWarnedAboutMissingLabels = useRef(false);
-    // Handle deprecated props
-    if (!hasWarnedAboutMissingLabels.current) {
-        if (size || appElement || preventCloseOnEsc || shouldFocusAfterRender || parentSelector) {
-            console.warn(`Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`);
-            hasWarnedAboutMissingLabels.current = true;
-        }
-    }
+    useDeprecationWarning({
+        size,
+        appElement,
+        preventCloseOnEsc,
+        shouldFocusAfterRender,
+        parentSelector
+    });
     const shouldTransition = supportsDialog();
     const dialogRef = useRef(null);
     const { close } = useDialog({

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 { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\nimport { useDialog } from \"../../hooks\";\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  } = 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 shouldTransition = supportsDialog();\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    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useMemo","useRef","supportsDialog","mergeRefs","ModalContext","useDialog","TRANSITION_CSS_VARIABLE","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","shouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","modalClasses","contextValue","dialog","onCancel","Provider","value","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,0BAA0B;AAEhC,MAAMC,sBAAQR,WAAW,CAACS,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,EACf,GAAGd;IACJ,MAAMe,8BAA8BtB,OAAgB;IACpD,0BAA0B;IAC1B,IAAI,CAACsB,4BAA4BC,OAAO,EAAE;QACxC,IACEN,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAG,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JH,4BAA4BC,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,mBAAmBzB;IACzB,MAAM0B,YAAY3B,OAAiC;IACnD,MAAM,EAAE4B,KAAK,EAAE,GAAGxB,UAAU;QAC1BI,KAAKmB;QACLlB;QACAE;QACAD;QACAmB,YAAY;YACVC,WAAW,CAAC,CAACd;YACbe,aAAa1B;QACf;IACF;IAEA,MAAM2B,eAAenC,WACnB,UACA,gBACA;QACE,uBAAuB,CAAC6B;QACxB,uBAAuBA,oBAAoBV;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMoB,eAAelC,QACnB,IAAO,CAAA;YACLW,SAASkB;YACTd;QACF,CAAA,GACA;QAACc;QAAOd;KAAW;IAGrB,qBACE,KAACoB;QACC1B,KAAKN,UAAU;YAACyB;YAAWnB;SAAI;QAC/B2B,UAAUP;QACVf,WAAWmB;kBAEX,cAAA,KAAC7B,aAAaiC,QAAQ;YAACC,OAAOJ;sBAC3BrB;;;AAIT;AAEAN,MAAMgC,WAAW,GAAG;AACpB,SAAShC,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\nimport { useDialog } from \"../../hooks\";\nimport { useDeprecationWarning } from \"../../hooks/useDeprecationWarning\";\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  } = props;\n\n  useDeprecationWarning({\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  });\n\n  const shouldTransition = supportsDialog();\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    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useMemo","useRef","supportsDialog","mergeRefs","ModalContext","useDialog","useDeprecationWarning","TRANSITION_CSS_VARIABLE","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","shouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","modalClasses","contextValue","dialog","onCancel","Provider","value","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,qBAAqB,QAAQ,oCAAoC;AAK1E,MAAMC,0BAA0B;AAEhC,MAAMC,sBAAQT,WAAW,CAACU,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,EACf,GAAGd;IAEJH,sBAAsB;QACpBa;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMC,mBAAmBtB;IACzB,MAAMuB,YAAYxB,OAAiC;IACnD,MAAM,EAAEyB,KAAK,EAAE,GAAGrB,UAAU;QAC1BK,KAAKe;QACLd;QACAE;QACAD;QACAe,YAAY;YACVC,WAAW,CAAC,CAACV;YACbW,aAAatB;QACf;IACF;IAEA,MAAMuB,eAAehC,WACnB,UACA,gBACA;QACE,uBAAuB,CAAC0B;QACxB,uBAAuBA,oBAAoBN;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMgB,eAAe/B,QACnB,IAAO,CAAA;YACLY,SAASc;YACTV;QACF,CAAA,GACA;QAACU;QAAOV;KAAW;IAGrB,qBACE,KAACgB;QACCtB,KAAKP,UAAU;YAACsB;YAAWf;SAAI;QAC/BuB,UAAUP;QACVX,WAAWe;kBAEX,cAAA,KAAC1B,aAAa8B,QAAQ;YAACC,OAAOJ;sBAC3BjB;;;AAIT;AAEAN,MAAM4B,WAAW,GAAG;AACpB,SAAS5B,KAAK,GAAG"}

package/dist/esm/components/NumberField/NumberField.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
 import { forwardRef, useId, useRef, useState } from "react";
-import { useLabel } from "../../hooks";
+import { useLabel, useValidationClasses } from "../../hooks";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
 export const NumberField = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, isDisabled, isRequired, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, errorMessage, validationState, isReadOnly, minValue, maxValue, step, placeholder, defaultValue = 0, onChange } = props;
+    const { id, isDisabled, isRequired, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, errorMessage, validationState, isInvalid, isReadOnly, minValue, maxValue, step, placeholder, defaultValue = 0, onChange } = props;
     const inputRef = useRef(null);
     const [value, setValue] = useState(defaultValue);
     const valueWithoutLeadingZero = value.toString().replace(/^0+/, "");
@@ -22,18 +22,18 @@ export const NumberField = /*#__PURE__*/ forwardRef((props, ref)=>{
     const containerClasses = classNames("mobius/NumberField", className, {
         "--is-optional": optional
     });
+    const validationClasses = useValidationClasses({
+        validationState,
+        isInvalid
+    });
     const inputClasses = classNames("mobius/NumberFieldInput", className, {
         "--is-required": required,
         "--is-optional": optional,
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const labelClasses = classNames("mobius/NumberFieldLabel", {
-        "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid",
         "--is-disabled": isDisabled
-    });
+    }, validationClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([
@@ -84,7 +84,7 @@ export const NumberField = /*#__PURE__*/ forwardRef((props, ref)=>{
                     required: required,
                     "aria-describedby": describedBy,
                     "aria-errormessage": shouldErrorMessageShow,
-                    "aria-invalid": validationState === "invalid",
+                    "aria-invalid": isInvalid,
                     readOnly: isReadOnly,
                     disabled: isDisabled,
                     autoComplete: "off",