@consumidor-positivo/aurora 1.2.0 → 1.3.0

package/astro/form/TokenField/index.astro

@@ -0,0 +1,211 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import FieldRoot from '../Field/Root/index.astro'
+import FieldLabel from '../Field/Label/index.astro'
+import FieldInput from '../Field/Input/index.astro'
+import FieldMessage from '../Field/Message/index.astro'
+import '../../../dist/components/TokenField/styles.css'
+
+/**
+ * Same props as the React `TokenField`. Every other HTML attribute (`id`,
+ * `data-*`, `style`) lands on the `au-field au-token-field` root; the React
+ * `data-testid` goes on the digits container instead.
+ *
+ * The digit handling is the component's own behavior, kept by an inline
+ * controller that follows the React hook step by step: a digit fills the first
+ * empty slot and moves to the next one, Backspace clears the current digit
+ * (and moves back when it was already empty), paste spreads the digits, and
+ * the optional `timer` counts down and clears the token when it hits zero. The
+ * React callbacks become events that bubble from the root, fired at the same
+ * moments: `au:tokenchange` and `au:tokencomplete` (both with `detail.value`)
+ * replace `onChange`/`onComplete`, and `au:tokentimer` (`detail.time`, from
+ * `timer` down to 1) replaces `onChangeTimer`.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'color'> & {
+  label?: string
+  disabled?: boolean
+  success?: boolean
+  error?: boolean
+  errorMessage?: string
+  helpMessage?: string
+  showOptionalLabel?: boolean
+  /** Number of digits. Defaults to 6. */
+  size?: number
+  type?: 'number' | 'password' | 'text'
+  /** Seconds until the token is cleared. */
+  timer?: number
+}
+
+const {
+  label,
+  disabled = false,
+  success = false,
+  error = false,
+  errorMessage,
+  helpMessage,
+  showOptionalLabel,
+  size = 6,
+  type,
+  timer,
+  class: className,
+  'data-testid': dataTestId,
+  ...rest
+} = Astro.props
+
+const digits = Array.from({ length: size }, (_, i) => i)
+---
+
+<FieldRoot
+  class:list={['au-token-field', className]}
+  success={success}
+  error={error}
+  disabled={disabled}
+  data-element="au-token-field"
+  data-timer={timer || undefined}
+  {...rest}>
+  <FieldLabel
+    text={label}
+    showOptionalLabel={showOptionalLabel}
+    success={success}
+    error={error}
+    disabled={disabled}
+  />
+  <div class="au-token-field__container" data-testid={dataTestId}>
+    {
+      digits.map((i) => (
+        <div>
+          <FieldInput
+            class="au-token-field__input"
+            type={type || 'number'}
+            value=""
+            disabled={disabled}
+            data-token-i={i}
+            inputmode="numeric"
+            autocomplete="one-time-code"
+          />
+        </div>
+      ))
+    }
+  </div>
+  <FieldMessage hasError={error} errorMessage={errorMessage} helpMessage={helpMessage} />
+</FieldRoot>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const TICK_MS = 1000
+
+  // Same check as the React hook (`inputtedValueIsValid`).
+  const isValid = (value: string) => !Number.isNaN(Number(value))
+
+  elementController('au-token-field', ({ root, queryAll, on, emit }) => {
+    const inputs = queryAll<HTMLInputElement>('[data-token-i]')
+    const size = inputs.length
+    const emptyTokens = () => inputs.map(() => '')
+    let tokens: string[] = emptyTokens()
+    // React's value tracker: an input event that leaves the value where it was
+    // last seen does not reach `onChange`.
+    const seen = inputs.map((input) => input.value)
+
+    const indexOf = (target: EventTarget | null) => {
+      const index = (target as HTMLElement | null)?.dataset?.tokenI
+      return index === undefined ? -1 : Number(index)
+    }
+
+    const focusAt = (index: number) => inputs[index]?.focus()
+
+    // React keeps every digit controlled: after any change event the DOM value
+    // goes back to the state, whether or not the state moved.
+    function syncInputs() {
+      inputs.forEach((input, i) => {
+        if (input.value !== tokens[i]) input.value = tokens[i]
+        seen[i] = input.value
+      })
+    }
+
+    // `setTokenMap` + the `[tokenMap]` effect: every set fires the callbacks,
+    // even when the digits did not change.
+    function setTokens(next: string[]) {
+      tokens = next
+      syncInputs()
+      const value = tokens.join('')
+      emit('au:tokenchange', { value })
+      if (value.length === size) emit('au:tokencomplete', { value })
+    }
+
+    on('input', (event) => {
+      const i = indexOf(event.target)
+      if (i < 0) return
+
+      let value = inputs[i].value
+      if (value === seen[i]) return
+      seen[i] = value
+      const isEmpty = value === ''
+
+      if (isValid(value)) {
+        let firstEmpty = tokens.findIndex((token) => token === '')
+
+        if (value.length > 1) {
+          firstEmpty = firstEmpty - 1
+          value = value[value.length - 1]
+        }
+
+        if (firstEmpty < 0) {
+          if (value) setTokens(tokens.map((token, j) => (j === i ? value : token)))
+          syncInputs()
+          return
+        }
+
+        setTokens(tokens.map((token, j) => (j === firstEmpty ? value : token)))
+        if (!isEmpty) focusAt(firstEmpty + 1)
+      }
+      syncInputs()
+    })
+
+    on('keyup', (event) => {
+      const i = indexOf(event.target)
+      if (i < 0) return
+      if (event.which !== 8 && event.key !== 'Backspace') return
+
+      const previous = inputs[i - 1]
+      // React reads the value before its re-render clears the digit.
+      const currentHadValue = !!inputs[i].value
+      setTokens(tokens.map((token, j) => (j === i ? '' : token)))
+      if (previous && !currentHadValue) previous.focus()
+    })
+
+    on('paste', (event) => {
+      if (indexOf(event.target) < 0) return
+      event.preventDefault()
+
+      const value = event.clipboardData?.getData('Text') ?? ''
+      if (isValid(value)) {
+        const pasted = value.split('').slice(0, size)
+        setTokens(inputs.map((_, i) => pasted[i] ?? ''))
+        focusAt(pasted.length)
+      } else {
+        setTokens(emptyTokens())
+      }
+    })
+
+    // The `[tokenMap]` effect also runs on mount.
+    setTokens(tokens)
+
+    const timer = Number(root.dataset.timer) || null
+    let time: number | null = timer
+    // The `[timerTime]` effect runs on mount too.
+    if (time) emit('au:tokentimer', { time })
+    if (timer) {
+      const interval = setInterval(() => {
+        time = time ? time - 1 : null
+        if (time) emit('au:tokentimer', { time })
+        if (time === 0) {
+          setTokens(emptyTokens())
+          focusAt(0)
+        }
+        // From here on the React updater only returns null: nothing observable.
+        if (!time) clearInterval(interval)
+      }, TICK_MS)
+    }
+  })
+</script>

package/astro/tokens/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../dist/astro/tokens/index.es.js",
+  "module": "../../dist/astro/tokens/index.es.js",
+  "types": "../../dist/core/tokens/index.d.ts",
+  "sideEffects": false
+}

package/dist/{tokens-C4ypB4bY.js → astro/tokens/index.es.js}

@@ -99,105 +99,105 @@ const FONT_SIZE_P2 = "16px";
 const FONT_SIZE_P3 = "14px";
 const FONT_SIZE_P4 = "12px";
 export {
-  COLOR_SUCCESS_30 as $,
-  COLOR_ERROR_00 as A,
-  BORDER_RADIUS_BIG as B,
-  COLOR_BRAND_BLUE_00 as C,
-  COLOR_ERROR_10 as D,
-  COLOR_ERROR_20 as E,
-  COLOR_ERROR_30 as F,
-  COLOR_ERROR_40 as G,
-  COLOR_ERROR_50 as H,
-  COLOR_ERROR_60 as I,
-  COLOR_INFO_00 as J,
-  COLOR_INFO_10 as K,
-  COLOR_INFO_20 as L,
-  COLOR_INFO_30 as M,
-  COLOR_INFO_40 as N,
-  COLOR_INFO_50 as O,
-  COLOR_INFO_60 as P,
-  COLOR_NEUTRAL_00 as Q,
-  COLOR_NEUTRAL_10 as R,
-  COLOR_NEUTRAL_20 as S,
-  COLOR_NEUTRAL_30 as T,
-  COLOR_NEUTRAL_40 as U,
-  COLOR_NEUTRAL_50 as V,
-  COLOR_NEUTRAL_60 as W,
-  COLOR_NEUTRAL_70 as X,
-  COLOR_SUCCESS_00 as Y,
-  COLOR_SUCCESS_10 as Z,
-  COLOR_SUCCESS_20 as _,
-  BORDER_RADIUS_MEDIUM as a,
-  COLOR_SUCCESS_40 as a0,
-  COLOR_SUCCESS_50 as a1,
-  COLOR_SUCCESS_60 as a2,
-  COLOR_WARNING_00 as a3,
-  COLOR_WARNING_10 as a4,
-  COLOR_WARNING_20 as a5,
-  COLOR_WARNING_30 as a6,
-  COLOR_WARNING_40 as a7,
-  COLOR_WARNING_50 as a8,
-  COLOR_WARNING_60 as a9,
-  SPACING_050 as aA,
-  SPACING_100 as aB,
-  SPACING_200 as aC,
-  SPACING_300 as aD,
-  SPACING_400 as aE,
-  SPACING_500 as aF,
-  SPACING_600 as aG,
-  SPACING_700 as aH,
-  SPACING_800 as aI,
-  SPACING_900 as aJ,
-  CONTAINER_SIZE as aa,
-  FONT_BODY as ab,
-  FONT_SIZE_H1 as ac,
-  FONT_SIZE_H2 as ad,
-  FONT_SIZE_H3 as ae,
-  FONT_SIZE_H4 as af,
-  FONT_SIZE_H5 as ag,
-  FONT_SIZE_H6 as ah,
-  FONT_SIZE_P1 as ai,
-  FONT_SIZE_P2 as aj,
-  FONT_SIZE_P3 as ak,
-  FONT_SIZE_P4 as al,
-  FONT_TITLE as am,
-  FONT_WEIGHT_BOLD as an,
-  FONT_WEIGHT_MEDIUM as ao,
-  FONT_WEIGHT_REGULAR as ap,
-  FONT_WEIGHT_SEMIBOLD as aq,
-  OPACITY_00 as ar,
-  OPACITY_10 as as,
-  OPACITY_20 as at,
-  OPACITY_30 as au,
-  OPACITY_40 as av,
-  SHADOW_01 as aw,
-  SHADOW_02 as ax,
-  SHADOW_03 as ay,
-  SHADOW_04 as az,
-  BORDER_RADIUS_PILL as b,
-  BORDER_RADIUS_SMALL as c,
-  BREAKPOINT_LG as d,
-  BREAKPOINT_MD as e,
-  BREAKPOINT_SM as f,
-  BREAKPOINT_XLG as g,
-  BREAKPOINT_XSM as h,
-  COLOR_BRAND_BLUE_10 as i,
-  COLOR_BRAND_BLUE_20 as j,
-  COLOR_BRAND_BLUE_30 as k,
-  COLOR_BRAND_BLUE_40 as l,
-  COLOR_BRAND_BLUE_50 as m,
-  COLOR_BRAND_BLUE_60 as n,
-  COLOR_BRAND_CYAN_10 as o,
-  COLOR_BRAND_CYAN_20 as p,
-  COLOR_BRAND_CYAN_30 as q,
-  COLOR_BRAND_CYAN_40 as r,
-  COLOR_BRAND_CYAN_50 as s,
-  COLOR_BRAND_CYAN_60 as t,
-  COLOR_BRAND_EMERALD_10 as u,
-  COLOR_BRAND_EMERALD_20 as v,
-  COLOR_BRAND_EMERALD_30 as w,
-  COLOR_BRAND_EMERALD_40 as x,
-  COLOR_BRAND_EMERALD_50 as y,
-  COLOR_BRAND_EMERALD_60 as z
+  BORDER_RADIUS_BIG,
+  BORDER_RADIUS_MEDIUM,
+  BORDER_RADIUS_PILL,
+  BORDER_RADIUS_SMALL,
+  BREAKPOINT_LG,
+  BREAKPOINT_MD,
+  BREAKPOINT_SM,
+  BREAKPOINT_XLG,
+  BREAKPOINT_XSM,
+  COLOR_BRAND_BLUE_00,
+  COLOR_BRAND_BLUE_10,
+  COLOR_BRAND_BLUE_20,
+  COLOR_BRAND_BLUE_30,
+  COLOR_BRAND_BLUE_40,
+  COLOR_BRAND_BLUE_50,
+  COLOR_BRAND_BLUE_60,
+  COLOR_BRAND_CYAN_10,
+  COLOR_BRAND_CYAN_20,
+  COLOR_BRAND_CYAN_30,
+  COLOR_BRAND_CYAN_40,
+  COLOR_BRAND_CYAN_50,
+  COLOR_BRAND_CYAN_60,
+  COLOR_BRAND_EMERALD_10,
+  COLOR_BRAND_EMERALD_20,
+  COLOR_BRAND_EMERALD_30,
+  COLOR_BRAND_EMERALD_40,
+  COLOR_BRAND_EMERALD_50,
+  COLOR_BRAND_EMERALD_60,
+  COLOR_ERROR_00,
+  COLOR_ERROR_10,
+  COLOR_ERROR_20,
+  COLOR_ERROR_30,
+  COLOR_ERROR_40,
+  COLOR_ERROR_50,
+  COLOR_ERROR_60,
+  COLOR_INFO_00,
+  COLOR_INFO_10,
+  COLOR_INFO_20,
+  COLOR_INFO_30,
+  COLOR_INFO_40,
+  COLOR_INFO_50,
+  COLOR_INFO_60,
+  COLOR_NEUTRAL_00,
+  COLOR_NEUTRAL_10,
+  COLOR_NEUTRAL_20,
+  COLOR_NEUTRAL_30,
+  COLOR_NEUTRAL_40,
+  COLOR_NEUTRAL_50,
+  COLOR_NEUTRAL_60,
+  COLOR_NEUTRAL_70,
+  COLOR_SUCCESS_00,
+  COLOR_SUCCESS_10,
+  COLOR_SUCCESS_20,
+  COLOR_SUCCESS_30,
+  COLOR_SUCCESS_40,
+  COLOR_SUCCESS_50,
+  COLOR_SUCCESS_60,
+  COLOR_WARNING_00,
+  COLOR_WARNING_10,
+  COLOR_WARNING_20,
+  COLOR_WARNING_30,
+  COLOR_WARNING_40,
+  COLOR_WARNING_50,
+  COLOR_WARNING_60,
+  CONTAINER_SIZE,
+  FONT_BODY,
+  FONT_SIZE_H1,
+  FONT_SIZE_H2,
+  FONT_SIZE_H3,
+  FONT_SIZE_H4,
+  FONT_SIZE_H5,
+  FONT_SIZE_H6,
+  FONT_SIZE_P1,
+  FONT_SIZE_P2,
+  FONT_SIZE_P3,
+  FONT_SIZE_P4,
+  FONT_TITLE,
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_MEDIUM,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD,
+  OPACITY_00,
+  OPACITY_10,
+  OPACITY_20,
+  OPACITY_30,
+  OPACITY_40,
+  SHADOW_01,
+  SHADOW_02,
+  SHADOW_03,
+  SHADOW_04,
+  SPACING_050,
+  SPACING_100,
+  SPACING_200,
+  SPACING_300,
+  SPACING_400,
+  SPACING_500,
+  SPACING_600,
+  SPACING_700,
+  SPACING_800,
+  SPACING_900
 };
-//# sourceMappingURL=tokens-C4ypB4bY.js.map
+//# sourceMappingURL=index.es.js.map

package/dist/astro/tokens/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/core/tokens/.cache/tokens.ts"],"sourcesContent":["export const BORDER_RADIUS_SMALL = \"4px\";\nexport const BORDER_RADIUS_MEDIUM = \"8px\";\nexport const BORDER_RADIUS_BIG = \"16px\";\nexport const BORDER_RADIUS_PILL = \"999px\";\nexport const COLOR_NEUTRAL_70 = \"#16181d\";\nexport const COLOR_NEUTRAL_60 = \"#313131\";\nexport const COLOR_NEUTRAL_50 = \"#454a54\";\nexport const COLOR_NEUTRAL_40 = \"#5e6573\";\nexport const COLOR_NEUTRAL_30 = \"#c4c9d4\";\nexport const COLOR_NEUTRAL_20 = \"#e2e4e9\";\nexport const COLOR_NEUTRAL_10 = \"#f6f7fa\";\nexport const COLOR_NEUTRAL_00 = \"#ffffff\";\nexport const COLOR_BRAND_BLUE_60 = \"#18256c\";\nexport const COLOR_BRAND_BLUE_50 = \"#1737a4\";\nexport const COLOR_BRAND_BLUE_40 = \"#0048db\";\nexport const COLOR_BRAND_BLUE_30 = \"#9abcff\";\nexport const COLOR_BRAND_BLUE_20 = \"#dce8ff\";\nexport const COLOR_BRAND_BLUE_10 = \"#fafbff\";\nexport const COLOR_BRAND_BLUE_00 = \"#F2F5FC\";\nexport const COLOR_BRAND_EMERALD_60 = \"#013220\";\nexport const COLOR_BRAND_EMERALD_50 = \"#026441\";\nexport const COLOR_BRAND_EMERALD_40 = \"#04d98c\";\nexport const COLOR_BRAND_EMERALD_30 = \"#95f0cf\";\nexport const COLOR_BRAND_EMERALD_20 = \"#ccf2e4\";\nexport const COLOR_BRAND_EMERALD_10 = \"#edfef7\";\nexport const COLOR_BRAND_CYAN_60 = \"#004155\";\nexport const COLOR_BRAND_CYAN_50 = \"#005c77\";\nexport const COLOR_BRAND_CYAN_40 = \"#02bedf\";\nexport const COLOR_BRAND_CYAN_30 = \"#3edcff\";\nexport const COLOR_BRAND_CYAN_20 = \"#ccf3ff\";\nexport const COLOR_BRAND_CYAN_10 = \"#f1fcff\";\nexport const COLOR_SUCCESS_60 = \"#08331a\";\nexport const COLOR_SUCCESS_50 = \"#10593b\";\nexport const COLOR_SUCCESS_40 = \"#138040\";\nexport const COLOR_SUCCESS_30 = \"#66cc90\";\nexport const COLOR_SUCCESS_20 = \"#a1e5bd\";\nexport const COLOR_SUCCESS_10 = \"#e5fff0\";\nexport const COLOR_SUCCESS_00 = \"#f0fcf5\";\nexport const COLOR_ERROR_60 = \"#731111\";\nexport const COLOR_ERROR_50 = \"#991717\";\nexport const COLOR_ERROR_40 = \"#e52222\";\nexport const COLOR_ERROR_30 = \"#ff8080\";\nexport const COLOR_ERROR_20 = \"#ffbfbf\";\nexport const COLOR_ERROR_10 = \"#ffe5e5\";\nexport const COLOR_ERROR_00 = \"#f5eff0\";\nexport const COLOR_WARNING_60 = \"#803500\";\nexport const COLOR_WARNING_50 = \"#a64a08\";\nexport const COLOR_WARNING_40 = \"#fa822c\";\nexport const COLOR_WARNING_30 = \"#ffc59c\";\nexport const COLOR_WARNING_20 = \"#ffdabf\";\nexport const COLOR_WARNING_10 = \"#fff0e6\";\nexport const COLOR_WARNING_00 = \"#fcf4f0\";\nexport const COLOR_INFO_60 = \"#46008c\";\nexport const COLOR_INFO_50 = \"#510cb2\";\nexport const COLOR_INFO_40 = \"#6728e5\";\nexport const COLOR_INFO_30 = \"#bd9cff\";\nexport const COLOR_INFO_20 = \"#d4bfff\";\nexport const COLOR_INFO_10 = \"#eee6ff\";\nexport const COLOR_INFO_00 = \"#f3f0fc\";\nexport const SPACING_050 = \"4px\";\nexport const SPACING_100 = \"8px\";\nexport const SPACING_200 = \"16px\";\nexport const SPACING_300 = \"24px\";\nexport const SPACING_400 = \"32px\";\nexport const SPACING_500 = \"40px\";\nexport const SPACING_600 = \"48px\";\nexport const SPACING_700 = \"56px\";\nexport const SPACING_800 = \"64px\";\nexport const SPACING_900 = \"72px\";\nexport const BREAKPOINT_XSM = \"0px\";\nexport const BREAKPOINT_SM = \"320px\";\nexport const BREAKPOINT_MD = \"600px\";\nexport const BREAKPOINT_LG = \"1024px\";\nexport const BREAKPOINT_XLG = \"1920px\";\nexport const CONTAINER_SIZE = \"1232px\";\nexport const OPACITY_00 = \"0.05\";\nexport const OPACITY_10 = \"0.2\";\nexport const OPACITY_20 = \"0.4\";\nexport const OPACITY_30 = \"0.6\";\nexport const OPACITY_40 = \"0.8\";\nexport const SHADOW_01 = \"0px 2px 8px 0px rgba(169, 177, 197, 0.08), 0px 4px 4px 0px rgba(0, 72, 219, 0.04)\";\nexport const SHADOW_02 = \"0px 8px 24px 0px rgba(118, 134, 173, 0.08), 0px 4px 4px 0px rgba(0, 72, 219, 0.04)\";\nexport const SHADOW_03 = \"0px 16px 40px 0px rgba(118, 134, 173, 0.08), 0px 8px 8px 0px rgba(0, 72, 219, 0.04)\";\nexport const SHADOW_04 = \"0px 24px 56px 0px rgba(118, 134, 173, 0.08), 0px 12px 12px 0px rgba(0, 72, 219, 0.04)\";\nexport const FONT_TITLE = \"'Lexend Deca', sans-serif\";\nexport const FONT_BODY = \"'Source Sans 3', sans-serif\";\nexport const FONT_WEIGHT_BOLD = \"700\";\nexport const FONT_WEIGHT_SEMIBOLD = \"600\";\nexport const FONT_WEIGHT_MEDIUM = \"500\";\nexport const FONT_WEIGHT_REGULAR = \"400\";\nexport const FONT_SIZE_H1 = \"56px\";\nexport const FONT_SIZE_H2 = \"48px\";\nexport const FONT_SIZE_H3 = \"40px\";\nexport const FONT_SIZE_H4 = \"32px\";\nexport const FONT_SIZE_H5 = \"28px\";\nexport const FONT_SIZE_H6 = \"24px\";\nexport const FONT_SIZE_P1 = \"20px\";\nexport const FONT_SIZE_P2 = \"16px\";\nexport const FONT_SIZE_P3 = \"14px\";\nexport const FONT_SIZE_P4 = \"12px\";"],"names":[],"mappings":"AAAO,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAC5B,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AACvB,MAAM,aAAa;AACnB,MAAM,aAAa;AACnB,MAAM,aAAa;AACnB,MAAM,aAAa;AACnB,MAAM,aAAa;AACnB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,aAAa;AACnB,MAAM,YAAY;AAClB,MAAM,mBAAmB;AACzB,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;"}

package/dist/components/Alert/index.es.js

@@ -9,9 +9,9 @@ import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconClock } from "../icons/IconClock/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
 import { IconX } from "../icons/IconX/index.es.js";
+import { COLOR_NEUTRAL_70, COLOR_WARNING_50, COLOR_NEUTRAL_60, COLOR_BRAND_CYAN_50, COLOR_INFO_50, COLOR_ERROR_50, COLOR_SUCCESS_50 } from "../../astro/tokens/index.es.js";
 import { Conditional } from "../misc/Conditional/index.es.js";
 import { Text } from "../Text/index.es.js";
-import { X as COLOR_NEUTRAL_70, a8 as COLOR_WARNING_50, W as COLOR_NEUTRAL_60, s as COLOR_BRAND_CYAN_50, O as COLOR_INFO_50, H as COLOR_ERROR_50, a1 as COLOR_SUCCESS_50 } from "../../tokens-C4ypB4bY.js";
 import './styles.css';const Alert = ({
   showIcon = true,
   status = "info",

package/dist/components/BadgeInfo/index.es.js

@@ -3,8 +3,8 @@ import { c as classNames } from "../../index-BW2ZU5Hx.js";
 import "react";
 import "../Icon/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
+import { COLOR_NEUTRAL_70, COLOR_BRAND_CYAN_50, COLOR_INFO_50, COLOR_WARNING_50, COLOR_ERROR_50, COLOR_SUCCESS_50 } from "../../astro/tokens/index.es.js";
 import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
-import { X as COLOR_NEUTRAL_70, s as COLOR_BRAND_CYAN_50, O as COLOR_INFO_50, a8 as COLOR_WARNING_50, H as COLOR_ERROR_50, a1 as COLOR_SUCCESS_50 } from "../../tokens-C4ypB4bY.js";
 import './styles.css';const BadgeInfo = ({
   status,
   color = "primary",

package/dist/components/BadgeState/index.es.js

@@ -7,8 +7,8 @@ import { IconAlertTriangle } from "../icons/IconAlertTriangle/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconInfo } from "../icons/IconInfo/index.es.js";
 import { IconMoreHorizontal } from "../icons/IconMoreHorizontal/index.es.js";
+import { COLOR_NEUTRAL_60, COLOR_BRAND_CYAN_50, COLOR_INFO_50, COLOR_WARNING_50, COLOR_ERROR_50, COLOR_SUCCESS_50 } from "../../astro/tokens/index.es.js";
 import { I as If, T as Then, E as Else } from "../../react-if.esm-Cozt8l48.js";
-import { W as COLOR_NEUTRAL_60, s as COLOR_BRAND_CYAN_50, O as COLOR_INFO_50, a8 as COLOR_WARNING_50, H as COLOR_ERROR_50, a1 as COLOR_SUCCESS_50 } from "../../tokens-C4ypB4bY.js";
 import './styles.css';const BadgeState = ({
   status,
   isNumberBadge = false,

package/dist/components/Image/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { e as BREAKPOINT_MD, d as BREAKPOINT_LG } from "../../tokens-C4ypB4bY.js";
+import { BREAKPOINT_MD, BREAKPOINT_LG } from "../../astro/tokens/index.es.js";
 const Image = ({ srcMob, srcTablet, srcDesk, ...props }) => {
   return /* @__PURE__ */ jsxs("picture", { children: [
     /* @__PURE__ */ jsx("source", { media: `(max-width: ${BREAKPOINT_MD})`, srcSet: srcMob }),

package/dist/components/Spinner/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { c as classNames } from "../../index-BW2ZU5Hx.js";
-import { Q as COLOR_NEUTRAL_00, l as COLOR_BRAND_BLUE_40 } from "../../tokens-C4ypB4bY.js";
+import { COLOR_NEUTRAL_00, COLOR_BRAND_BLUE_40 } from "../../astro/tokens/index.es.js";
 import './styles.css';const SIZE_MAP = {
   small: 16,
   medium: 20,

package/dist/components/form/Checkbox/Field/index.es.js

@@ -3,9 +3,9 @@ import { useState } from "react";
 import { c as classNames } from "../../../../index-BW2ZU5Hx.js";
 import "../../../Icon/index.es.js";
 import { IconCheck } from "../../../icons/IconCheck/index.es.js";
+import { COLOR_NEUTRAL_00 } from "../../../../astro/tokens/index.es.js";
 import Field from "../../Field/index.es.js";
 import { Conditional } from "../../../misc/Conditional/index.es.js";
-import { Q as COLOR_NEUTRAL_00 } from "../../../../tokens-C4ypB4bY.js";
 import '../../../Field/styles.css';const CheckboxField = ({
   label,
   error,

package/dist/components/form/Datepicker/Calendar/index.es.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "../../../../index-BW2ZU5Hx.js";
-import "../../../../index-CFYmtkje.js";
+import "../../../../index-CZfMkAoF.js";
 import "../../../Button/index.es.js";
 import "../PortalHolder/index.es.js";
-import { a } from "../../../../index-BcC9liUl.js";
+import { a } from "../../../../index-Bkl5OBIY.js";
 export {
   a as DatepickerCalendar
 };

package/dist/components/form/Datepicker/CalendarHeader/index.es.js

@@ -4,8 +4,8 @@ import "react";
 import "../../../Icon/index.es.js";
 import "../../../icons/IconChevronLeft/index.es.js";
 import "../../../icons/IconChevronRight/index.es.js";
-import "../../../../index-CeClo_WS.js";
-import { C } from "../../../../index-CFYmtkje.js";
+import "../../../../index-Cw1KtRQr.js";
+import { C } from "../../../../index-CZfMkAoF.js";
 export {
   C as CalendarHeader
 };

package/dist/components/form/Datepicker/PortalHolder/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { a as above } from "../../../../screen-DfYo7XQ_.js";
+import { BREAKPOINT_MD } from "../../../../astro/tokens/index.es.js";
 import { Portal } from "../../../misc/Portal/index.es.js";
-import { e as BREAKPOINT_MD } from "../../../../tokens-C4ypB4bY.js";
 const PortalHolder = ({ withPortal, children }) => {
   const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
   if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });

package/dist/components/form/Datepicker/Segment/index.es.js

@@ -5,7 +5,7 @@ import "../../../Icon/index.es.js";
 import "../../../icons/IconChevronDown/index.es.js";
 import "../../../icons/IconChevronLeft/index.es.js";
 import "../../../icons/IconX/index.es.js";
-import { S } from "../../../../index-CeClo_WS.js";
+import { S } from "../../../../index-Cw1KtRQr.js";
 export {
   S as Segment
 };

package/dist/components/form/Datepicker/index.es.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { BREAKPOINT_MD, COLOR_NEUTRAL_40 } from "../../../astro/tokens/index.es.js";
 import "../../../index-BW2ZU5Hx.js";
 import { useRef, useState, useMemo, useEffect } from "react";
 import "../../Icon/index.es.js";
 import { IconCalendar } from "../../icons/IconCalendar/index.es.js";
 import { InputField } from "../InputField/index.es.js";
-import { D as DDMMYYYY, g as getDefaultDate, a as DatepickerCalendar, A as AUCalendarDate } from "../../../index-BcC9liUl.js";
+import { D as DDMMYYYY, g as getDefaultDate, a as DatepickerCalendar, A as AUCalendarDate } from "../../../index-Bkl5OBIY.js";
 import { a as above } from "../../../screen-DfYo7XQ_.js";
-import { u as useOutsideClick } from "../../../index-CeClo_WS.js";
-import { e as BREAKPOINT_MD, U as COLOR_NEUTRAL_40 } from "../../../tokens-C4ypB4bY.js";
+import { u as useOutsideClick } from "../../../index-Cw1KtRQr.js";
 import '../../Datepicker/styles.css';function useDatepicker({
   value,
   defaultValue = "empty",

package/dist/components/form/Field/Label/index.es.js

@@ -5,7 +5,7 @@ import "../../../Icon/index.es.js";
 import { IconAlertOctagon } from "../../../icons/IconAlertOctagon/index.es.js";
 import { IconCheck } from "../../../icons/IconCheck/index.es.js";
 import { IconSlash } from "../../../icons/IconSlash/index.es.js";
-import { a1 as COLOR_SUCCESS_50, H as COLOR_ERROR_50, U as COLOR_NEUTRAL_40 } from "../../../../tokens-C4ypB4bY.js";
+import { COLOR_SUCCESS_50, COLOR_ERROR_50, COLOR_NEUTRAL_40 } from "../../../../astro/tokens/index.es.js";
 const FieldLabel = ({
   id,
   labelId,

package/dist/components/form/SelectField/index.es.js

@@ -10,9 +10,9 @@ import { IconSlash } from "../../icons/IconSlash/index.es.js";
 import { Modal } from "../../Modal/index.es.js";
 import { Text } from "../../Text/index.es.js";
 import { Conditional } from "../../misc/Conditional/index.es.js";
+import { COLOR_NEUTRAL_40 } from "../../../astro/tokens/index.es.js";
 import { i as isMobile } from "../../../isMobile-RyKhTreE.js";
 import Field from "../Field/index.es.js";
-import { U as COLOR_NEUTRAL_40 } from "../../../tokens-C4ypB4bY.js";
 import '../../SelectField/styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false, fullScreenOptions = false) => {
   var _a;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);

package/dist/{index-BcC9liUl.js → index-Bkl5OBIY.js}

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as classNames } from "./index-BW2ZU5Hx.js";
-import { $ as $2aaf608024c21ca1$export$99faa760c7908e4f, a as $6f9a1820b787aac7$export$e1aef45b828286de, C as CalendarHeader, b as $6f9a1820b787aac7$export$5bd780d491cfc46c, c as $6f9a1820b787aac7$export$22e2d15eaa4d2377, d as $6f9a1820b787aac7$export$ad2135cac3a11b3d, e as $6f9a1820b787aac7$export$e11f8ba65d857bff, f as $6f9a1820b787aac7$export$5d847498420df57b } from "./index-CFYmtkje.js";
+import { $ as $2aaf608024c21ca1$export$99faa760c7908e4f, a as $6f9a1820b787aac7$export$e1aef45b828286de, C as CalendarHeader, b as $6f9a1820b787aac7$export$5bd780d491cfc46c, c as $6f9a1820b787aac7$export$22e2d15eaa4d2377, d as $6f9a1820b787aac7$export$ad2135cac3a11b3d, e as $6f9a1820b787aac7$export$e11f8ba65d857bff, f as $6f9a1820b787aac7$export$5d847498420df57b } from "./index-CZfMkAoF.js";
 import { Button } from "./components/Button/index.es.js";
 import { PortalHolder } from "./components/form/Datepicker/PortalHolder/index.es.js";
 import { useRef, useState, useEffect } from "react";
+import { BREAKPOINT_MD } from "./astro/tokens/index.es.js";
 import { a as above } from "./screen-DfYo7XQ_.js";
-import { e as BREAKPOINT_MD } from "./tokens-C4ypB4bY.js";
 import './components/index/styles.css';const DDMMYYYY = {
   placeholder: "DD/MM/YYYY",
   /** Apply DD/MM/YYYY to a field text while typing */
@@ -238,4 +238,4 @@ export {
   DatepickerCalendar as a,
   getDefaultDate as g
 };
-//# sourceMappingURL=index-BcC9liUl.js.map
+//# sourceMappingURL=index-Bkl5OBIY.js.map