@revikornmann/muka-ui 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sourceRoot":"","sources":["../../../../components/Sheet/Sheet.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AACtC,OAAO,aAAa,CAAC;AAgDrB;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,eAAe,GAAG,KAAK,EACvB,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,eAAe,IAAI,0BAA0B;QAC7C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,IAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,WAAW,YAExB,MAAC,IAAI,CAAC,MAAM,eACV,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,qBAAqB,GAAG,EAChD,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAE,cAAc,aACrC,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAc,EAChE,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,8BAA8B,iBAAa,MAAM,YAC9D,cAAK,SAAS,EAAC,oBAAoB,GAAG,GAClC,CACP,EACD,cAAK,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAO,IACrC,IACH,GACJ,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/dist/esm/components/Skeleton/Skeleton.css

@@ -0,0 +1,72 @@
+/* Skeleton Component Styles */
+
+.muka-skeleton {
+  background-color: var(--color-surface-level1);
+  display: block;
+}
+
+/* Variants */
+.muka-skeleton--text {
+  height: 1em;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+.muka-skeleton--circular {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+}
+
+.muka-skeleton--rectangular {
+  height: 7.5rem;
+  border-radius: var(--radius-md);
+  width: 100%;
+}
+
+/* Last line in multi-line text is shorter */
+.muka-skeleton--last-line {
+  width: 80%;
+}
+
+/* Lines container */
+.muka-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Shimmer animation */
+@keyframes muka-skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.muka-skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-level1) 25%,
+    var(--color-surface-level2) 50%,
+    var(--color-surface-level1) 75%
+  );
+  background-size: 200% 100%;
+  animation: muka-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Pulse animation */
+@keyframes muka-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.muka-skeleton--pulse {
+  animation: muka-skeleton-pulse 1.5s ease-in-out infinite;
+}

package/dist/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Skeleton.css';
+export const Skeleton = ({ variant = 'text', width, height, lines = 1, animation = 'shimmer', borderRadius, className = '', }) => {
+    const baseClasses = [
+        'muka-skeleton',
+        `muka-skeleton--${variant}`,
+        animation !== 'none' && `muka-skeleton--${animation}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const style = {
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+        borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
+    };
+    if (variant === 'text' && lines > 1) {
+        return (_jsx("div", { className: "muka-skeleton__lines", role: "status", "aria-label": "Loading", children: Array.from({ length: lines }, (_, i) => (_jsx("div", { className: [
+                    baseClasses,
+                    i === lines - 1 && 'muka-skeleton--last-line',
+                ].filter(Boolean).join(' '), style: i === lines - 1 ? { ...style, width: style.width || '80%' } : style }, i))) }));
+    }
+    return _jsx("div", { className: baseClasses, style: style, role: "status", "aria-label": "Loading" });
+};
+export default Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,CAAC;AAmBxB,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,MAAM,EACN,KAAK,GAAG,CAAC,EACT,SAAS,GAAG,SAAS,EACrB,YAAY,EACZ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,eAAe;QACf,kBAAkB,OAAO,EAAE;QAC3B,SAAS,KAAK,MAAM,IAAI,kBAAkB,SAAS,EAAE;QACrD,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,KAAK,GAAwB;QACjC,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;QACvD,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;QAC3D,YAAY,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,YAAY;KACpF,CAAC;IAEF,IAAI,OAAO,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS,YACrE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvC,cAEE,SAAS,EAAE;oBACT,WAAW;oBACX,CAAC,KAAK,KAAK,GAAG,CAAC,IAAI,0BAA0B;iBAC9C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,IALrE,CAAC,CAMN,CACH,CAAC,GACE,CACP,CAAC;IACJ,CAAC;IAED,OAAO,cAAK,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,gBAAY,SAAS,GAAG,CAAC;AAC1F,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Skeleton } from './Skeleton';
+export { default } from './Skeleton';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/components/SmsOtpField/SmsOtpField.css

@@ -0,0 +1,189 @@
+/* SmsOtpField Component Styles - Using Muka Design Tokens */
+
+/* Wrapper */
+.muka-sms-otp-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-sms-otp-field__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-sms-otp-field__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-sms-otp-field__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-sms-otp-field__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-sms-otp-field__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Hidden input for browser autofill */
+.muka-sms-otp-field__hidden-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Digits container */
+.muka-sms-otp-field__digits {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Separator */
+.muka-sms-otp-field__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  font-size: 1.25rem;
+  padding: 0 var(--spacing-1);
+  user-select: none;
+}
+
+/* Individual digit box */
+.muka-sms-otp-field__digit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  color: var(--input-field-color-default-foreground);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
+  caret-color: var(--input-field-color-focus-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove spinner buttons */
+.muka-sms-otp-field__digit::-webkit-inner-spin-button,
+.muka-sms-otp-field__digit::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Size variants */
+.muka-sms-otp-field__digit--sm {
+  width: 36px;
+  height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-sms-otp-field__digit--md {
+  width: 44px;
+  height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-sms-otp-field__digit--lg {
+  width: 52px;
+  height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+/* Inset shadow (matches Input component) */
+.muka-sms-otp-field__digit::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+/* Focus state */
+.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  outline: none;
+}
+
+/* Also handle native :focus for keyboard navigation */
+.muka-sms-otp-field__digit:focus {
+  outline: none;
+}
+
+/* Error state */
+.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+/* Disabled state */
+.muka-sms-otp-field__digit--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Filled state — slightly bolder text */
+.muka-sms-otp-field__digit--filled {
+  color: var(--input-field-color-default-foreground);
+}
+
+/* Helper text */
+.muka-sms-otp-field__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-sms-otp-field__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}

package/dist/esm/components/SmsOtpField/SmsOtpField.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useId, useEffect } from 'react';
+import './SmsOtpField.css';
+/**
+ * SmsOtpField Component
+ *
+ * An OTP (One-Time Password) input following web.dev SMS OTP best practices:
+ * - Uses `autocomplete="one-time-code"` for browser autofill and WebOTP API
+ * - Uses `inputmode="numeric"` for mobile numeric keyboard
+ * - Uses `type="text"` (not number) to avoid spinner buttons
+ * - Individual digit boxes with a single hidden input for autofill
+ *
+ * Tokens used:
+ * - input.field.color.{state}.{background|foreground|border}
+ * - input.field.radius.{size}
+ * - input.field.height.{size}
+ * - text.input.{size}
+ * - text.label.{size}.semibold
+ */
+export const SmsOtpField = ({ length = 6, value: controlledValue, onChange, onComplete, label, helperText, error = false, errorMessage, disabled = false, size = 'md', required = false, className = '', name, }) => {
+    const generatedId = useId();
+    const fieldId = name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState('');
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const inputRefs = useRef([]);
+    const hiddenInputRef = useRef(null);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const digits = Array.from({ length }, (_, i) => currentValue[i] || '');
+    const updateValue = useCallback((newValue) => {
+        const sanitized = newValue.replace(/[^0-9]/g, '').slice(0, length);
+        if (!isControlled) {
+            setInternalValue(sanitized);
+        }
+        onChange?.(sanitized);
+        if (sanitized.length === length) {
+            onComplete?.(sanitized);
+        }
+    }, [isControlled, length, onChange, onComplete]);
+    const focusDigit = useCallback((index) => {
+        const clampedIndex = Math.max(0, Math.min(index, length - 1));
+        inputRefs.current[clampedIndex]?.focus();
+    }, [length]);
+    const handleDigitInput = useCallback((index, e) => {
+        const input = e.currentTarget;
+        const inputData = input.value;
+        // Handle paste or autofill of multiple characters
+        if (inputData.length > 1) {
+            const numericOnly = inputData.replace(/[^0-9]/g, '');
+            const newValue = currentValue.slice(0, index) + numericOnly;
+            updateValue(newValue);
+            const nextIndex = Math.min(index + numericOnly.length, length - 1);
+            focusDigit(nextIndex);
+            return;
+        }
+        // Single character input
+        const char = inputData.replace(/[^0-9]/g, '');
+        if (!char) {
+            input.value = '';
+            return;
+        }
+        const chars = currentValue.split('');
+        chars[index] = char;
+        // Fill gaps with empty strings
+        for (let i = 0; i < length; i++) {
+            if (chars[i] === undefined)
+                chars[i] = '';
+        }
+        updateValue(chars.join(''));
+        if (index < length - 1) {
+            focusDigit(index + 1);
+        }
+    }, [currentValue, focusDigit, length, updateValue]);
+    const handleKeyDown = useCallback((index, e) => {
+        if (e.key === 'Backspace') {
+            e.preventDefault();
+            const chars = currentValue.split('');
+            if (chars[index]) {
+                chars[index] = '';
+                updateValue(chars.join(''));
+            }
+            else if (index > 0) {
+                chars[index - 1] = '';
+                updateValue(chars.join(''));
+                focusDigit(index - 1);
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            e.preventDefault();
+            focusDigit(index - 1);
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            e.preventDefault();
+            focusDigit(index + 1);
+        }
+    }, [currentValue, focusDigit, length, updateValue]);
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData('text/plain').replace(/[^0-9]/g, '').slice(0, length);
+        if (pasted) {
+            updateValue(pasted);
+            focusDigit(Math.min(pasted.length, length - 1));
+        }
+    }, [focusDigit, length, updateValue]);
+    // Handle autofill on the hidden input
+    const handleHiddenInputChange = useCallback((e) => {
+        const newValue = e.target.value.replace(/[^0-9]/g, '').slice(0, length);
+        if (newValue) {
+            updateValue(newValue);
+            focusDigit(Math.min(newValue.length, length - 1));
+        }
+    }, [focusDigit, length, updateValue]);
+    // Sync hidden input value for form submission
+    useEffect(() => {
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = currentValue;
+        }
+    }, [currentValue]);
+    const wrapperClasses = [
+        'muka-sms-otp-field',
+        className,
+    ].filter(Boolean).join(' ');
+    const digitClasses = (index) => [
+        'muka-sms-otp-field__digit',
+        `muka-sms-otp-field__digit--${size}`,
+        focusedIndex === index && 'muka-sms-otp-field__digit--focused',
+        error && 'muka-sms-otp-field__digit--error',
+        disabled && 'muka-sms-otp-field__digit--disabled',
+        digits[index] && 'muka-sms-otp-field__digit--filled',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-sms-otp-field__label muka-sms-otp-field__label--${size}`, htmlFor: `${fieldId}-digit-0`, children: [label, required && _jsx("span", { className: "muka-sms-otp-field__required", "aria-hidden": "true", children: " *" })] })), _jsx("input", { ref: hiddenInputRef, type: "text", inputMode: "numeric", autoComplete: "one-time-code", name: name, pattern: "[0-9]*", className: "muka-sms-otp-field__hidden-input", "aria-hidden": "true", tabIndex: -1, onChange: handleHiddenInputChange, disabled: disabled }), _jsx("div", { className: "muka-sms-otp-field__digits", role: "group", "aria-label": label || 'One-time code', "aria-describedby": describedBy, children: digits.map((digit, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { ref: (el) => { inputRefs.current[index] = el; }, id: `${fieldId}-digit-${index}`, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: digitClasses(index), value: digit, onInput: (e) => handleDigitInput(index, e), onChange: () => { }, onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => {
+                                setFocusedIndex(index);
+                                // Select the content on focus for easy replacement
+                                inputRefs.current[index]?.select();
+                            }, onBlur: () => setFocusedIndex(null), onPaste: handlePaste, disabled: disabled, required: required && index === 0, "aria-label": `Digit ${index + 1} of ${length}`, "aria-invalid": error || undefined, autoComplete: "off" }), index === Math.floor(length / 2) - 1 && length > 1 && (_jsx("span", { className: "muka-sms-otp-field__separator", "aria-hidden": "true", children: "\u2013" }))] }, index))) }), showError && (_jsx("p", { className: "muka-sms-otp-field__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-sms-otp-field__helper", id: helperTextId, children: helperText }))] }));
+};
+export default SmsOtpField;
+//# sourceMappingURL=SmsOtpField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmsOtpField.js","sourceRoot":"","sources":["../../../../components/SmsOtpField/SmsOtpField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,mBAAmB,CAAC;AA2C3B;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,GACL,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC;IACpC,MAAM,YAAY,GAAG,GAAG,OAAO,SAAS,CAAC;IACzC,MAAM,cAAc,GAAG,GAAG,OAAO,QAAQ,CAAC;IAE1C,MAAM,YAAY,GAAG,eAAe,KAAK,SAAS,CAAC;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;IAEpE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,MAAM,SAAS,GAAG,KAAK,IAAI,YAAY,CAAC;IACxC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvF,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,QAAgB,EAAE,EAAE;QACnB,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;QACD,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC;QACtB,IAAI,SAAS,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAChC,UAAU,EAAE,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,CAC7C,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAa,EAAE,EAAE;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC9D,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IAC3C,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAa,EAAE,CAAoC,EAAE,EAAE;QACtD,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC;QAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAE9B,kDAAkD;QAClD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;YACrD,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,WAAW,CAAC;YAC5D,WAAW,CAAC,QAAQ,CAAC,CAAC;YACtB,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;YACnE,UAAU,CAAC,SAAS,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,yBAAyB;QACzB,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QACpB,+BAA+B;QAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS;gBAAE,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAC5C,CAAC;QACD,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5B,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;YACvB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAChD,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAa,EAAE,CAAwC,EAAE,EAAE;QAC1D,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACrC,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;gBACjB,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;gBACtB,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC5B,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;YACxD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAChD,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAuB,EAAE,EAAE;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAC7F,IAAI,MAAM,EAAE,CAAC;YACX,WAAW,CAAC,MAAM,CAAC,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAClC,CAAC;IAEF,sCAAsC;IACtC,MAAM,uBAAuB,GAAG,WAAW,CACzC,CAAC,CAAsC,EAAE,EAAE;QACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACxE,IAAI,QAAQ,EAAE,CAAC;YACb,WAAW,CAAC,QAAQ,CAAC,CAAC;YACtB,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAClC,CAAC;IAEF,8CAA8C;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;QAC9C,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG;QACrB,oBAAoB;QACpB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CACrC;QACE,2BAA2B;QAC3B,8BAA8B,IAAI,EAAE;QACpC,YAAY,KAAK,KAAK,IAAI,oCAAoC;QAC9D,KAAK,IAAI,kCAAkC;QAC3C,QAAQ,IAAI,qCAAqC;QACjD,MAAM,CAAC,KAAK,CAAC,IAAI,mCAAmC;KACrD,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9B,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,iBACE,SAAS,EAAE,wDAAwD,IAAI,EAAE,EACzE,OAAO,EAAE,GAAG,OAAO,UAAU,aAE5B,KAAK,EACL,QAAQ,IAAI,eAAM,SAAS,EAAC,8BAA8B,iBAAa,MAAM,mBAAU,IAClF,CACT,EAGD,gBACE,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,YAAY,EAAC,eAAe,EAC5B,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,kCAAkC,iBAChC,MAAM,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,GAClB,EAEF,cACE,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAC,OAAO,gBACA,KAAK,IAAI,eAAe,sBAClB,WAAW,YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,MAAC,KAAK,CAAC,QAAQ,eACb,gBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAC/C,EAAE,EAAE,GAAG,OAAO,UAAU,KAAK,EAAE,EAC/B,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,YAAY,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,EAC1C,QAAQ,EAAE,GAAG,EAAE,GAA8B,CAAC,EAC9C,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE;gCACZ,eAAe,CAAC,KAAK,CAAC,CAAC;gCACvB,mDAAmD;gCACnD,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;4BACrC,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,KAAK,KAAK,CAAC,gBACrB,SAAS,KAAK,GAAG,CAAC,OAAO,MAAM,EAAE,kBAC/B,KAAK,IAAI,SAAS,EAChC,YAAY,EAAC,KAAK,GAClB,EAED,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,IAAI,CACrD,eAAM,SAAS,EAAC,+BAA+B,iBAAa,MAAM,uBAE3D,CACR,KA/BkB,KAAK,CAgCT,CAClB,CAAC,GACE,EAEL,SAAS,IAAI,CACZ,YAAG,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YACtE,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,YAAG,SAAS,EAAC,4BAA4B,EAAC,EAAE,EAAE,YAAY,YACvD,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,3 @@
+export { SmsOtpField } from './SmsOtpField';
+export { default } from './SmsOtpField';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SmsOtpField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/SpecList/SpecList.css

@@ -0,0 +1,69 @@
+/* SpecList Component Styles */
+
+.muka-spec-list {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ─── Row ─────────────────────────────────────────────── */
+
+.muka-spec-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-spec-row:first-child {
+  border-top: none;
+}
+
+/* ─── Label ───────────────────────────────────────────── */
+
+.muka-spec-row__label {
+  flex: 0 0 auto;
+  min-width: 40%;
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
+}
+
+/* ─── Value ───────────────────────────────────────────── */
+
+.muka-spec-row__value {
+  flex: 1 1 auto;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+  color: var(--color-text-default-default);
+}
+
+.muka-spec-row__value-text {
+  font-family: var(--text-body-md-medium-fontFamily);
+  font-weight: var(--text-body-md-medium-fontWeight);
+  font-size: var(--text-body-md-medium-fontSize);
+  line-height: var(--text-body-md-medium-lineHeight);
+}
+
+.muka-spec-row__hint {
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Compact density ─────────────────────────────────── */
+
+.muka-spec-list--compact .muka-spec-row {
+  padding: var(--spacing-2) var(--spacing-4);
+}

package/dist/esm/components/SpecList/SpecList.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './SpecList.css';
+/**
+ * SpecRow — a single key/value row inside a SpecList.
+ *
+ * Renders as a `<dt>` (label) + `<dd>` (value) pair for semantic correctness.
+ */
+export const SpecRow = ({ label, value, hint, className = '' }) => {
+    const classes = ['muka-spec-row', className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsx("dt", { className: "muka-spec-row__label", children: label }), _jsxs("dd", { className: "muka-spec-row__value", children: [_jsx("span", { className: "muka-spec-row__value-text", children: value }), hint && _jsx("span", { className: "muka-spec-row__hint", children: hint })] })] }));
+};
+/**
+ * SpecList — key/value list for technical specifications.
+ *
+ * Mobile-friendly alternative to `Table` when displaying flat key/value data
+ * (e.g. motorcycle specs, vehicle details). Each row is a `<dt>/<dd>` pair
+ * inside a `<dl>` for semantic accessibility.
+ */
+export const SpecList = ({ children, density = 'default', className = '', }) => {
+    const classes = ['muka-spec-list', `muka-spec-list--${density}`, className]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx("dl", { className: classes, children: children });
+};
+export default SpecList;
+//# sourceMappingURL=SpecList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,CAAC;AAkBxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,aAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,cAAI,SAAS,EAAC,sBAAsB,aAClC,eAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAmBF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,mBAAmB,OAAO,EAAE,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,aAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,2 @@
+export { SpecList, SpecRow } from './SpecList';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SpecList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC"}

package/dist/esm/components/Spinner/Spinner.css

@@ -0,0 +1,75 @@
+/* Spinner Component Styles */
+
+.muka-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-default-default);
+  line-height: 0;
+}
+
+.muka-spinner--subtle {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-spinner--inverse {
+  color: var(--color-text-inverse-default);
+}
+
+.muka-spinner__circle {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  animation: muka-spinner-rotate 0.7s linear infinite;
+  box-sizing: border-box;
+}
+
+/* ─── Sizes ───────────────────────────────────────────── */
+
+.muka-spinner--sm .muka-spinner__circle {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.muka-spinner--md .muka-spinner__circle {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.muka-spinner--lg .muka-spinner__circle {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+/* ─── Visually-hidden label ───────────────────────────── */
+
+.muka-spinner__sr-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+
+@keyframes muka-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-spinner__circle {
+    animation-duration: 2.5s;
+  }
+}