@12-apps/ui 6.99.0 → 6.101.0

package/dist/native/form/InputOTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/form/InputOTP/InputOTP.native.tsx","../../../src/components/form/InputOTP/InputOTP.hooks.native.ts","../../../src/components/form/InputOTP/InputOTP.core.ts","../../../src/components/form/InputOTP/InputOTP.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { Platform, StyleSheet, TextInput, View, type TextInputProps, type TextStyle } from 'react-native';\n\nimport { useNativeOtpDigits } from './InputOTP.hooks.native';\nimport { OTP_BORDER, OTP_FONT_PX, OTP_GAP_PX } from './InputOTP.metrics';\nimport type { InputOTPProps } from './InputOTP.types.native';\nimport { webAria, webDisabled } from '../../../platform/aria';\nimport { resolveFieldEdge } from '../../../tokens/field-edge.core';\nimport { fieldHeightPx } from '../../../tokens/field-height.core';\nimport type { UiPaletteKey, UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\nconst PALETTE_KEYS: readonly UiPaletteKey[] = ['primary', 'secondary', 'success', 'warning', 'info', 'danger', 'neutral'];\n\n/** The palette slot a `color` names; anything else is `primary`, as on the web. */\nfunction accentOf(theme: UiTheme, color: string): string {\n  const key = PALETTE_KEYS.find((candidate) => candidate === color) ?? 'primary';\n  return theme.palette[key].main;\n}\n\n/**\n * The keypad and the one-time-code fill, the web's `keypadProps` in React\n * Native's words: digits only for `numeric`, and on the FIRST box the hint that\n * lets the phone offer the code from an SMS — `oneTimeCode` on iOS,\n * `sms-otp` on Android.\n */\nfunction keypadProps(variant: string, index: number): Partial<TextInputProps> {\n  // A code is not prose: no capital on the first letter, no autocorrect.\n  if (variant !== 'numeric') return { autoCapitalize: 'none', autoCorrect: false, spellCheck: false };\n  const fill: Partial<TextInputProps> =\n    index === 0\n      ? Platform.select<Partial<TextInputProps>>({\n          ios: { textContentType: 'oneTimeCode', autoComplete: 'one-time-code' },\n          android: { autoComplete: 'sms-otp' },\n          default: { autoComplete: 'one-time-code' },\n        })\n      : {};\n  return { keyboardType: 'number-pad', inputMode: 'numeric', ...fill };\n}\n\n/** The first box takes a whole code in one change (see the web's `slotMaxLength`), except `masked`'s. */\nconst boxMaxLength = (variant: string, index: number, length: number): number =>\n  variant !== 'masked' && index === 0 ? length + 1 : 1;\n\ninterface BoxState {\n  focused: boolean;\n  error: boolean;\n  disabled: boolean;\n}\n\n/** One box's paint: the web slot's square, border and type, from the same numbers. */\nfunction boxStyle(theme: UiTheme, size: SizeValue, accent: string, state: BoxState): TextStyle {\n  const side = fieldHeightPx(theme.fieldHeight, size);\n  const edge = resolveFieldEdge(theme.palette.divider, theme.palette.background.paper);\n  // Error and disabled outrank focus, as in MUI's outlined input (and the native `Input`).\n  const borderColor = state.error\n    ? theme.palette.danger.main\n    : state.disabled\n      ? theme.palette.action.disabled\n      : state.focused\n        ? accent\n        : edge;\n  return {\n    width: side,\n    height: side,\n    borderRadius: theme.radius.field,\n    borderWidth: state.focused ? OTP_BORDER.focused : OTP_BORDER.rest,\n    borderColor,\n    backgroundColor: theme.palette.background.paper,\n    color: state.disabled ? theme.palette.text.disabled : theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: OTP_FONT_PX[size],\n    fontWeight: '600',\n    textAlign: 'center',\n    padding: 0,\n  };\n}\n\n/**\n * The native `InputOTP`: one row of boxes, one character each, that moves\n * forward as it is typed, steps back on Backspace in an empty box, and spreads\n * a code the phone fills (or a paste) across every box from the first.\n *\n * The same props as the web one; the row is a `group` named by `aria-label`,\n * each box is `${dataTestId}-slot-${index}`. Gaps against the web:\n * `NATIVE-NOTES.md`.\n */\nexport const InputOTP = React.forwardRef<View, InputOTPProps>((props, ref) => {\n  const {\n    variant = 'numeric',\n    color = 'primary',\n    size = 'md',\n    length = 6,\n    value = '',\n    onChange,\n    onComplete,\n    autoFocus = false,\n    error = false,\n    disabled = false,\n    dataTestId,\n    style,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const theme = useUiTheme();\n  const accent = accentOf(theme, color);\n  const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null);\n  const { digits, boxRefs, handleChangeText, handleKey } = useNativeOtpDigits({\n    variant,\n    length,\n    value,\n    onChange,\n    onComplete,\n  });\n\n  return (\n    <View ref={ref} testID={dataTestId} role=\"group\" aria-label={ariaLabel} style={[styles.row, style]}>\n      {digits.map((digit, index) => (\n        <TextInput\n          key={index}\n          ref={(element) => {\n            boxRefs.current[index] = element;\n          }}\n          testID={dataTestId ? `${dataTestId}-slot-${index}` : undefined}\n          value={variant === 'masked' ? (digit ? '•' : '') : digit}\n          onChangeText={(text) => handleChangeText(index, text)}\n          onKeyPress={(event) => handleKey(index, event.nativeEvent.key)}\n          onFocus={() => setFocusedIndex(index)}\n          onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}\n          autoFocus={autoFocus && index === 0}\n          editable={!disabled}\n          aria-disabled={disabled}\n          {...webAria({ 'aria-invalid': error })}\n          maxLength={boxMaxLength(variant, index, length)}\n          style={boxStyle(theme, size, accent, { focused: focusedIndex === index && !disabled, error, disabled })}\n          {...webDisabled(disabled)}\n          {...keypadProps(variant, index)}\n        />\n      ))}\n    </View>\n  );\n});\n\nInputOTP.displayName = 'InputOTP';\n\nconst styles = StyleSheet.create({\n  row: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: OTP_GAP_PX,\n  },\n});\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { codeOfFill, firstSlotFill, isAllowed, padTo } from './InputOTP.core';\n\n/** What a box needs from the element behind it: to take the focus. */\ninterface Focusable {\n  focus: () => void;\n}\n\ninterface NativeOtpInput {\n  variant: string;\n  length: number;\n  value: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n}\n\n/**\n * The native boxes' digits — the web hook's rules (`InputOTP.hooks.ts`) over\n * React Native's events: `onChangeText` carries the box's whole new text and\n * `onKeyPress` carries only the key's name, and there is no paste event at\n * all. A pasted or SMS-filled code arrives as a change of the FIRST box, whose\n * `maxLength` is the code's length plus one for exactly that reason, and is\n * spread across the boxes by the same `firstSlotFill` / `codeOfFill` the web\n * uses.\n */\nexport const useNativeOtpDigits = ({ variant, length, value, onChange, onComplete }: NativeOtpInput) => {\n  const [digits, setDigits] = useState<string[]>(() => padTo([], length));\n  const boxRefs = useRef<(Focusable | null)[]>([]);\n\n  useEffect(() => {\n    setDigits(padTo(value.split('').slice(0, length), length));\n  }, [value, length]);\n\n  const focusBox = useCallback((index: number) => boxRefs.current[index]?.focus(), []);\n\n  const publish = useCallback(\n    (next: string) => {\n      onChange?.(next);\n      if (next.length === length) onComplete?.(next);\n    },\n    [length, onChange, onComplete],\n  );\n\n  /** A whole code laid across the boxes from the first one. */\n  const spread = useCallback(\n    (text: string) => {\n      const code = text.slice(0, length);\n      if (!code || !isAllowed(variant, code)) return;\n      setDigits(padTo(code.split(''), length));\n      publish(code);\n      focusBox(Math.min(code.length, length - 1));\n    },\n    [variant, length, publish, focusBox],\n  );\n\n  const handleChangeText = useCallback(\n    (index: number, text: string) => {\n      // The web's paste spreads a code for EVERY variant; React Native has no\n      // paste event, so a code arrives as a change of the first box, read by\n      // the numeric rule for `alphanumeric` too (`masked` shows a bullet, whose\n      // text no longer holds the digit it hides: it keeps one character a box).\n      const fill = firstSlotFill(variant === 'alphanumeric' ? 'numeric' : variant, index, text, digits[0] ?? '');\n      if (fill) return fill === 'code' ? spread(codeOfFill(text, digits[0] ?? '', length)) : undefined;\n      if (!isAllowed(variant, text)) return;\n      const next = [...digits];\n      next[index] = text.slice(-1);\n      setDigits(next);\n      publish(next.join(''));\n      if (text && index < length - 1) focusBox(index + 1);\n    },\n    [variant, digits, length, publish, focusBox, spread],\n  );\n\n  /** Backspace in a box that is already empty steps back to the one before. */\n  const handleKey = useCallback(\n    (index: number, key: string) => {\n      if (key === 'Backspace' && !digits[index] && index > 0) focusBox(index - 1);\n    },\n    [digits, focusBox],\n  );\n\n  return { digits, boxRefs, handleChangeText, handleKey };\n};\n","/**\n * The digits' arithmetic, shared by both renderers' hooks (`InputOTP.hooks.ts`\n * on the web, `InputOTP.hooks.native.ts` on React Native). Pure: no React, no\n * DOM, no react-native.\n */\n\n/**\n * What each variant accepts. `masked` constrains nothing — it only changes what\n * is drawn — so it has no pattern here.\n */\nexport const PATTERNS: Record<string, RegExp> = {\n  numeric: /^\\d*$/,\n  alphanumeric: /^[a-zA-Z0-9]*$/,\n};\n\n/** Whether `text` is something this variant will take. */\nexport const isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/).test(text);\n\n/** The digit array is always `length` long, blank-padded on the right. */\nexport const padTo = (digits: string[], length: number) =>\n  Array.from({ length }, (_, i) => digits[i] ?? '');\n\n/**\n * What a change to the numeric FIRST slot is, now that its `maxLength` is the\n * code's length rather than 1 (FUT-4144).\n *\n * That slot carries `one-time-code`, and the phone's SMS fill (or a password\n * manager) writes the WHOLE code into it as one change, not a paste — kept to\n * one character, the code lost every digit but the last. So:\n *\n * - `overtype`: a keystroke into the already-filled slot (its old character\n *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.\n * - `code`: anything else longer than one character, written in one go.\n *   Spread across the slots like a paste.\n *\n * Every other slot and variant keeps `maxLength={1}` and never gets here.\n */\nexport function firstSlotFill(variant: string, index: number, inputValue: string, current: string) {\n  if (variant !== 'numeric' || index !== 0 || inputValue.length < 2) return null;\n  const overtype = inputValue.length === 2 && current !== '' && inputValue.includes(current);\n  return overtype ? 'overtype' : 'code';\n}\n\n/**\n * The code inside a first-slot fill. A phone that INSERTS the SMS code at the\n * caret rather than replacing the slot leaves the digit already there in\n * front: `4` + `482913` arrives as `4482913`, which spread as-is would give\n * `448291`. Longer than the code and led by that digit: the digit is dropped.\n */\nexport const codeOfFill = (inputValue: string, current: string, length: number): string =>\n  inputValue.length > length && current !== '' && inputValue.startsWith(current) ? inputValue.slice(1) : inputValue;\n","/**\n * The numbers both renderers read (see `NATIVE.md`, \"Numbers\").\n *\n * Each box's type size, in design px, per size step; its side is the theme's\n * field height for that step (a square), its weight 600.\n */\nexport const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {\n  xs: 12,\n  sm: 14,\n  md: 16,\n  lg: 18,\n  xl: 20,\n};\n\n/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */\nexport const OTP_GAP_PX = 8;\n\n/** The border: 1px at rest, 2px focused (MUI's focused outline). */\nexport const OTP_BORDER = { rest: 1, focused: 2 } as const;\n"],"mappings":"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","names":[]}

package/dist/navigation/AppHeader.js

@@ -1,7 +1,7 @@
 import "../chunk-5CUKSNWG.js";
 import {
   AppHeaderDetails
-} from "../chunk-VMACQT3T.js";
+} from "../chunk-XH7UDC5Y.js";
 import {
   AppHeader,
   AppHeader_default
@@ -18,19 +18,19 @@ import {
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import "../chunk-7TENMQNQ.js";
+import "../chunk-XZMSRHFD.js";
+import "../chunk-3ROCD7XF.js";
 import "../chunk-LYVTJLCF.js";
 import "../chunk-CRN4KKNI.js";
 import "../chunk-OHA2PAAA.js";
-import "../chunk-3ROCD7XF.js";
 import "../chunk-ABZJNKR6.js";
 import "../chunk-IM4DMKH4.js";
 import "../chunk-MDU5Q2HW.js";
-import "../chunk-KWBMM6MJ.js";
+import "../chunk-RZKKWIGQ.js";
+import "../chunk-GYXUCS37.js";
 import "../chunk-5UX5QAFJ.js";
-import "../chunk-Z2JH5KW5.js";
 import "../chunk-AL5E624U.js";
-import "../chunk-GYXUCS37.js";
+import "../chunk-Z2JH5KW5.js";
 import "../chunk-LV7LSPBF.js";
 import "../chunk-YOXYSAUI.js";
 import "../chunk-PPEHBI5O.js";

package/dist/navigation/SectionNav.js

@@ -1,27 +1,27 @@
 import "../chunk-R26KYJHK.js";
 import {
   SectionNav
-} from "../chunk-IJVBLU25.js";
+} from "../chunk-KJZ4PINO.js";
 import {
   sectionNavBarInset
-} from "../chunk-ULC4SCFC.js";
-import "../chunk-7MLT66DE.js";
-import "../chunk-SNWCT6JN.js";
-import "../chunk-ILJ3FXIC.js";
+} from "../chunk-NLJ7LL6H.js";
+import "../chunk-K33X3PDT.js";
+import "../chunk-AMIUZRDQ.js";
+import "../chunk-MM3QESLI.js";
 import {
   RaisedActionButton
-} from "../chunk-UKUGSU3Y.js";
-import "../chunk-24HHUCWB.js";
+} from "../chunk-L4V7FZJI.js";
+import "../chunk-LDCZPZPD.js";
 import "../chunk-YCCWJ5XQ.js";
 import "../chunk-TMSWLFL4.js";
 import "../chunk-JJTJ7DCV.js";
 import "../chunk-PUFA7FQ7.js";
 import "../chunk-5AK2EZG5.js";
-import "../chunk-N5PVD4J5.js";
-import "../chunk-6C5D6O3D.js";
+import "../chunk-6DO672AG.js";
 import "../chunk-ZNCYCE7L.js";
 import "../chunk-2L3VRVRE.js";
 import "../chunk-BJE3XHD4.js";
+import "../chunk-6C5D6O3D.js";
 import "../chunk-3UIDKLML.js";
 import "../chunk-PYC4CWCQ.js";
 import "../chunk-VWKMN3ZZ.js";

package/dist/types/components/form/InputOTP/InputOTP.base.d.ts

@@ -0,0 +1,63 @@
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR (see `Button.base.ts`).
+ *
+ * No MUI and no react-native here: this file ships in both declaration
+ * outputs, and a native consumer has no `@mui/material` to resolve against.
+ */
+export interface InputOTPBaseProps {
+    /**
+     * The variant of the OTP input
+     */
+    variant?: 'numeric' | 'alphanumeric' | 'masked';
+    /**
+     * The color theme of the OTP input
+     */
+    color?: ColorValue;
+    /**
+     * The size of the OTP input
+     */
+    size?: SizeValue;
+    /**
+     * Number of OTP digits
+     */
+    length?: number;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Called when value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when OTP is complete
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input should have glass morphism effect
+     */
+    glass?: boolean;
+    /**
+     * Whether the input should have gradient effects
+     */
+    gradient?: boolean;
+    /**
+     * Whether to auto-focus first input
+     */
+    autoFocus?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for automated testing
+     * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
+     */
+    dataTestId?: string;
+}
+//# sourceMappingURL=InputOTP.base.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;GAKG;AAEH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/components/form/InputOTP/InputOTP.core.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The digits' arithmetic, shared by both renderers' hooks (`InputOTP.hooks.ts`
+ * on the web, `InputOTP.hooks.native.ts` on React Native). Pure: no React, no
+ * DOM, no react-native.
+ */
+/**
+ * What each variant accepts. `masked` constrains nothing — it only changes what
+ * is drawn — so it has no pattern here.
+ */
+export declare const PATTERNS: Record<string, RegExp>;
+/** Whether `text` is something this variant will take. */
+export declare const isAllowed: (variant: string, text: string) => boolean;
+/** The digit array is always `length` long, blank-padded on the right. */
+export declare const padTo: (digits: string[], length: number) => string[];
+/**
+ * What a change to the numeric FIRST slot is, now that its `maxLength` is the
+ * code's length rather than 1 (FUT-4144).
+ *
+ * That slot carries `one-time-code`, and the phone's SMS fill (or a password
+ * manager) writes the WHOLE code into it as one change, not a paste — kept to
+ * one character, the code lost every digit but the last. So:
+ *
+ * - `overtype`: a keystroke into the already-filled slot (its old character
+ *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
+ * - `code`: anything else longer than one character, written in one go.
+ *   Spread across the slots like a paste.
+ *
+ * Every other slot and variant keeps `maxLength={1}` and never gets here.
+ */
+export declare function firstSlotFill(variant: string, index: number, inputValue: string, current: string): "code" | "overtype" | null;
+/**
+ * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
+ * caret rather than replacing the slot leaves the digit already there in
+ * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
+ * `448291`. Longer than the code and led by that digit: the digit is dropped.
+ */
+export declare const codeOfFill: (inputValue: string, current: string, length: number) => string;
+//# sourceMappingURL=InputOTP.core.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.core.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.core.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG3C,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,EAAE,MAAM,MAAM,YAA2C,CAAC;AAEnG,0EAA0E;AAC1E,eAAO,MAAM,KAAK,GAAI,QAAQ,MAAM,EAAE,EAAE,QAAQ,MAAM,aACH,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,8BAIhG;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,EAAE,SAAS,MAAM,EAAE,QAAQ,MAAM,KAAG,MACkC,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import type { InputOTPProps } from './InputOTP.types';
-export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;
+export declare const InputOTP: React.ForwardRefExoticComponent<import("./InputOTP.base").InputOTPBaseProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=InputOTP.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAyDtD,eAAO,MAAM,QAAQ,sFAsDnB,CAAC"}
+{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAgE1C,eAAO,MAAM,QAAQ,oHAsDnB,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.ts"],"names":[],"mappings":"AAiDA,UAAU,QAAQ;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,kDAAkD,QAAQ;;;+BAqC3E,MAAM,cAAc,MAAM;2BAkB1B,MAAM,KAAK,KAAK,CAAC,aAAa;qBAelC,KAAK,CAAC,cAAc;CAQ3B,CAAC"}
+{"version":3,"file":"InputOTP.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.ts"],"names":[],"mappings":"AAIA,UAAU,QAAQ;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,kDAAkD,QAAQ;;;+BAqC3E,MAAM,cAAc,MAAM;2BAkB1B,MAAM,KAAK,KAAK,CAAC,aAAa;qBAelC,KAAK,CAAC,cAAc;CAQ3B,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.metrics.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The numbers both renderers read (see `NATIVE.md`, "Numbers").
+ *
+ * Each box's type size, in design px, per size step; its side is the theme's
+ * field height for that step (a square), its weight 600.
+ */
+export declare const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
+/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */
+export declare const OTP_GAP_PX = 8;
+/** The border: 1px at rest, 2px focused (MUI's focused outline). */
+export declare const OTP_BORDER: {
+    readonly rest: 1;
+    readonly focused: 2;
+};
+//# sourceMappingURL=InputOTP.metrics.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.metrics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAMxE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;CAAmC,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA2DtE,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAkC7D,CAAC"}
+{"version":3,"file":"InputOTP.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAoDtE,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,OAAO,YAAY,KAAG,SAkC7D,CAAC"}

package/dist/types/components/form/InputOTP/InputOTP.types.d.ts

@@ -1,57 +1,4 @@
-import type { ColorValue, SizeValue } from '../../../tokens/scales';
-export interface InputOTPProps {
-    /**
-     * The variant of the OTP input
-     */
-    variant?: 'numeric' | 'alphanumeric' | 'masked';
-    /**
-     * The color theme of the OTP input
-     */
-    color?: ColorValue;
-    /**
-     * The size of the OTP input
-     */
-    size?: SizeValue;
-    /**
-     * Number of OTP digits
-     */
-    length?: number;
-    /**
-     * Current value
-     */
-    value?: string;
-    /**
-     * Called when value changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Called when OTP is complete
-     */
-    onComplete?: (value: string) => void;
-    /**
-     * Whether the input should have glass morphism effect
-     */
-    glass?: boolean;
-    /**
-     * Whether the input should have gradient effects
-     */
-    gradient?: boolean;
-    /**
-     * Whether to auto-focus first input
-     */
-    autoFocus?: boolean;
-    /**
-     * Error state
-     */
-    error?: boolean;
-    /**
-     * Disabled state
-     */
-    disabled?: boolean;
-    /**
-     * Test ID for automated testing
-     * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
-     */
-    dataTestId?: string;
-}
+import type { InputOTPBaseProps } from './InputOTP.base';
+/** The web `InputOTP`'s props: the shared contract, nothing MUI adds. */
+export type InputOTPProps = InputOTPBaseProps;
 //# sourceMappingURL=InputOTP.types.d.ts.map

package/dist/types/components/form/InputOTP/InputOTP.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"InputOTP.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,yEAAyE;AACzE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.base.d.ts

@@ -0,0 +1,63 @@
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR (see `Button.base.ts`).
+ *
+ * No MUI and no react-native here: this file ships in both declaration
+ * outputs, and a native consumer has no `@mui/material` to resolve against.
+ */
+export interface InputOTPBaseProps {
+    /**
+     * The variant of the OTP input
+     */
+    variant?: 'numeric' | 'alphanumeric' | 'masked';
+    /**
+     * The color theme of the OTP input
+     */
+    color?: ColorValue;
+    /**
+     * The size of the OTP input
+     */
+    size?: SizeValue;
+    /**
+     * Number of OTP digits
+     */
+    length?: number;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Called when value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when OTP is complete
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input should have glass morphism effect
+     */
+    glass?: boolean;
+    /**
+     * Whether the input should have gradient effects
+     */
+    gradient?: boolean;
+    /**
+     * Whether to auto-focus first input
+     */
+    autoFocus?: boolean;
+    /**
+     * Error state
+     */
+    error?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Test ID for automated testing
+     * Container will have this ID, and individual slots will have {dataTestId}-slot-{index}
+     */
+    dataTestId?: string;
+}
+//# sourceMappingURL=InputOTP.base.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;GAKG;AAEH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types-native/components/form/InputOTP/InputOTP.core.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The digits' arithmetic, shared by both renderers' hooks (`InputOTP.hooks.ts`
+ * on the web, `InputOTP.hooks.native.ts` on React Native). Pure: no React, no
+ * DOM, no react-native.
+ */
+/**
+ * What each variant accepts. `masked` constrains nothing — it only changes what
+ * is drawn — so it has no pattern here.
+ */
+export declare const PATTERNS: Record<string, RegExp>;
+/** Whether `text` is something this variant will take. */
+export declare const isAllowed: (variant: string, text: string) => boolean;
+/** The digit array is always `length` long, blank-padded on the right. */
+export declare const padTo: (digits: string[], length: number) => string[];
+/**
+ * What a change to the numeric FIRST slot is, now that its `maxLength` is the
+ * code's length rather than 1 (FUT-4144).
+ *
+ * That slot carries `one-time-code`, and the phone's SMS fill (or a password
+ * manager) writes the WHOLE code into it as one change, not a paste — kept to
+ * one character, the code lost every digit but the last. So:
+ *
+ * - `overtype`: a keystroke into the already-filled slot (its old character
+ *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
+ * - `code`: anything else longer than one character, written in one go.
+ *   Spread across the slots like a paste.
+ *
+ * Every other slot and variant keeps `maxLength={1}` and never gets here.
+ */
+export declare function firstSlotFill(variant: string, index: number, inputValue: string, current: string): "overtype" | "code" | null;
+/**
+ * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
+ * caret rather than replacing the slot leaves the digit already there in
+ * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
+ * `448291`. Longer than the code and led by that digit: the digit is dropped.
+ */
+export declare const codeOfFill: (inputValue: string, current: string, length: number) => string;
+//# sourceMappingURL=InputOTP.core.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.core.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.core.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAG3C,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,EAAE,MAAM,MAAM,YAA2C,CAAC;AAEnG,0EAA0E;AAC1E,eAAO,MAAM,KAAK,GAAI,QAAQ,MAAM,EAAE,EAAE,QAAQ,MAAM,aACH,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,8BAIhG;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,EAAE,SAAS,MAAM,EAAE,QAAQ,MAAM,KAAG,MACkC,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.hooks.native.d.ts

@@ -0,0 +1,28 @@
+/** What a box needs from the element behind it: to take the focus. */
+interface Focusable {
+    focus: () => void;
+}
+interface NativeOtpInput {
+    variant: string;
+    length: number;
+    value: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+}
+/**
+ * The native boxes' digits — the web hook's rules (`InputOTP.hooks.ts`) over
+ * React Native's events: `onChangeText` carries the box's whole new text and
+ * `onKeyPress` carries only the key's name, and there is no paste event at
+ * all. A pasted or SMS-filled code arrives as a change of the FIRST box, whose
+ * `maxLength` is the code's length plus one for exactly that reason, and is
+ * spread across the boxes by the same `firstSlotFill` / `codeOfFill` the web
+ * uses.
+ */
+export declare const useNativeOtpDigits: ({ variant, length, value, onChange, onComplete }: NativeOtpInput) => {
+    digits: string[];
+    boxRefs: import("react").RefObject<(Focusable | null)[]>;
+    handleChangeText: (index: number, text: string) => void;
+    handleKey: (index: number, key: string) => void;
+};
+export {};
+//# sourceMappingURL=InputOTP.hooks.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.hooks.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.hooks.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.hooks.native.ts"],"names":[],"mappings":"AAIA,sEAAsE;AACtE,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,kDAAkD,cAAc;;;8BA+BvF,MAAM,QAAQ,MAAM;uBAmBpB,MAAM,OAAO,MAAM;CAO9B,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.metrics.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The numbers both renderers read (see `NATIVE.md`, "Numbers").
+ *
+ * Each box's type size, in design px, per size step; its side is the theme's
+ * field height for that step (a square), its weight 600.
+ */
+export declare const OTP_FONT_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
+/** The gap between two boxes: MUI's `gap: 1`, one 8px spacing unit. */
+export declare const OTP_GAP_PX = 8;
+/** The border: 1px at rest, 2px focused (MUI's focused outline). */
+export declare const OTP_BORDER: {
+    readonly rest: 1;
+    readonly focused: 2;
+};
+//# sourceMappingURL=InputOTP.metrics.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.metrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.metrics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAMxE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,oEAAoE;AACpE,eAAO,MAAM,UAAU;;;CAAmC,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.native.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { InputOTPProps } from './InputOTP.types.native';
+/**
+ * The native `InputOTP`: one row of boxes, one character each, that moves
+ * forward as it is typed, steps back on Backspace in an empty box, and spreads
+ * a code the phone fills (or a paste) across every box from the first.
+ *
+ * The same props as the web one; the row is a `group` named by `aria-label`,
+ * each box is `${dataTestId}-slot-${index}`. Gaps against the web:
+ * `NATIVE-NOTES.md`.
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<View>>;
+//# sourceMappingURL=InputOTP.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmC,IAAI,EAAuC,MAAM,cAAc,CAAC;AAI1G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AA0E7D;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,4EAsDnB,CAAC"}

package/dist/types-native/components/form/InputOTP/InputOTP.types.native.d.ts

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { InputOTPBaseProps } from './InputOTP.base';
+/**
+ * The native `InputOTP`'s props: the shared contract, plus the group's
+ * accessible name (the web takes it as a plain `aria-label` attribute) and the
+ * row's `style`.
+ */
+export interface InputOTPProps extends InputOTPBaseProps {
+    /** Names the boxes together, as one group. */
+    'aria-label'?: string;
+    /** The row's own style; the boxes keep theirs. */
+    style?: StyleProp<ViewStyle>;
+}
+//# sourceMappingURL=InputOTP.types.native.d.ts.map

package/dist/types-native/components/form/InputOTP/InputOTP.types.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/InputOTP.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B"}

package/dist/types-native/components/form/InputOTP/index.native.d.ts

@@ -0,0 +1,3 @@
+export { InputOTP } from './InputOTP.native';
+export type { InputOTPProps } from './InputOTP.types.native';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/components/form/InputOTP/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/InputOTP/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-LFECE4R7.js";
+} from "./chunk-4EDCF7TC.js";
 import "./chunk-DQ22UKMZ.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-W56KN53D.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-L6IDPTNX.js";
 import "./chunk-EOQ6EKTS.js";
 import "./chunk-6ZZGK5DT.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.99.0",
+  "version": "6.101.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -433,6 +433,10 @@
       "default": "./dist/form/Input/outlined.js"
     },
     "./form/InputOTP": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/InputOTP/index.native.d.ts",
+        "default": "./dist/native/form/InputOTP.js"
+      },
       "types": "./dist/types/components/form/InputOTP/index.d.ts",
       "default": "./dist/form/InputOTP.js"
     },

package/src/components/data-display/RegionMap/RegionMapPin.tsx

@@ -376,7 +376,7 @@ export function ScaleBar({
       aria-hidden
       sx={{ position: 'absolute', left: 0, right: 0, bottom: rem(theme, 10), pointerEvents: 'none', zIndex: 1 }}
     >
-      <Box component="span" sx={{ display: 'block', ml: rem(theme, 10), fontSize: rem(theme, 11), color: 'text.secondary' }}>
+      <Box component="span" sx={{ display: 'block', ml: rem(theme, 10), fontSize: rem(theme, 12), color: 'text.secondary' }}>
         {copy.scale(metres)}
       </Box>
       <Box