@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/utils/color.js

@@ -1,52 +1 @@
-"use strict";
-
-/**
- * The tint a pressed control paints over a fill in one of the theme's accent
- * colours (primary, success, warning, error). The theme's own
- * `surface.pressed` is meant for its surfaces: a dark wash in the light
- * theme and a WHITE wash in the dark theme, which on a coloured fill reads
- * as the control flashing white. A coloured fill darkens on press in either
- * theme, so this is fixed rather than themed.
- */
-export const ACCENT_PRESSED_TINT = 'rgba(0, 0, 0, 0.12)';
-
-/**
- * `#RRGGBB` → `#RRGGBBAA`: a tone colour at the given opacity, for a tinted
- * fill behind text drawn in the full tone. Non-hex colours (named, `rgb()`,
- * short or 8-digit hex) can't be suffixed; those return `fallback`, which a
- * caller sets to the nearest flat theme surface.
- */
-export const tintOf = (color, opacity, fallback) => {
-  const hex = /^#([0-9a-f]{6})$/i.exec(color);
-  if (!hex) {
-    return fallback;
-  }
-  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
-  return `#${hex[1]}${alpha}`;
-};
-const channelsOf = color => {
-  const hex = /^#([0-9a-f]{6})$/i.exec(color);
-  if (!hex) {
-    return null;
-  }
-  const n = Number.parseInt(hex[1], 16);
-  return [n >> 16 & 255, n >> 8 & 255, n & 255];
-};
-
-/**
- * The OPAQUE colour of `color` at `opacity` laid over `over`: what `tintOf`
- * would look like on that surface, as a flat `#RRGGBB`. For a tint that sits
- * on something it must hide (a badge over a photo), where a translucent tint
- * would let the photo through. Either colour not a 6-digit hex returns
- * `fallback`.
- */
-export const blendOf = (color, opacity, over, fallback) => {
-  const top = channelsOf(color);
-  const base = channelsOf(over);
-  if (!top || !base) {
-    return fallback;
-  }
-  const mix = top.map((c, i) => Math.round(c * opacity + base[i] * (1 - opacity)));
-  return `#${mix.map(c => c.toString(16).padStart(2, '0')).join('')}`.toUpperCase();
-};
-//# sourceMappingURL=color.js.map
+export const ACCENT_PRESSED_TINT="rgba(0, 0, 0, 0.12)";export const tintOf=(t,r,n)=>{const e=/^#([0-9a-f]{6})$/i.exec(t);if(!e)return n;const o=Math.round(255*r).toString(16).padStart(2,"0");return`#${e[1]}${o}`};const channelsOf=t=>{const r=/^#([0-9a-f]{6})$/i.exec(t);if(!r)return null;const n=Number.parseInt(r[1],16);return[n>>16&255,n>>8&255,255&n]};export const blendOf=(t,r,n,e)=>{const o=channelsOf(t),a=channelsOf(n);if(!o||!a)return e;return`#${o.map((t,n)=>Math.round(t*r+a[n]*(1-r))).map(t=>t.toString(16).padStart(2,"0")).join("")}`.toUpperCase()};

package/lib/module/utils/corners.js

@@ -1,18 +1 @@
-"use strict";
-
-/**
- * The smooth "squircle" corner, the app-side counterpart of the website's CSS
- * `corner-shape: squircle`. Spread it next to any `borderRadius`.
- *
- * iOS draws Apple's continuous curve through React Native's own
- * `borderCurve: 'continuous'`; no dependency. Android has no equivalent and
- * ignores the key, so it keeps the circular corner (a deliberate decision,
- * 16-Sep-2026: drawing the shape there means an SVG path behind every field,
- * card and button, with path-stroked borders, and was not worth it at the
- * library's 10 to 16 px radii). The three curves, CSS squircle, Apple's and
- * Figma's, look alike but are not identical.
- */
-export const smoothCorners = {
-  borderCurve: 'continuous'
-};
-//# sourceMappingURL=corners.js.map
+export const smoothCorners={borderCurve:"continuous"};

package/lib/module/utils/dimensions.js

@@ -1,4 +1 @@
-"use strict";
-
-export { Breakpoints, isScreenSize, isTablet, ScreenDimensions, useScreenDimensions } from "./responsive.js";
-//# sourceMappingURL=dimensions.js.map
+export{Breakpoints,isScreenSize,isTablet,ScreenDimensions,useScreenDimensions}from"./responsive.js";

package/lib/module/utils/feedback.js

@@ -1,70 +1 @@
-"use strict";
-
-import { triggerHaptic } from "./hapticUtils.js";
-
-/**
- * What the interaction MEANT, not which vibration to play.
- *
- * Call sites that pick a `HapticType` directly end up disagreeing with each
- * other — one screen fires `impactMedium` on delete, the next fires
- * `notificationWarning`, and the app stops speaking one language. Naming the
- * intent moves that decision here, once.
- */
-
-const INTENT_HAPTIC = {
-  tap: 'impactLight',
-  select: 'selection',
-  longPress: 'impactMedium',
-  created: 'impactMedium',
-  deleted: 'notificationWarning',
-  restored: 'notificationSuccess',
-  toggledOn: 'impactMedium',
-  toggledOff: 'impactLight',
-  succeeded: 'notificationSuccess',
-  warned: 'notificationWarning',
-  failed: 'notificationError'
-};
-let hapticsEnabled = true;
-
-/**
- * Gate every intent from one place, so an app's "haptics" setting needs no
- * per-component plumbing.
- */
-export const configureFeedback = prefs => {
-  hapticsEnabled = prefs.haptics;
-};
-export const isFeedbackEnabled = () => hapticsEnabled;
-const fire = intent => {
-  if (!hapticsEnabled) {
-    return;
-  }
-  triggerHaptic(INTENT_HAPTIC[intent]);
-};
-
-/** Resolve an intent to its haptic type without firing it. */
-export const hapticForIntent = intent => INTENT_HAPTIC[intent];
-export const feedback = {
-  /** A plain press: button, row, chip. */
-  tap: () => fire('tap'),
-  /** Moving between options — segmented control, picker wheel, tab. */
-  select: () => fire('select'),
-  /** A long-press threshold being crossed. */
-  longPress: () => fire('longPress'),
-  /** Something now exists that did not before. */
-  created: () => fire('created'),
-  /** Something was destroyed or removed. */
-  deleted: () => fire('deleted'),
-  /** An undo landed. */
-  restored: () => fire('restored'),
-  /** A binary control turned on / off — switch, checkbox, favourite. */
-  toggled: on => fire(on ? 'toggledOn' : 'toggledOff'),
-  /** A flow finished successfully. */
-  succeeded: () => fire('succeeded'),
-  /** A recoverable problem the user should notice. */
-  warned: () => fire('warned'),
-  /** A failure. */
-  failed: () => fire('failed'),
-  /** Escape hatch for an intent held in a variable. */
-  fire
-};
-//# sourceMappingURL=feedback.js.map
+import{triggerHaptic as e}from"./hapticUtils.js";const t={tap:"impactLight",select:"selection",longPress:"impactMedium",created:"impactMedium",deleted:"notificationWarning",restored:"notificationSuccess",toggledOn:"impactMedium",toggledOff:"impactLight",succeeded:"notificationSuccess",warned:"notificationWarning",failed:"notificationError"};let c=!0;export const configureFeedback=e=>{c=e.haptics};export const isFeedbackEnabled=()=>c;const fire=i=>{c&&e(t[i])};export const hapticForIntent=e=>t[e];export const feedback={tap:()=>fire("tap"),select:()=>fire("select"),longPress:()=>fire("longPress"),created:()=>fire("created"),deleted:()=>fire("deleted"),restored:()=>fire("restored"),toggled:e=>fire(e?"toggledOn":"toggledOff"),succeeded:()=>fire("succeeded"),warned:()=>fire("warned"),failed:()=>fire("failed"),fire:fire};

package/lib/module/utils/hapticUtils.js

@@ -1,86 +1 @@
-"use strict";
-
-import * as Haptics from 'expo-haptics';
-import { Platform, Vibration } from 'react-native';
-let hapticImpl = null;
-
-/**
- * Only what a test or the showcase injected. The default is expo-haptics, which
- * this module imports directly: `expo` is a required peer, so the 48 components
- * that fire haptics get them without any app wiring anything.
- *
- * The Vibration fallback below is now only the FAILURE path — a device whose
- * haptic engine is disabled rejects, and Android still gets something.
- */
-
-const fallback = type => {
-  if (Platform.OS === 'android') {
-    const map = {
-      selection: 5,
-      impactLight: 10,
-      impactMedium: 20,
-      impactHeavy: 30,
-      notificationSuccess: 15,
-      notificationWarning: 25,
-      notificationError: 40
-    };
-    try {
-      // Vibration.vibrate throws a SecurityException when the app has not
-      // declared android.permission.VIBRATE. Haptics are a non-essential
-      // enhancement, so a missing permission degrades to a no-op.
-      Vibration.vibrate(map[type] ?? 10);
-    } catch {
-      /* ignore: no VIBRATE permission or vibrator unavailable */
-    }
-  }
-};
-
-/**
- * expo-haptics, which splits what this module treats as one vocabulary across
- * three functions. The promises are deliberately swallowed: the seam is
- * synchronous, a device with the engine disabled rejects, and an unhandled
- * rejection from a button press must never become a crash.
- */
-const EXPO_HANDLERS = {
-  selection: () => Haptics.selectionAsync(),
-  impactLight: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
-  impactMedium: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
-  impactHeavy: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
-  notificationSuccess: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
-  notificationWarning: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning),
-  notificationError: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
-};
-export const triggerHaptic = (type = 'selection') => {
-  if (hapticImpl) {
-    try {
-      hapticImpl(type);
-      return;
-    } catch {
-      /* ignore */
-    }
-  }
-  const handler = EXPO_HANDLERS[type];
-  if (handler) {
-    handler().catch(() => fallback(type));
-    return;
-  }
-  fallback(type);
-};
-
-/**
- * Replace the haptic backend. Intended for TESTS and for the showcase; an app
- * gets expo-haptics without wiring anything. Pass `null` to restore it.
- */
-export const setHapticImplementation = impl => {
-  hapticImpl = impl;
-};
-
-/**
- * Resolves a component's `haptic` prop to the type that should fire, or null
- * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
- * falls back to the component's sensible default. Pair with `triggerHaptic`:
- *   const h = resolveHaptic(haptic, 'selection');
- *   if (h) triggerHaptic(h);
- */
-export const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
-//# sourceMappingURL=hapticUtils.js.map
+import*as t from"expo-haptics";import{Platform as i,Vibration as c}from"react-native";let n=null;const fallback=t=>{if("android"===i.OS){const i={selection:5,impactLight:10,impactMedium:20,impactHeavy:30,notificationSuccess:15,notificationWarning:25,notificationError:40};try{c.vibrate(i[t]??10)}catch{}}},e={selection:()=>t.selectionAsync(),impactLight:()=>t.impactAsync(t.ImpactFeedbackStyle.Light),impactMedium:()=>t.impactAsync(t.ImpactFeedbackStyle.Medium),impactHeavy:()=>t.impactAsync(t.ImpactFeedbackStyle.Heavy),notificationSuccess:()=>t.notificationAsync(t.NotificationFeedbackType.Success),notificationWarning:()=>t.notificationAsync(t.NotificationFeedbackType.Warning),notificationError:()=>t.notificationAsync(t.NotificationFeedbackType.Error)};export const triggerHaptic=(t="selection")=>{if(n)try{return void n(t)}catch{}const i=e[t];i?i().catch(()=>fallback(t)):fallback(t)};export const setHapticImplementation=t=>{n=t};export const resolveHaptic=(t,i)=>!1===t?null:t??i;

package/lib/module/utils/hashString.js

@@ -1,17 +1 @@
-"use strict";
-
-/**
- * Two 32-bit FNV-style passes plus the length, as hex. Not cryptographic: it
- * turns a URL into a short key that is safe as a storage key or a file name.
- */
-export const hashString = input => {
-  let h1 = 0x811c9dc5;
-  let h2 = 0x1000193;
-  for (let i = 0; i < input.length; i += 1) {
-    const code = input.charCodeAt(i);
-    h1 = Math.imul(h1 ^ code, 16777619) >>> 0;
-    h2 = (Math.imul(h2 + code, 2654435761) ^ h2 >>> 7) >>> 0;
-  }
-  return `${h1.toString(16)}${h2.toString(16)}${input.length.toString(16)}`;
-};
-//# sourceMappingURL=hashString.js.map
+export const hashString=t=>{let n=2166136261,r=16777619;for(let o=0;o<t.length;o+=1){const e=t.charCodeAt(o);n=Math.imul(n^e,16777619)>>>0,r=(Math.imul(r+e,2654435761)^r>>>7)>>>0}return`${n.toString(16)}${r.toString(16)}${t.length.toString(16)}`};

package/lib/module/utils/index.js

@@ -1,13 +1 @@
-"use strict";
-
-export { blendOf, tintOf } from "./color.js";
-export { smoothCorners } from "./corners.js";
-export { configureFeedback, feedback, hapticForIntent, isFeedbackEnabled } from "./feedback.js";
-export { resolveHaptic, setHapticImplementation, triggerHaptic } from "./hapticUtils.js";
-export { mergeRefs } from "./mergeRefs.js";
-export { Breakpoints, isScreenSize, isTablet, Responsive, ScreenDimensions, useScreenDimensions } from "./responsive.js";
-export { shadowStyle } from "./shadows.js";
-export { Margin, Padding, Spacing } from "./spacing.js";
-export { SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, squircleApplies, squircleHostRadius, squirclePath } from "./squircle.js";
-export { warnUnknownProps } from "./warnUnknownProps.js";
-//# sourceMappingURL=index.js.map
+export{blendOf,tintOf}from"./color.js";export{smoothCorners}from"./corners.js";export{configureFeedback,feedback,hapticForIntent,isFeedbackEnabled}from"./feedback.js";export{resolveHaptic,setHapticImplementation,triggerHaptic}from"./hapticUtils.js";export{mergeRefs}from"./mergeRefs.js";export{Breakpoints,isScreenSize,isTablet,Responsive,ScreenDimensions,useScreenDimensions}from"./responsive.js";export{shadowStyle}from"./shadows.js";export{Margin,Padding,Spacing}from"./spacing.js";export{SQUIRCLE_MIN_RADIUS,SQUIRCLE_SMOOTHING,squircleApplies,squircleHostRadius,squirclePath}from"./squircle.js";export{warnUnknownProps}from"./warnUnknownProps.js";

package/lib/module/utils/mergeRefs.js

@@ -1,19 +1 @@
-"use strict";
-
-/**
- * Fold several refs into one callback ref, so a component can hold its own
- * ref to a host (to call `focus()` on it) while still forwarding the ref its
- * consumer passed. Callback refs are called, object refs are assigned; a
- * `null` or `undefined` entry is skipped. Memoise the result: React treats
- * a new callback ref as a change and re-attaches on every render.
- */
-export const mergeRefs = (...refs) => node => {
-  for (const ref of refs) {
-    if (typeof ref === 'function') {
-      ref(node);
-    } else if (ref != null) {
-      ref.current = node;
-    }
-  }
-};
-//# sourceMappingURL=mergeRefs.js.map
+export const mergeRefs=(...o)=>e=>{for(const n of o)"function"==typeof n?n(e):null!=n&&(n.current=e)};

package/lib/module/utils/responsive.js

@@ -1,97 +1 @@
-"use strict";
-
-import { Dimensions, PixelRatio, Platform, useWindowDimensions } from 'react-native';
-const BASE_WIDTH = 390;
-const BASE_HEIGHT = 844;
-export const Breakpoints = {
-  xs: 0,
-  sm: 360,
-  md: 414,
-  lg: 768,
-  xl: 1024
-};
-/**
- * The window size is read on every call, never captured at module load. A
- * module-level snapshot pins the whole responsive layer to the orientation the
- * app launched in: a tablet opened in portrait keeps answering portrait after
- * a rotation, and a foldable keeps the folded width after it opens.
- * `Dimensions.get` is a synchronous read of a value the platform already
- * holds, so there is no cost worth caching and no listener to leak.
- *
- * These are for code that runs outside a component. Inside one, use
- * `useScreenDimensions`, which also RE-RENDERS on the change.
- */
-const window = () => Dimensions.get('window');
-export const ScreenDimensions = {
-  get width() {
-    return window().width;
-  },
-  get height() {
-    return window().height;
-  },
-  get pixelRatio() {
-    return PixelRatio.get();
-  },
-  get fontScale() {
-    return PixelRatio.getFontScale();
-  }
-};
-const scalesFor = (width, height) => {
-  const widthScale = width / BASE_WIDTH;
-  const heightScale = height / BASE_HEIGHT;
-  return {
-    widthScale,
-    heightScale,
-    minScale: Math.min(widthScale, heightScale)
-  };
-};
-const scaleFont = (size, minScale) => {
-  const scaled = size * minScale;
-  if (Platform.OS === 'ios') {
-    return Math.round(PixelRatio.roundToNearestPixel(scaled));
-  }
-  return Math.round(PixelRatio.roundToNearestPixel(scaled)) - 1;
-};
-const responsiveFor = (width, height) => {
-  const {
-    widthScale,
-    heightScale,
-    minScale
-  } = scalesFor(width, height);
-  return {
-    width: size => Math.round(size * widthScale),
-    height: size => Math.round(size * heightScale),
-    size: size => Math.round(size * minScale),
-    font: size => scaleFont(size, minScale)
-  };
-};
-export const isScreenSize = size => window().width >= Breakpoints[size];
-export const isTablet = () => window().width >= Breakpoints.lg;
-export const Responsive = {
-  width: size => responsiveFor(window().width, window().height).width(size),
-  height: size => responsiveFor(window().width, window().height).height(size),
-  size: size => responsiveFor(window().width, window().height).size(size),
-  font: size => responsiveFor(window().width, window().height).font(size)
-};
-/**
- * The reactive form. `useWindowDimensions` re-renders the component whenever
- * the window changes, so a layout branching on `isTablet` follows a rotation,
- * an unfold or a split-screen resize instead of staying where it started.
- */
-export const useScreenDimensions = () => {
-  const {
-    width,
-    height,
-    fontScale
-  } = useWindowDimensions();
-  return {
-    width,
-    height,
-    pixelRatio: PixelRatio.get(),
-    fontScale,
-    isTablet: width >= Breakpoints.lg,
-    isScreenSize: size => width >= Breakpoints[size],
-    responsive: responsiveFor(width, height)
-  };
-};
-//# sourceMappingURL=responsive.js.map
+import{Dimensions as t,PixelRatio as e,Platform as i,useWindowDimensions as n}from"react-native";export const Breakpoints={xs:0,sm:360,md:414,lg:768,xl:1024};const window=()=>t.get("window");export const ScreenDimensions={get width(){return window().width},get height(){return window().height},get pixelRatio(){return e.get()},get fontScale(){return e.getFontScale()}};const responsiveFor=(t,n)=>{const{widthScale:o,heightScale:h,minScale:r}=((t,e)=>{const i=t/390,n=e/844;return{widthScale:i,heightScale:n,minScale:Math.min(i,n)}})(t,n);return{width:t=>Math.round(t*o),height:t=>Math.round(t*h),size:t=>Math.round(t*r),font:t=>((t,n)=>{const o=t*n;return"ios"===i.OS?Math.round(e.roundToNearestPixel(o)):Math.round(e.roundToNearestPixel(o))-1})(t,r)}};export const isScreenSize=t=>window().width>=Breakpoints[t];export const isTablet=()=>window().width>=Breakpoints.lg;export const Responsive={width:t=>responsiveFor(window().width,window().height).width(t),height:t=>responsiveFor(window().width,window().height).height(t),size:t=>responsiveFor(window().width,window().height).size(t),font:t=>responsiveFor(window().width,window().height).font(t)};export const useScreenDimensions=()=>{const{width:t,height:i,fontScale:o}=n();return{width:t,height:i,pixelRatio:e.get(),fontScale:o,isTablet:t>=Breakpoints.lg,isScreenSize:e=>t>=Breakpoints[e],responsive:responsiveFor(t,i)}};

package/lib/module/utils/shadows.js

@@ -1,54 +1 @@
-"use strict";
-
-import { Platform } from 'react-native';
-export const shadowStyle = (shadows, level) => {
-  const def = shadows[level];
-  return def;
-};
-
-/**
- * Whether this platform draws a `boxShadow`. Android paints an outset box
- * shadow only from API 28; below that the style is ignored, so a caller
- * keeps the token's `elevation` there instead.
- */
-export const supportsBoxShadow = () => Platform.OS !== 'android' || typeof Platform.Version === 'number' && Platform.Version >= 28;
-const hexToRgb = hex => {
-  const body = hex.replace('#', '');
-  const full = body.length === 3 ? body.split('').map(c => c + c).join('') : body;
-  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
-    return null;
-  }
-  return [Number.parseInt(full.slice(0, 2), 16), Number.parseInt(full.slice(2, 4), 16), Number.parseInt(full.slice(4, 6), 16)];
-};
-
-/**
- * A shadow token as a CSS `boxShadow` string, or `undefined` when the token
- * draws nothing or its colour is not a hex value this can fold the opacity
- * into.
- *
- * The legacy `shadow*` props are cast from the view's own layer, so on iOS
- * `overflow: 'hidden'` clips them away entirely, and Android ignores all of
- * them except `elevation`. A `boxShadow` survives the clip on iOS and draws
- * the same blurred shadow on Android, so one token looks alike on both.
- * `shadowRadius` is Core Animation's blur, about half of a CSS blur radius.
- */
-export const toBoxShadow = def => {
-  const {
-    shadowColor,
-    shadowOffset,
-    shadowOpacity,
-    shadowRadius
-  } = def;
-  if (typeof shadowColor !== 'string' || !shadowOpacity) {
-    return undefined;
-  }
-  const rgb = hexToRgb(shadowColor);
-  if (!rgb) {
-    return undefined;
-  }
-  const x = shadowOffset?.width ?? 0;
-  const y = shadowOffset?.height ?? 0;
-  const blur = (shadowRadius ?? 0) * 2;
-  return `${x}px ${y}px ${blur}px 0px rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${shadowOpacity})`;
-};
-//# sourceMappingURL=shadows.js.map
+import{Platform as t}from"react-native";export const shadowStyle=(t,e)=>t[e];export const supportsBoxShadow=()=>"android"!==t.OS||"number"==typeof t.Version&&t.Version>=28;export const toBoxShadow=t=>{const{shadowColor:e,shadowOffset:o,shadowOpacity:r,shadowRadius:s}=t;if("string"!=typeof e||!r)return;const n=(t=>{const e=t.replace("#",""),o=3===e.length?e.split("").map(t=>t+t).join(""):e;return/^[0-9a-fA-F]{6}$/.test(o)?[Number.parseInt(o.slice(0,2),16),Number.parseInt(o.slice(2,4),16),Number.parseInt(o.slice(4,6),16)]:null})(e);if(!n)return;return`${o?.width??0}px ${o?.height??0}px ${2*(s??0)}px 0px rgba(${n[0]}, ${n[1]}, ${n[2]}, ${r})`};

package/lib/module/utils/spacing.js

@@ -1,82 +1 @@
-"use strict";
-
-import { getTheme } from "../theme/index.js";
-export const Spacing = {
-  get none() {
-    return getTheme().spacing.none;
-  },
-  get xxs() {
-    return getTheme().spacing.xxs;
-  },
-  get xs() {
-    return getTheme().spacing.xs;
-  },
-  get sm() {
-    return getTheme().spacing.sm;
-  },
-  get md() {
-    return getTheme().spacing.md;
-  },
-  get lg() {
-    return getTheme().spacing.lg;
-  },
-  get xl() {
-    return getTheme().spacing.xl;
-  },
-  get '2xl'() {
-    return getTheme().spacing['2xl'];
-  },
-  get '3xl'() {
-    return getTheme().spacing['3xl'];
-  },
-  get '4xl'() {
-    return getTheme().spacing['4xl'];
-  }
-};
-export const Padding = {
-  all: token => ({
-    padding: getTheme().spacing[token]
-  }),
-  horizontal: token => ({
-    paddingHorizontal: getTheme().spacing[token]
-  }),
-  vertical: token => ({
-    paddingVertical: getTheme().spacing[token]
-  }),
-  top: token => ({
-    paddingTop: getTheme().spacing[token]
-  }),
-  bottom: token => ({
-    paddingBottom: getTheme().spacing[token]
-  }),
-  left: token => ({
-    paddingLeft: getTheme().spacing[token]
-  }),
-  right: token => ({
-    paddingRight: getTheme().spacing[token]
-  })
-};
-export const Margin = {
-  all: token => ({
-    margin: getTheme().spacing[token]
-  }),
-  horizontal: token => ({
-    marginHorizontal: getTheme().spacing[token]
-  }),
-  vertical: token => ({
-    marginVertical: getTheme().spacing[token]
-  }),
-  top: token => ({
-    marginTop: getTheme().spacing[token]
-  }),
-  bottom: token => ({
-    marginBottom: getTheme().spacing[token]
-  }),
-  left: token => ({
-    marginLeft: getTheme().spacing[token]
-  }),
-  right: token => ({
-    marginRight: getTheme().spacing[token]
-  })
-};
-//# sourceMappingURL=spacing.js.map
+import{getTheme as n}from"../theme/index.js";export const Spacing={get none(){return n().spacing.none},get xxs(){return n().spacing.xxs},get xs(){return n().spacing.xs},get sm(){return n().spacing.sm},get md(){return n().spacing.md},get lg(){return n().spacing.lg},get xl(){return n().spacing.xl},get"2xl"(){return n().spacing["2xl"]},get"3xl"(){return n().spacing["3xl"]},get"4xl"(){return n().spacing["4xl"]}};export const Padding={all:g=>({padding:n().spacing[g]}),horizontal:g=>({paddingHorizontal:n().spacing[g]}),vertical:g=>({paddingVertical:n().spacing[g]}),top:g=>({paddingTop:n().spacing[g]}),bottom:g=>({paddingBottom:n().spacing[g]}),left:g=>({paddingLeft:n().spacing[g]}),right:g=>({paddingRight:n().spacing[g]})};export const Margin={all:g=>({margin:n().spacing[g]}),horizontal:g=>({marginHorizontal:n().spacing[g]}),vertical:g=>({marginVertical:n().spacing[g]}),top:g=>({marginTop:n().spacing[g]}),bottom:g=>({marginBottom:n().spacing[g]}),left:g=>({marginLeft:n().spacing[g]}),right:g=>({marginRight:n().spacing[g]})};