@hzblj/kara-components 0.6.0 → 0.8.0

package/lib/module/atoms/text/text.android.js

@@ -2,6 +2,7 @@
 
 import { Text as ComposeText } from '@expo/ui/jetpack-compose';
 import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -26,12 +27,14 @@ export const Text = ({
   numberOfLines,
   testID,
   transform,
-  variant = 'body'
+  variant = 'body',
+  ...sx
 }) => {
   useHostGuard('Text');
   const theme = useAppTheme();
   const style = theme.typography[variant];
-  const modifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
+  const sxModifiers = useSxModifiers(sx);
+  const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
   return /*#__PURE__*/_jsx(ComposeText, {
     color: theme.colorString(color),
     maxLines: numberOfLines,

package/lib/module/atoms/text/text.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","ComposeText","testID","testIdModifier","useAppTheme","useMemo","useHostGuard","jsx","_jsx","DECORATION","none","strikethrough","underline","applyTransform","children","transform","toUpperCase","toLowerCase","decorationOf","decoration","undefined","align","color","numberOfLines","variant","theme","style","typography","modifiers","colorString","maxLines","fontFamily","fontSize","fontWeight","lineHeight","textAlign","textDecoration"],"sourceRoot":"../../../../src","sources":["atoms/text/text.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AAC5D,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,MAAM;EACZC,aAAa,EAAE,aAAa;EAC5BC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,cAAc,GAAGA,CAACC,QAA+B,EAAEC,SAAoC,KAAK;EAChG,IAAI,CAACA,SAAS,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;IAC9C,OAAOA,QAAQ;EACjB;EAEA,OAAOC,SAAS,KAAK,WAAW,GAAGD,QAAQ,CAACE,WAAW,CAAC,CAAC,GAAGF,QAAQ,CAACG,WAAW,CAAC,CAAC;AACpF,CAAC;AAED,MAAMC,YAAY,GAAIC,UAAsC,IAC1DA,UAAU,KAAKC,SAAS,GAAGA,SAAS,GAAGX,UAAU,CAACU,UAAU,CAAC;AAE/D,OAAO,MAAMnB,IAAmB,GAAGA,CAAC;EAClCqB,KAAK;EACLP,QAAQ;EACRQ,KAAK,GAAG,iBAAiB;EACzBH,UAAU;EACVI,aAAa;EACbrB,MAAM;EACNa,SAAS;EACTS,OAAO,GAAG;AACD,CAAC,KAAK;EACflB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMmB,KAAK,GAAGrB,WAAW,CAAC,CAAC;EAC3B,MAAMsB,KAAK,GAAGD,KAAK,CAACE,UAAU,CAACH,OAAO,CAAC;EACvC,MAAMI,SAAS,GAAGvB,OAAO,CAAC,MAAOH,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGkB,SAAU,EAAE,CAAClB,MAAM,CAAC,CAAC;EAE1F,oBACEM,IAAA,CAACP,WAAW;IACVqB,KAAK,EAAEG,KAAK,CAACI,WAAW,CAACP,KAAK,CAAE;IAChCQ,QAAQ,EAAEP,aAAc;IACxBK,SAAS,EAAEA,SAAU;IACrBF,KAAK,EAAE;MACLK,UAAU,EAAEL,KAAK,CAACK,UAAU;MAC5BC,QAAQ,EAAEN,KAAK,CAACM,QAAQ;MACxBC,UAAU,EAAEP,KAAK,CAACO,UAAU;MAC5BC,UAAU,EAAER,KAAK,CAACQ,UAAU;MAC5BC,SAAS,EAAEd,KAAK;MAChBe,cAAc,EAAElB,YAAY,CAACC,UAAU;IACzC,CAAE;IAAAL,QAAA,EAEDD,cAAc,CAACC,QAAQ,EAAEC,SAAS;EAAC,CACzB,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Text","ComposeText","testID","testIdModifier","useSxModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","DECORATION","none","strikethrough","underline","applyTransform","children","transform","toUpperCase","toLowerCase","decorationOf","decoration","undefined","align","color","numberOfLines","variant","sx","theme","style","typography","sxModifiers","modifiers","colorString","maxLines","fontFamily","fontSize","fontWeight","lineHeight","textAlign","textDecoration"],"sourceRoot":"../../../../src","sources":["atoms/text/text.android.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,0BAA0B;AAC5D,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE,MAAM;EACZC,aAAa,EAAE,aAAa;EAC5BC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,cAAc,GAAGA,CAACC,QAA+B,EAAEC,SAAoC,KAAK;EAChG,IAAI,CAACA,SAAS,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;IAC9C,OAAOA,QAAQ;EACjB;EAEA,OAAOC,SAAS,KAAK,WAAW,GAAGD,QAAQ,CAACE,WAAW,CAAC,CAAC,GAAGF,QAAQ,CAACG,WAAW,CAAC,CAAC;AACpF,CAAC;AAED,MAAMC,YAAY,GAAIC,UAAsC,IAC1DA,UAAU,KAAKC,SAAS,GAAGA,SAAS,GAAGX,UAAU,CAACU,UAAU,CAAC;AAE/D,OAAO,MAAMpB,IAAmB,GAAGA,CAAC;EAClCsB,KAAK;EACLP,QAAQ;EACRQ,KAAK,GAAG,iBAAiB;EACzBH,UAAU;EACVI,aAAa;EACbtB,MAAM;EACNc,SAAS;EACTS,OAAO,GAAG,MAAM;EAChB,GAAGC;AACM,CAAC,KAAK;EACfnB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMoB,KAAK,GAAGtB,WAAW,CAAC,CAAC;EAC3B,MAAMuB,KAAK,GAAGD,KAAK,CAACE,UAAU,CAACJ,OAAO,CAAC;EACvC,MAAMK,WAAW,GAAG1B,cAAc,CAACsB,EAAE,CAAC;EACtC,MAAMK,SAAS,GAAGzB,OAAO,CACvB,MAAOJ,MAAM,GAAG,CAAC,GAAG4B,WAAW,EAAE3B,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG4B,WAAY,EACvE,CAACA,WAAW,EAAE5B,MAAM,CACtB,CAAC;EAED,oBACEO,IAAA,CAACR,WAAW;IACVsB,KAAK,EAAEI,KAAK,CAACK,WAAW,CAACT,KAAK,CAAE;IAChCU,QAAQ,EAAET,aAAc;IACxBO,SAAS,EAAEA,SAAU;IACrBH,KAAK,EAAE;MACLM,UAAU,EAAEN,KAAK,CAACM,UAAU;MAC5BC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;MACxBC,UAAU,EAAER,KAAK,CAACQ,UAAU;MAC5BC,UAAU,EAAET,KAAK,CAACS,UAAU;MAC5BC,SAAS,EAAEhB,KAAK;MAChBiB,cAAc,EAAEpB,YAAY,CAACC,UAAU;IACzC,CAAE;IAAAL,QAAA,EAEDD,cAAc,CAACC,QAAQ,EAAEC,SAAS;EAAC,CACzB,CAAC;AAElB,CAAC","ignoreList":[]}

package/lib/module/atoms/text/text.ios.js

@@ -3,6 +3,7 @@
 import { Text as SwiftUIText } from '@expo/ui/swift-ui';
 import { foregroundStyle, lineLimit, lineSpacing, multilineTextAlignment, strikethrough, textCase, underline } from '@expo/ui/swift-ui/modifiers';
 import { scaledFont } from '@hzblj/kara-native/swift-ui';
+import { useSxModifiers } from '@hzblj/kara-sx';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { useHostGuard } from "../../host-context.js";
@@ -12,6 +13,13 @@ const ALIGNMENT = {
   left: 'leading',
   right: 'trailing'
 };
+
+/** Where a frame larger than the text — `wide`, `w`, `h` — puts it: on the side its lines align to, centred vertically. */
+const FRAME_ALIGNMENT = {
+  center: 'center',
+  left: 'leading',
+  right: 'trailing'
+};
 export const Text = ({
   align,
   children,
@@ -20,11 +28,14 @@ export const Text = ({
   numberOfLines,
   testID,
   transform,
-  variant = 'body'
+  variant = 'body',
+  ...sx
 }) => {
   useHostGuard('Text');
   const theme = useAppTheme();
   const style = theme.typography[variant];
+  // After the text's own modifiers: the font and colour belong to the glyphs, the padding and frame to the box around.
+  const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left']);
   const modifiers = useMemo(() => {
     const list = [
     // Not `@expo/ui`'s `font()`: for the platform's face it gives either Apple's size or a size that ignores Dynamic
@@ -56,8 +67,8 @@ export const Text = ({
     if (numberOfLines !== undefined) {
       list.push(lineLimit(numberOfLines));
     }
-    return list;
-  }, [align, color, decoration, numberOfLines, style, theme, transform]);
+    return [...list, ...sxModifiers];
+  }, [align, color, decoration, numberOfLines, style, sxModifiers, theme, transform]);
   return /*#__PURE__*/_jsx(SwiftUIText, {
     modifiers: modifiers,
     testID: testID,

package/lib/module/atoms/text/text.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Text","SwiftUIText","foregroundStyle","lineLimit","lineSpacing","multilineTextAlignment","strikethrough","textCase","underline","scaledFont","useAppTheme","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","center","left","right","align","children","color","decoration","numberOfLines","testID","transform","variant","theme","style","typography","modifiers","list","family","fontFamily","size","fontSize","textStyle","scalesWith","weight","Math","max","lineHeight","push","isActive","pattern","undefined"],"sourceRoot":"../../../../src","sources":["atoms/text/text.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AACrD,SACEC,eAAe,EACfC,SAAS,EACTC,WAAW,EAEXC,sBAAsB,EACtBC,aAAa,EACbC,QAAQ,EACRC,SAAS,QACJ,6BAA6B;AACpC,SAAQC,UAAU,QAAO,6BAA6B;AACtD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,MAAMC,SAAS,GAAG;EAChBC,MAAM,EAAE,QAAQ;EAChBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;AACT,CAAU;AAEV,OAAO,MAAMlB,IAAmB,GAAGA,CAAC;EAClCmB,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,iBAAiB;EACzBC,UAAU;EACVC,aAAa;EACbC,MAAM;EACNC,SAAS;EACTC,OAAO,GAAG;AACD,CAAC,KAAK;EACfd,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMe,KAAK,GAAGjB,WAAW,CAAC,CAAC;EAC3B,MAAMkB,KAAK,GAAGD,KAAK,CAACE,UAAU,CAACH,OAAO,CAAC;EAEvC,MAAMI,SAAS,GAAGnB,OAAO,CAAC,MAAM;IAC9B,MAAMoB,IAAsB,GAAG;IAC7B;IACA;IACAtB,UAAU,CAAC;MAACuB,MAAM,EAAEJ,KAAK,CAACK,UAAU;MAAEC,IAAI,EAAEN,KAAK,CAACO,QAAQ;MAAEC,SAAS,EAAER,KAAK,CAACS,UAAU;MAAEC,MAAM,EAAEV,KAAK,CAACU;IAAM,CAAC,CAAC,EAC/GlC,WAAW,CAACmC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,KAAK,CAACa,UAAU,GAAGb,KAAK,CAACO,QAAQ,CAAC,CAAC,EAC3DjC,eAAe,CAACyB,KAAK,CAACN,KAAK,CAACA,KAAK,CAAC,CAAC,CACpC;IAED,IAAIF,KAAK,EAAE;MACTY,IAAI,CAACW,IAAI,CAACrC,sBAAsB,CAACU,SAAS,CAACI,KAAK,CAAC,CAAC,CAAC;IACrD;IAEA,IAAIM,SAAS,EAAE;MACbM,IAAI,CAACW,IAAI,CAACnC,QAAQ,CAACkB,SAAS,CAAC,CAAC;IAChC;IAEA,IAAIH,UAAU,KAAK,WAAW,EAAE;MAC9BS,IAAI,CAACW,IAAI,CAAClC,SAAS,CAAC;QAACmC,QAAQ,EAAE,IAAI;QAAEC,OAAO,EAAE;MAAO,CAAC,CAAC,CAAC;IAC1D;IAEA,IAAItB,UAAU,KAAK,eAAe,EAAE;MAClCS,IAAI,CAACW,IAAI,CAACpC,aAAa,CAAC;QAACqC,QAAQ,EAAE,IAAI;QAAEC,OAAO,EAAE;MAAO,CAAC,CAAC,CAAC;IAC9D;IAEA,IAAIrB,aAAa,KAAKsB,SAAS,EAAE;MAC/Bd,IAAI,CAACW,IAAI,CAACvC,SAAS,CAACoB,aAAa,CAAC,CAAC;IACrC;IAEA,OAAOQ,IAAI;EACb,CAAC,EAAE,CAACZ,KAAK,EAAEE,KAAK,EAAEC,UAAU,EAAEC,aAAa,EAAEK,KAAK,EAAED,KAAK,EAAEF,SAAS,CAAC,CAAC;EAEtE,oBACEX,IAAA,CAACb,WAAW;IAAC6B,SAAS,EAAEA,SAAU;IAACN,MAAM,EAAEA,MAAO;IAAAJ,QAAA,EAC/CA;EAAQ,CACE,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["Text","SwiftUIText","foregroundStyle","lineLimit","lineSpacing","multilineTextAlignment","strikethrough","textCase","underline","scaledFont","useSxModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","ALIGNMENT","center","left","right","FRAME_ALIGNMENT","align","children","color","decoration","numberOfLines","testID","transform","variant","sx","theme","style","typography","sxModifiers","modifiers","list","family","fontFamily","size","fontSize","textStyle","scalesWith","weight","Math","max","lineHeight","push","isActive","pattern","undefined"],"sourceRoot":"../../../../src","sources":["atoms/text/text.ios.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/collapsible/collapsible.android.js

@@ -1,12 +1,31 @@
 "use strict";
 
-import { AnimatedVisibility, Column, Text as ComposeText, Row } from '@expo/ui/jetpack-compose';
-import { clickable } from '@expo/ui/jetpack-compose/modifiers';
-import { useAppTheme } from '@hzblj/kara-theme';
+import { AnimatedVisibility, Box, Column, Text as ComposeText, EnterTransition, ExitTransition, Row } from '@expo/ui/jetpack-compose';
+import { animated, clickable, defaultMinSize, fillMaxWidth, graphicsLayer, tween } from '@expo/ui/jetpack-compose/modifiers';
+import { duration, useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
 import { Glyph } from "../../glyph/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Material's standard easing, at the length a disclosure takes. */
+const TURN = tween({
+  durationMillis: duration.d200,
+  easing: 'fastOutSlowIn'
+});
+
+/** Down from the row, fading in — Compose's default grows from a corner, sideways as well as down. */
+const ENTER = EnterTransition.expandVertically().plus(EnterTransition.fadeIn());
+const EXIT = ExitTransition.shrinkVertically().plus(ExitTransition.fadeOut());
+const WIDE = [fillMaxWidth()];
+
+/** Material's least touch target. */
+const ROW_HEIGHT = 48;
+
+/**
+ * A pressable row and an animated reveal: the content expands down from the row, and the chevron turns a quarter
+ * toward it, as a Material disclosure does — it used to jump between two glyphs. The row spans its parent, the chevron
+ * at the far end, and is never shorter than a touch target.
+ */
 export const Collapsible = ({
   children,
   expanded,
@@ -15,8 +34,14 @@ export const Collapsible = ({
 }) => {
   useHostGuard('Collapsible');
   const theme = useAppTheme();
-  const modifiers = useMemo(() => [clickable(() => onExpandedChange(!expanded))], [expanded, onExpandedChange]);
+  const modifiers = useMemo(() => [fillMaxWidth(), defaultMinSize({
+    minHeight: ROW_HEIGHT
+  }), clickable(() => onExpandedChange(!expanded))], [expanded, onExpandedChange]);
+  const turn = useMemo(() => [graphicsLayer({
+    rotationZ: animated(expanded ? 90 : 0, TURN)
+  })], [expanded]);
   return /*#__PURE__*/_jsxs(Column, {
+    modifiers: WIDE,
     children: [/*#__PURE__*/_jsxs(Row, {
       horizontalArrangement: "spaceBetween",
       modifiers: modifiers,
@@ -25,11 +50,16 @@ export const Collapsible = ({
         color: theme.colorString('content.primary'),
         style: theme.typography.body,
         children: label
-      }), /*#__PURE__*/_jsx(Glyph, {
-        name: expanded ? 'chevronDown' : 'chevronRight',
-        size: "s20"
+      }), /*#__PURE__*/_jsx(Box, {
+        modifiers: turn,
+        children: /*#__PURE__*/_jsx(Glyph, {
+          name: "chevronRight",
+          size: "s20"
+        })
       })]
     }), /*#__PURE__*/_jsx(AnimatedVisibility, {
+      enterTransition: ENTER,
+      exitTransition: EXIT,
       visible: expanded,
       children: children
     })]

package/lib/module/molecules/collapsible/collapsible.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["AnimatedVisibility","Column","Text","ComposeText","Row","clickable","useAppTheme","useMemo","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","Collapsible","children","expanded","label","onExpandedChange","theme","modifiers","horizontalArrangement","verticalAlignment","color","colorString","style","typography","body","name","size","visible"],"sourceRoot":"../../../../src","sources":["molecules/collapsible/collapsible.android.tsx"],"mappings":";;AAAA,SAAQA,kBAAkB,EAAEC,MAAM,EAAEC,IAAI,IAAIC,WAAW,EAAEC,GAAG,QAAO,0BAA0B;AAC7F,SAAQC,SAAS,QAAO,oCAAoC;AAC5D,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAACC,QAAQ;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EACpHT,YAAY,CAAC,aAAa,CAAC;EAC3B,MAAMU,KAAK,GAAGb,WAAW,CAAC,CAAC;EAC3B,MAAMc,SAAS,GAAGb,OAAO,CAAC,MAAM,CAACF,SAAS,CAAC,MAAMa,gBAAgB,CAAC,CAACF,QAAQ,CAAC,CAAC,CAAC,EAAE,CAACA,QAAQ,EAAEE,gBAAgB,CAAC,CAAC;EAE7G,oBACEL,KAAA,CAACZ,MAAM;IAAAc,QAAA,gBACLF,KAAA,CAACT,GAAG;MAACiB,qBAAqB,EAAC,cAAc;MAACD,SAAS,EAAEA,SAAU;MAACE,iBAAiB,EAAC,QAAQ;MAAAP,QAAA,gBACxFJ,IAAA,CAACR,WAAW;QAACoB,KAAK,EAAEJ,KAAK,CAACK,WAAW,CAAC,iBAAiB,CAAE;QAACC,KAAK,EAAEN,KAAK,CAACO,UAAU,CAACC,IAAK;QAAAZ,QAAA,EACpFE;MAAK,CACK,CAAC,eACdN,IAAA,CAACH,KAAK;QAACoB,IAAI,EAAEZ,QAAQ,GAAG,aAAa,GAAG,cAAe;QAACa,IAAI,EAAC;MAAK,CAAE,CAAC;IAAA,CAClE,CAAC,eACNlB,IAAA,CAACX,kBAAkB;MAAC8B,OAAO,EAAEd,QAAS;MAAAD,QAAA,EAAEA;IAAQ,CAAqB,CAAC;EAAA,CAChE,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["AnimatedVisibility","Box","Column","Text","ComposeText","EnterTransition","ExitTransition","Row","animated","clickable","defaultMinSize","fillMaxWidth","graphicsLayer","tween","duration","useAppTheme","useMemo","Glyph","useHostGuard","jsx","_jsx","jsxs","_jsxs","TURN","durationMillis","d200","easing","ENTER","expandVertically","plus","fadeIn","EXIT","shrinkVertically","fadeOut","WIDE","ROW_HEIGHT","Collapsible","children","expanded","label","onExpandedChange","theme","modifiers","minHeight","turn","rotationZ","horizontalArrangement","verticalAlignment","color","colorString","style","typography","body","name","size","enterTransition","exitTransition","visible"],"sourceRoot":"../../../../src","sources":["molecules/collapsible/collapsible.android.tsx"],"mappings":";;AAAA,SACEA,kBAAkB,EAClBC,GAAG,EACHC,MAAM,EACNC,IAAI,IAAIC,WAAW,EACnBC,eAAe,EACfC,cAAc,EACdC,GAAG,QACE,0BAA0B;AACjC,SACEC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,YAAY,EACZC,aAAa,EACbC,KAAK,QACA,oCAAoC;AAC3C,SAAQC,QAAQ,EAAEC,WAAW,QAAO,mBAAmB;AACvD,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,KAAK,QAAO,sBAAa;AACjC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,IAAI,GAAGV,KAAK,CAAC;EAACW,cAAc,EAAEV,QAAQ,CAACW,IAAI;EAAEC,MAAM,EAAE;AAAe,CAAC,CAAC;;AAE5E;AACA,MAAMC,KAAK,GAAGtB,eAAe,CAACuB,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAACxB,eAAe,CAACyB,MAAM,CAAC,CAAC,CAAC;AAC/E,MAAMC,IAAI,GAAGzB,cAAc,CAAC0B,gBAAgB,CAAC,CAAC,CAACH,IAAI,CAACvB,cAAc,CAAC2B,OAAO,CAAC,CAAC,CAAC;AAE7E,MAAMC,IAAI,GAAG,CAACvB,YAAY,CAAC,CAAC,CAAC;;AAE7B;AACA,MAAMwB,UAAU,GAAG,EAAE;;AAErB;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAiC,GAAGA,CAAC;EAACC,QAAQ;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EACpHtB,YAAY,CAAC,aAAa,CAAC;EAC3B,MAAMuB,KAAK,GAAG1B,WAAW,CAAC,CAAC;EAC3B,MAAM2B,SAAS,GAAG1B,OAAO,CACvB,MAAM,CAACL,YAAY,CAAC,CAAC,EAAED,cAAc,CAAC;IAACiC,SAAS,EAAER;EAAU,CAAC,CAAC,EAAE1B,SAAS,CAAC,MAAM+B,gBAAgB,CAAC,CAACF,QAAQ,CAAC,CAAC,CAAC,EAC7G,CAACA,QAAQ,EAAEE,gBAAgB,CAC7B,CAAC;EACD,MAAMI,IAAI,GAAG5B,OAAO,CAAC,MAAM,CAACJ,aAAa,CAAC;IAACiC,SAAS,EAAErC,QAAQ,CAAC8B,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAEf,IAAI;EAAC,CAAC,CAAC,CAAC,EAAE,CAACe,QAAQ,CAAC,CAAC;EAEvG,oBACEhB,KAAA,CAACpB,MAAM;IAACwC,SAAS,EAAER,IAAK;IAAAG,QAAA,gBACtBf,KAAA,CAACf,GAAG;MAACuC,qBAAqB,EAAC,cAAc;MAACJ,SAAS,EAAEA,SAAU;MAACK,iBAAiB,EAAC,QAAQ;MAAAV,QAAA,gBACxFjB,IAAA,CAAChB,WAAW;QAAC4C,KAAK,EAAEP,KAAK,CAACQ,WAAW,CAAC,iBAAiB,CAAE;QAACC,KAAK,EAAET,KAAK,CAACU,UAAU,CAACC,IAAK;QAAAf,QAAA,EACpFE;MAAK,CACK,CAAC,eACdnB,IAAA,CAACnB,GAAG;QAACyC,SAAS,EAAEE,IAAK;QAAAP,QAAA,eACnBjB,IAAA,CAACH,KAAK;UAACoC,IAAI,EAAC,cAAc;UAACC,IAAI,EAAC;QAAK,CAAE;MAAC,CACrC,CAAC;IAAA,CACH,CAAC,eACNlC,IAAA,CAACpB,kBAAkB;MAACuD,eAAe,EAAE5B,KAAM;MAAC6B,cAAc,EAAEzB,IAAK;MAAC0B,OAAO,EAAEnB,QAAS;MAAAD,QAAA,EACjFA;IAAQ,CACS,CAAC;EAAA,CACf,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/molecules/navigation-bar/navigation-bar.android.js

@@ -4,17 +4,10 @@ import { iconResourceName } from '@hzblj/kara-native';
 import { TopAppBar } from '@hzblj/kara-native/jetpack-compose';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import { Island } from "../../atoms/island/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Material's small top app bar. */
 const BAR_HEIGHT = 64;
-const styles = StyleSheet.create({
-  bar: {
-    height: BAR_HEIGHT,
-    width: '100%'
-  }
-});
 const DEFAULT_LABELS = {
   back: 'Back',
   close: 'Close'
@@ -52,9 +45,10 @@ export const NavigationBar = ({
   const nativeLeadingItems = useMemo(() => leadingItems?.map(toNativeItem), [leadingItems]);
   const nativeTrailingItems = useMemo(() => trailingItems?.map(toNativeItem), [trailingItems]);
   return /*#__PURE__*/_jsx(Island, {
+    h: BAR_HEIGHT,
     matchContents: false,
-    style: styles.bar,
     testID: testID,
+    w: "100%",
     children: /*#__PURE__*/_jsx(TopAppBar, {
       fontFamily: font.fontFamily,
       fontSize: font.fontSize,

package/lib/module/molecules/navigation-bar/navigation-bar.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconResourceName","TopAppBar","useAppTheme","useMemo","StyleSheet","Island","jsx","_jsx","BAR_HEIGHT","styles","create","bar","height","width","DEFAULT_LABELS","back","close","toNativeItem","onPress","testID","item","type","iconName","icon","label","NavigationBar","inverted","leadingItems","title","titleAlignment","titleVisible","trailingItems","theme","font","typography","headline","color","nativeLeadingItems","map","nativeTrailingItems","matchContents","style","children","fontFamily","fontSize","itemColor","titleColor"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,SAAS,QAA2B,oCAAoC;AAChF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,MAAM,QAAO,6BAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGzC;AACA,MAAMC,UAAU,GAAG,EAAE;AAErB,MAAMC,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;EAC/BC,GAAG,EAAE;IAACC,MAAM,EAAEJ,UAAU;IAAEK,KAAK,EAAE;EAAM;AACzC,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAG;EAACC,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAU;AAE9D,MAAMC,YAAY,GAAGA,CAAC;EAACC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAuB,CAAC,KACjEA,IAAI,CAACC,IAAI,KAAK,MAAM,GAChB;EAACC,QAAQ,EAAEtB,gBAAgB,CAACoB,IAAI,CAACG,IAAI,CAAC;EAAEC,KAAK,EAAEJ,IAAI,CAACI,KAAK;EAAEN,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAE;AAAM,CAAC,GACzF;EAACG,KAAK,EAAEJ,IAAI,CAACI,KAAK,IAAIV,cAAc,CAACM,IAAI,CAACC,IAAI,CAAC;EAAEH,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAED,IAAI,CAACC;AAAI,CAAC;;AAExF;AACA,OAAO,MAAMI,aAAqC,GAAGA,CAAC;EACpDC,QAAQ,GAAG,KAAK;EAChBC,YAAY;EACZR,MAAM;EACNS,KAAK;EACLC,cAAc,GAAG,QAAQ;EACzBC,YAAY,GAAG,IAAI;EACnBC;AACkB,CAAC,KAAK;EACxB,MAAMC,KAAK,GAAG9B,WAAW,CAAC,CAAC;EAC3B,MAAM+B,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,QAAQ;EACtC,MAAMC,KAAK,GAAGJ,KAAK,CAACI,KAAK,CAACV,QAAQ,GAAG,eAAe,GAAG,iBAAiB,CAAC;EAEzE,MAAMW,kBAAkB,GAAGlC,OAAO,CAAC,MAAMwB,YAAY,EAAEW,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACU,YAAY,CAAC,CAAC;EACzF,MAAMY,mBAAmB,GAAGpC,OAAO,CAAC,MAAM4B,aAAa,EAAEO,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACc,aAAa,CAAC,CAAC;EAE5F,oBACExB,IAAA,CAACF,MAAM;IAACmC,aAAa,EAAE,KAAM;IAACC,KAAK,EAAEhC,MAAM,CAACE,GAAI;IAACQ,MAAM,EAAEA,MAAO;IAAAuB,QAAA,eAC9DnC,IAAA,CAACN,SAAS;MACR0C,UAAU,EAAEV,IAAI,CAACU,UAAW;MAC5BC,QAAQ,EAAEX,IAAI,CAACW,QAAS;MACxBC,SAAS,EAAET,KAAM;MACjBT,YAAY,EAAEU,kBAAmB;MACjCT,KAAK,EAAEA,KAAM;MACbC,cAAc,EAAEA,cAAe;MAC/BiB,UAAU,EAAEV,KAAM;MAClBN,YAAY,EAAEA,YAAa;MAC3BC,aAAa,EAAEQ;IAAoB,CACpC;EAAC,CACI,CAAC;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["iconResourceName","TopAppBar","useAppTheme","useMemo","Island","jsx","_jsx","BAR_HEIGHT","DEFAULT_LABELS","back","close","toNativeItem","onPress","testID","item","type","iconName","icon","label","NavigationBar","inverted","leadingItems","title","titleAlignment","titleVisible","trailingItems","theme","font","typography","headline","color","nativeLeadingItems","map","nativeTrailingItems","h","matchContents","w","children","fontFamily","fontSize","itemColor","titleColor"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,oBAAoB;AACnD,SAAQC,SAAS,QAA2B,oCAAoC;AAChF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAC7B,SAAQC,MAAM,QAAO,6BAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGzC;AACA,MAAMC,UAAU,GAAG,EAAE;AAErB,MAAMC,cAAc,GAAG;EAACC,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE;AAAO,CAAU;AAE9D,MAAMC,YAAY,GAAGA,CAAC;EAACC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAuB,CAAC,KACjEA,IAAI,CAACC,IAAI,KAAK,MAAM,GAChB;EAACC,QAAQ,EAAEhB,gBAAgB,CAACc,IAAI,CAACG,IAAI,CAAC;EAAEC,KAAK,EAAEJ,IAAI,CAACI,KAAK;EAAEN,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAE;AAAM,CAAC,GACzF;EAACG,KAAK,EAAEJ,IAAI,CAACI,KAAK,IAAIV,cAAc,CAACM,IAAI,CAACC,IAAI,CAAC;EAAEH,OAAO;EAAEC,MAAM;EAAEE,IAAI,EAAED,IAAI,CAACC;AAAI,CAAC;;AAExF;AACA,OAAO,MAAMI,aAAqC,GAAGA,CAAC;EACpDC,QAAQ,GAAG,KAAK;EAChBC,YAAY;EACZR,MAAM;EACNS,KAAK;EACLC,cAAc,GAAG,QAAQ;EACzBC,YAAY,GAAG,IAAI;EACnBC;AACkB,CAAC,KAAK;EACxB,MAAMC,KAAK,GAAGxB,WAAW,CAAC,CAAC;EAC3B,MAAMyB,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,QAAQ;EACtC,MAAMC,KAAK,GAAGJ,KAAK,CAACI,KAAK,CAACV,QAAQ,GAAG,eAAe,GAAG,iBAAiB,CAAC;EAEzE,MAAMW,kBAAkB,GAAG5B,OAAO,CAAC,MAAMkB,YAAY,EAAEW,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACU,YAAY,CAAC,CAAC;EACzF,MAAMY,mBAAmB,GAAG9B,OAAO,CAAC,MAAMsB,aAAa,EAAEO,GAAG,CAACrB,YAAY,CAAC,EAAE,CAACc,aAAa,CAAC,CAAC;EAE5F,oBACEnB,IAAA,CAACF,MAAM;IAAC8B,CAAC,EAAE3B,UAAW;IAAC4B,aAAa,EAAE,KAAM;IAACtB,MAAM,EAAEA,MAAO;IAACuB,CAAC,EAAC,MAAM;IAAAC,QAAA,eACnE/B,IAAA,CAACL,SAAS;MACRqC,UAAU,EAAEX,IAAI,CAACW,UAAW;MAC5BC,QAAQ,EAAEZ,IAAI,CAACY,QAAS;MACxBC,SAAS,EAAEV,KAAM;MACjBT,YAAY,EAAEU,kBAAmB;MACjCT,KAAK,EAAEA,KAAM;MACbC,cAAc,EAAEA,cAAe;MAC/BkB,UAAU,EAAEX,KAAM;MAClBN,YAAY,EAAEA,YAAa;MAC3BC,aAAa,EAAEQ;IAAoB,CACpC;EAAC,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/molecules/pager/pager.android.js

@@ -5,28 +5,29 @@ import { fillMaxSize, testID as testIdModifier, weight } from '@expo/ui/jetpack-
 import { spacing } from '@hzblj/kara-theme';
 import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HStack } from "../../atoms/h-stack/index.js";
+import { Spacer } from "../../atoms/spacer/index.js";
 import { VStack } from "../../atoms/v-stack/index.js";
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DOT_SIZE = 6;
 
-/** Compose ships no page indicator, so the dots are composed out of atoms. */
+/** Compose ships no page indicator, so the dots are composed out of atoms — centred between two spacers. */
 const PagerDots = ({
   count,
   current
-}) => /*#__PURE__*/_jsx(HStack, {
+}) => /*#__PURE__*/_jsxs(HStack, {
   align: "center",
   py: "s12",
   spacing: "s6",
   wide: true,
-  children: Array.from({
+  children: [/*#__PURE__*/_jsx(Spacer, {}), Array.from({
     length: count
   }, (_, index) => /*#__PURE__*/_jsx(VStack, {
     bg: index === current ? 'content.primary' : 'fill.tertiary',
     borderRadius: "full",
     h: DOT_SIZE,
     w: DOT_SIZE
-  }, index))
+  }, index)), /*#__PURE__*/_jsx(Spacer, {})]
 });
 export const Pager = ({
   children,

package/lib/module/molecules/pager/pager.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["HorizontalPager","fillMaxSize","testID","testIdModifier","weight","spacing","Children","useCallback","useEffect","useMemo","useRef","useState","HStack","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","DOT_SIZE","PagerDots","count","current","align","py","wide","children","Array","from","length","_","index","bg","borderRadius","h","w","Pager","indicators","onPageChange","page","pageSpacing","scrollEnabled","pagerRef","settledPage","currentPage","setCurrentPage","undefined","animateScrollToPage","onSettledPageChange","next","modifiers","pager","initialPage","onCurrentPageChange","ref","userScrollEnabled","tall"],"sourceRoot":"../../../../src","sources":["molecules/pager/pager.android.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["HorizontalPager","fillMaxSize","testID","testIdModifier","weight","spacing","Children","useCallback","useEffect","useMemo","useRef","useState","HStack","Spacer","VStack","useHostGuard","jsx","_jsx","jsxs","_jsxs","DOT_SIZE","PagerDots","count","current","align","py","wide","children","Array","from","length","_","index","bg","borderRadius","h","w","Pager","indicators","onPageChange","page","pageSpacing","scrollEnabled","pagerRef","settledPage","currentPage","setCurrentPage","undefined","animateScrollToPage","onSettledPageChange","next","modifiers","pager","initialPage","onCurrentPageChange","ref","userScrollEnabled","tall"],"sourceRoot":"../../../../src","sources":["molecules/pager/pager.android.tsx"],"mappings":";;AAAA,SAAQA,eAAe,QAAmC,0BAA0B;AACpF,SAAQC,WAAW,EAAuBC,MAAM,IAAIC,cAAc,EAAEC,MAAM,QAAO,oCAAoC;AACrH,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAO,OAAO;AAEjF,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,MAAMC,QAAQ,GAAG,CAAC;;AAElB;AACA,MAAMC,SAAS,GAAGA,CAAC;EAACC,KAAK;EAAEC;AAAyC,CAAC,kBACnEJ,KAAA,CAACP,MAAM;EAACY,KAAK,EAAC,QAAQ;EAACC,EAAE,EAAC,KAAK;EAACpB,OAAO,EAAC,IAAI;EAACqB,IAAI;EAAAC,QAAA,gBAC/CV,IAAA,CAACJ,MAAM,IAAE,CAAC,EACTe,KAAK,CAACC,IAAI,CAAC;IAACC,MAAM,EAAER;EAAK,CAAC,EAAE,CAACS,CAAC,EAAEC,KAAK,kBACpCf,IAAA,CAACH,MAAM;IACLmB,EAAE,EAAED,KAAK,KAAKT,OAAO,GAAG,iBAAiB,GAAG,eAAgB;IAC5DW,YAAY,EAAC,MAAM;IACnBC,CAAC,EAAEf,QAAS;IAEZgB,CAAC,EAAEhB;EAAS,GADPY,KAEN,CACF,CAAC,eACFf,IAAA,CAACJ,MAAM,IAAE,CAAC;AAAA,CACJ,CACT;AAED,OAAO,MAAMwB,KAAqB,GAAGA,CAAC;EACpCV,QAAQ;EACRW,UAAU,GAAG,IAAI;EACjBC,YAAY;EACZC,IAAI;EACJC,WAAW;EACXC,aAAa,GAAG,IAAI;EACpBxC;AACU,CAAC,KAAK;EAChBa,YAAY,CAAC,OAAO,CAAC;EAErB,MAAM4B,QAAQ,GAAGjC,MAAM,CAAwB,IAAI,CAAC;EACpD,MAAMkC,WAAW,GAAGlC,MAAM,CAAC8B,IAAI,IAAI,CAAC,CAAC;EACrC,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGnC,QAAQ,CAAC6B,IAAI,IAAI,CAAC,CAAC;;EAEzD;AACF;AACA;AACA;AACA;EACEhC,SAAS,CAAC,MAAM;IACd,IAAIgC,IAAI,KAAKO,SAAS,IAAIP,IAAI,KAAKI,WAAW,CAACrB,OAAO,EAAE;MACtD;IACF;IAEAqB,WAAW,CAACrB,OAAO,GAAGiB,IAAI;IAC1B,KAAKG,QAAQ,CAACpB,OAAO,EAAEyB,mBAAmB,CAACR,IAAI,CAAC;EAClD,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,MAAMS,mBAAmB,GAAG1C,WAAW,CACpC2C,IAAY,IAAK;IAChBN,WAAW,CAACrB,OAAO,GAAG2B,IAAI;IAC1BX,YAAY,GAAGW,IAAI,CAAC;EACtB,CAAC,EACD,CAACX,YAAY,CACf,CAAC;;EAED;EACA,MAAMY,SAAS,GAAG1C,OAAO,CACvB,MAAM,CAAC6B,UAAU,GAAGlC,MAAM,CAAC,CAAC,CAAC,GAAGH,WAAW,CAAC,CAAC,EAAE,IAAIC,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC3F,CAACoC,UAAU,EAAEpC,MAAM,CACrB,CAAC;EAED,MAAMkD,KAAK,gBACTnC,IAAA,CAACjB,eAAe;IACdqD,WAAW,EAAEb,IAAI,IAAI,CAAE;IACvBW,SAAS,EAAEA,SAAU;IACrBG,mBAAmB,EAAEhB,UAAU,GAAGQ,cAAc,GAAGC,SAAU;IAC7DE,mBAAmB,EAAEA,mBAAoB;IACzCR,WAAW,EAAEA,WAAW,KAAKM,SAAS,GAAGA,SAAS,GAAG1C,OAAO,CAACoC,WAAW,CAAE;IAC1Ec,GAAG,EAAEZ,QAAS;IACda,iBAAiB,EAAEd,aAAc;IAAAf,QAAA,EAEhCA;EAAQ,CACM,CAClB;EAED,IAAI,CAACW,UAAU,EAAE;IACf,OAAOc,KAAK;EACd;EAEA,oBACEjC,KAAA,CAACL,MAAM;IAAC2C,IAAI;IAAC/B,IAAI;IAAAC,QAAA,GACdyB,KAAK,eACNnC,IAAA,CAACI,SAAS;MAACC,KAAK,EAAEhB,QAAQ,CAACgB,KAAK,CAACK,QAAQ,CAAE;MAACJ,OAAO,EAAEsB;IAAY,CAAE,CAAC;EAAA,CAC9D,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js

@@ -1,10 +1,46 @@
 "use strict";
 
-import { Box } from "../../atoms/box/index.js";
+import { duration, opacity } from '@hzblj/kara-theme';
+import { cloneElement, useCallback, useRef } from 'react';
+import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ABox, Box } from "../../atoms/box/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Less than a pixel scrolled is not scrolled — a fling settles a fraction away from the edge. */
+const EDGE_SLOP = 0.5;
+const FILL = {
+  duration: duration.d200
+};
+/** A bar, and behind it the container colour it fills with — faded in and out, not switched. */
+const EdgeBar = ({
+  children,
+  filled
+}) => {
+  const fill = useAnimatedStyle(() => ({
+    opacity: filled.value
+  }), []);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(ABox, {
+      bg: "surface.secondary",
+      bottom: 0,
+      left: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      right: 0,
+      style: fill,
+      top: 0
+    }), children]
+  });
+};
+
 /**
- * Android has no scroll edge effect, and a React Native scroll view there has no `contentInset` to slide content under
- * a bar with — so the bars stack above and below the scroll view instead of over it. Give them a background.
+ * Material's take on the scroll edge: a React Native scroll view has no `contentInset` to slide content under a bar on
+ * Android, so the bars stack above and below it, and do what a Material top app bar does on scroll — transparent at
+ * rest, filled with `surface.secondary` (the scrolled container colour, `surfaceContainer`) once content has scrolled
+ * under it. The bottom bar mirrors it: filled while there is more content below. The scroll view keeps its own
+ * `onScroll`, `onLayout` and `onContentSizeChange`.
  */
 export const ScrollEdgeContainer = ({
   automaticInsets: _automaticInsets,
@@ -14,12 +50,79 @@ export const ScrollEdgeContainer = ({
   testID,
   topBar,
   ...sx
-}) => /*#__PURE__*/_jsxs(Box, {
-  ...sx,
-  testID: testID,
-  children: [topBar, /*#__PURE__*/_jsx(Box, {
-    flex: 1,
-    children: children
-  }), bottomBar]
-});
+}) => {
+  const topFilled = useSharedValue(opacity.o0);
+  const bottomFilled = useSharedValue(opacity.o0);
+  const metrics = useRef({
+    content: 0,
+    offset: 0,
+    viewport: 0
+  });
+  const state = useRef({
+    bottom: false,
+    top: false
+  });
+  const {
+    flex,
+    onContentSizeChange,
+    onLayout,
+    onScroll,
+    scrollEventThrottle
+  } = children.props;
+
+  // Only a change of state animates; a scroll event restating the same one would restart the fade.
+  const update = useCallback(() => {
+    const {
+      content,
+      offset,
+      viewport
+    } = metrics.current;
+    const top = offset > EDGE_SLOP;
+    const bottom = viewport > 0 && offset + viewport < content - EDGE_SLOP;
+    if (top !== state.current.top) {
+      state.current.top = top;
+      topFilled.value = withTiming(top ? opacity.o100 : opacity.o0, FILL);
+    }
+    if (bottom !== state.current.bottom) {
+      state.current.bottom = bottom;
+      bottomFilled.value = withTiming(bottom ? opacity.o100 : opacity.o0, FILL);
+    }
+  }, [bottomFilled, topFilled]);
+
+  // `flex` so the scroll view takes the room between the bars — left to its content, it grew to the content's height,
+  // ran under the bottom bar and had nothing to scroll.
+  const scrollable = /*#__PURE__*/cloneElement(children, {
+    flex: flex ?? 1,
+    onContentSizeChange: (width, height) => {
+      metrics.current.content = height;
+      update();
+      onContentSizeChange?.(width, height);
+    },
+    onLayout: event => {
+      metrics.current.viewport = event.nativeEvent.layout.height;
+      update();
+      onLayout?.(event);
+    },
+    onScroll: event => {
+      metrics.current.offset = event.nativeEvent.contentOffset.y;
+      update();
+      onScroll?.(event);
+    },
+    scrollEventThrottle: scrollEventThrottle ?? 16
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    ...sx,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(EdgeBar, {
+      filled: topFilled,
+      children: topBar
+    }), /*#__PURE__*/_jsx(Box, {
+      flex: 1,
+      children: scrollable
+    }), /*#__PURE__*/_jsx(EdgeBar, {
+      filled: bottomFilled,
+      children: bottomBar
+    })]
+  });
+};
 //# sourceMappingURL=scroll-edge-container.android.js.map

package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["Box","jsx","_jsx","jsxs","_jsxs","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","children","effect","_effect","testID","topBar","sx","flex"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,0BAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAiD,GAAGA,CAAC;EAChEC,eAAe,EAAEC,gBAAgB;EACjCC,SAAS;EACTC,QAAQ;EACRC,MAAM,EAAEC,OAAO;EACfC,MAAM;EACNC,MAAM;EACN,GAAGC;AACqB,CAAC,kBACzBV,KAAA,CAACJ,GAAG;EAAA,GAAKc,EAAE;EAAEF,MAAM,EAAEA,MAAO;EAAAH,QAAA,GACzBI,MAAM,eACPX,IAAA,CAACF,GAAG;IAACe,IAAI,EAAE,CAAE;IAAAN,QAAA,EAAEA;EAAQ,CAAM,CAAC,EAC7BD,SAAS;AAAA,CACP,CACN","ignoreList":[]}
+{"version":3,"names":["duration","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","ABox","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","d200","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","effect","_effect","testID","topBar","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/molecules/search-bar/search-bar.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useAppTheme } from '@hzblj/kara-theme';
-import { TextInput } from 'react-native';
+import { Platform, TextInput } from 'react-native';
 import { Box } from "../../atoms/box/index.js";
 import { Pressable } from "../../atoms/pressable/index.js";
 import { RnGlyph } from "../../glyph/index.js";
@@ -13,6 +13,19 @@ export const SearchBar = ({
   value
 }) => {
   const theme = useAppTheme();
+  const {
+    lineHeight,
+    ...face
+  } = theme.typography.body;
+  /**
+   * A single-line `UITextField` sets its text against the bottom of a line taller than the font, so the variant's
+   * `lineHeight` pushed the text below the magnifier beside it. iOS takes the face without it, in a field as tall as
+   * the line would have been; Android centres the line and keeps it.
+   */
+  const text = Platform.OS === 'ios' ? {
+    ...face,
+    height: lineHeight
+  } : theme.typography.body;
   return /*#__PURE__*/_jsxs(Box, {
     align: "center",
     bg: "fill.quaternary",
@@ -31,7 +44,7 @@ export const SearchBar = ({
       onChangeText: onChangeText,
       placeholder: placeholder,
       placeholderTextColor: theme.color('content.quaternary'),
-      style: [theme.typography.body, {
+      style: [text, {
         color: theme.color('content.primary'),
         flex: 1,
         padding: 0

package/lib/module/molecules/search-bar/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useAppTheme","TextInput","Box","Pressable","RnGlyph","jsx","_jsx","jsxs","_jsxs","SearchBar","onChangeText","placeholder","testID","value","theme","align","bg","borderRadius","flexDirection","gap","px","py","wide","children","color","name","size","placeholderTextColor","style","typography","body","flex","padding","length","onPress"],"sourceRoot":"../../../../src","sources":["molecules/search-bar/search-bar.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,SAAS,QAAO,cAAc;AAEtC,SAAQC,GAAG,QAAO,0BAAiB;AACnC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,OAAO,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY;EACZC,WAAW,GAAG,QAAQ;EACtBC,MAAM;EACNC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAE3B,oBACEQ,KAAA,CAACN,GAAG;IACFa,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,iBAAiB;IACpBC,YAAY,EAAC,QAAQ;IACrBC,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAC,IAAI;IACRC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,IAAI;IACPT,MAAM,EAAEA,MAAO;IACfU,IAAI;IAAAC,QAAA,gBAEJjB,IAAA,CAACF,OAAO;MAACoB,KAAK,EAAC,kBAAkB;MAACC,IAAI,EAAC,QAAQ;MAACC,IAAI,EAAC;IAAK,CAAE,CAAC,eAC7DpB,IAAA,CAACL,SAAS;MACRS,YAAY,EAAEA,YAAa;MAC3BC,WAAW,EAAEA,WAAY;MACzBgB,oBAAoB,EAAEb,KAAK,CAACU,KAAK,CAAC,oBAAoB,CAAE;MACxDI,KAAK,EAAE,CAACd,KAAK,CAACe,UAAU,CAACC,IAAI,EAAE;QAACN,KAAK,EAAEV,KAAK,CAACU,KAAK,CAAC,iBAAiB,CAAC;QAAEO,IAAI,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAC,CAAC,CAAE;MAC7FnB,KAAK,EAAEA;IAAM,CACd,CAAC,EACDA,KAAK,CAACoB,MAAM,GAAG,CAAC,gBACf3B,IAAA,CAACH,SAAS;MAAC+B,OAAO,EAAEA,CAAA,KAAMxB,YAAY,GAAG,EAAE,CAAE;MAAAa,QAAA,eAC3CjB,IAAA,CAACF,OAAO;QAACoB,KAAK,EAAC,kBAAkB;QAACC,IAAI,EAAC,OAAO;QAACC,IAAI,EAAC;MAAK,CAAE;IAAC,CACnD,CAAC,GACV,IAAI;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["useAppTheme","Platform","TextInput","Box","Pressable","RnGlyph","jsx","_jsx","jsxs","_jsxs","SearchBar","onChangeText","placeholder","testID","value","theme","lineHeight","face","typography","body","text","OS","height","align","bg","borderRadius","flexDirection","gap","px","py","wide","children","color","name","size","placeholderTextColor","style","flex","padding","length","onPress"],"sourceRoot":"../../../../src","sources":["molecules/search-bar/search-bar.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,QAAQ,EAAEC,SAAS,QAAO,cAAc;AAEhD,SAAQC,GAAG,QAAO,0BAAiB;AACnC,SAAQC,SAAS,QAAO,gCAAuB;AAC/C,SAAQC,OAAO,QAAO,sBAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAC5CC,YAAY;EACZC,WAAW,GAAG,QAAQ;EACtBC,MAAM;EACNC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGf,WAAW,CAAC,CAAC;EAC3B,MAAM;IAACgB,UAAU;IAAE,GAAGC;EAAI,CAAC,GAAGF,KAAK,CAACG,UAAU,CAACC,IAAI;EACnD;AACF;AACA;AACA;AACA;EACE,MAAMC,IAAI,GAAGnB,QAAQ,CAACoB,EAAE,KAAK,KAAK,GAAG;IAAC,GAAGJ,IAAI;IAAEK,MAAM,EAAEN;EAAU,CAAC,GAAGD,KAAK,CAACG,UAAU,CAACC,IAAI;EAE1F,oBACEV,KAAA,CAACN,GAAG;IACFoB,KAAK,EAAC,QAAQ;IACdC,EAAE,EAAC,iBAAiB;IACpBC,YAAY,EAAC,QAAQ;IACrBC,aAAa,EAAC,KAAK;IACnBC,GAAG,EAAC,IAAI;IACRC,EAAE,EAAC,KAAK;IACRC,EAAE,EAAC,IAAI;IACPhB,MAAM,EAAEA,MAAO;IACfiB,IAAI;IAAAC,QAAA,gBAEJxB,IAAA,CAACF,OAAO;MAAC2B,KAAK,EAAC,kBAAkB;MAACC,IAAI,EAAC,QAAQ;MAACC,IAAI,EAAC;IAAK,CAAE,CAAC,eAC7D3B,IAAA,CAACL,SAAS;MACRS,YAAY,EAAEA,YAAa;MAC3BC,WAAW,EAAEA,WAAY;MACzBuB,oBAAoB,EAAEpB,KAAK,CAACiB,KAAK,CAAC,oBAAoB,CAAE;MACxDI,KAAK,EAAE,CAAChB,IAAI,EAAE;QAACY,KAAK,EAAEjB,KAAK,CAACiB,KAAK,CAAC,iBAAiB,CAAC;QAAEK,IAAI,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAC,CAAC,CAAE;MAC5ExB,KAAK,EAAEA;IAAM,CACd,CAAC,EACDA,KAAK,CAACyB,MAAM,GAAG,CAAC,gBACfhC,IAAA,CAACH,SAAS;MAACoC,OAAO,EAAEA,CAAA,KAAM7B,YAAY,GAAG,EAAE,CAAE;MAAAoB,QAAA,eAC3CxB,IAAA,CAACF,OAAO;QAAC2B,KAAK,EAAC,kBAAkB;QAACC,IAAI,EAAC,OAAO;QAACC,IAAI,EAAC;MAAK,CAAE;IAAC,CACnD,CAAC,GACV,IAAI;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/molecules/stepper/stepper.ios.js

@@ -1,8 +1,21 @@
 "use strict";
 
 import { Stepper as SwiftUIStepper } from '@expo/ui/swift-ui';
+import { labelsHidden } from '@expo/ui/swift-ui/modifiers';
+import { useRef } from 'react';
+import { HStack } from "../../atoms/h-stack/index.js";
+import { Spacer } from "../../atoms/spacer/index.js";
+import { Text } from "../../atoms/text/index.js";
 import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The label stays VoiceOver's, on the control; on screen it is the row's own text. */
+const LABEL_HIDDEN = [labelsHidden()];
+
+/**
+ * SwiftUI's `Stepper` at the end of a row, the label leading and the value just before the control — the way iOS's own
+ * settings show a stepped value. The value rolls to the next one (`numericText`), up or down with the change, in
+ * monospaced digits so the row does not jump.
+ */
 export const Stepper = ({
   label,
   max,
@@ -12,13 +25,37 @@ export const Stepper = ({
   value
 }) => {
   useHostGuard('Stepper');
-  return /*#__PURE__*/_jsx(SwiftUIStepper, {
-    label: label,
-    max: max,
-    min: min,
-    onValueChange: onValueChange,
-    step: step,
-    value: value
+  const previous = useRef(value);
+  const countsDown = value < previous.current;
+  previous.current = value;
+  return /*#__PURE__*/_jsxs(HStack, {
+    align: "center",
+    spacing: "s12",
+    wide: true,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: label
+    }), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(Text, {
+      color: "content.secondary",
+      ios: {
+        animation: {
+          value
+        },
+        contentTransition: {
+          countsDown,
+          type: 'numericText'
+        },
+        monospacedDigit: true
+      },
+      children: String(value)
+    }), /*#__PURE__*/_jsx(SwiftUIStepper, {
+      label: label,
+      max: max,
+      min: min,
+      modifiers: LABEL_HIDDEN,
+      onValueChange: onValueChange,
+      step: step,
+      value: value
+    })]
   });
 };
 //# sourceMappingURL=stepper.ios.js.map

package/lib/module/molecules/stepper/stepper.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["Stepper","SwiftUIStepper","useHostGuard","jsx","_jsx","label","max","min","onValueChange","step","value"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAE3D,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMJ,OAAyB,GAAGA,CAAC;EAACK,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GR,YAAY,CAAC,SAAS,CAAC;EAEvB,oBAAOE,IAAA,CAACH,cAAc;IAACI,KAAK,EAAEA,KAAM;IAACC,GAAG,EAAEA,GAAI;IAACC,GAAG,EAAEA,GAAI;IAACC,aAAa,EAAEA,aAAc;IAACC,IAAI,EAAEA,IAAK;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC;AACrH,CAAC","ignoreList":[]}
+{"version":3,"names":["Stepper","SwiftUIStepper","labelsHidden","useRef","HStack","Spacer","Text","useHostGuard","jsx","_jsx","jsxs","_jsxs","LABEL_HIDDEN","label","max","min","onValueChange","step","value","previous","countsDown","current","align","spacing","wide","children","color","ios","animation","contentTransition","type","monospacedDigit","String","modifiers"],"sourceRoot":"../../../../src","sources":["molecules/stepper/stepper.ios.tsx"],"mappings":";;AAAA,SAAQA,OAAO,IAAIC,cAAc,QAAO,mBAAmB;AAC3D,SAAQC,YAAY,QAAO,6BAA6B;AACxD,SAAQC,MAAM,QAAO,OAAO;AAE5B,SAAQC,MAAM,QAAO,8BAAqB;AAC1C,SAAQC,MAAM,QAAO,6BAAoB;AACzC,SAAQC,IAAI,QAAO,2BAAkB;AACrC,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,YAAY,GAAG,CAACV,YAAY,CAAC,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMF,OAAyB,GAAGA,CAAC;EAACa,KAAK;EAAEC,GAAG;EAAEC,GAAG;EAAEC,aAAa;EAAEC,IAAI,GAAG,CAAC;EAAEC;AAAmB,CAAC,KAAK;EAC5GX,YAAY,CAAC,SAAS,CAAC;EACvB,MAAMY,QAAQ,GAAGhB,MAAM,CAACe,KAAK,CAAC;EAC9B,MAAME,UAAU,GAAGF,KAAK,GAAGC,QAAQ,CAACE,OAAO;EAC3CF,QAAQ,CAACE,OAAO,GAAGH,KAAK;EAExB,oBACEP,KAAA,CAACP,MAAM;IAACkB,KAAK,EAAC,QAAQ;IAACC,OAAO,EAAC,KAAK;IAACC,IAAI;IAAAC,QAAA,gBACvChB,IAAA,CAACH,IAAI;MAAAmB,QAAA,EAAEZ;IAAK,CAAO,CAAC,eACpBJ,IAAA,CAACJ,MAAM,IAAE,CAAC,eACVI,IAAA,CAACH,IAAI;MACHoB,KAAK,EAAC,mBAAmB;MACzBC,GAAG,EAAE;QAACC,SAAS,EAAE;UAACV;QAAK,CAAC;QAAEW,iBAAiB,EAAE;UAACT,UAAU;UAAEU,IAAI,EAAE;QAAa,CAAC;QAAEC,eAAe,EAAE;MAAI,CAAE;MAAAN,QAAA,EAEtGO,MAAM,CAACd,KAAK;IAAC,CACV,CAAC,eACPT,IAAA,CAACR,cAAc;MACbY,KAAK,EAAEA,KAAM;MACbC,GAAG,EAAEA,GAAI;MACTC,GAAG,EAAEA,GAAI;MACTkB,SAAS,EAAErB,YAAa;MACxBI,aAAa,EAAEA,aAAc;MAC7BC,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACI,CAAC;AAEb,CAAC","ignoreList":[]}

package/lib/module/molecules/tooltip/tooltip.android.js

@@ -1,19 +1,30 @@
 "use strict";
 
-import { Text as ComposeText, TooltipBox } from '@expo/ui/jetpack-compose';
+import { Text as ComposeText } from '@expo/ui/jetpack-compose';
+import { TooltipBox } from '@hzblj/kara-native/jetpack-compose';
 import { useAppTheme } from '@hzblj/kara-theme';
+import { useCallback } from 'react';
 import { useHostGuard } from "../../host-context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Material's plain tooltip in kara's controlled `TooltipBox`: shown while `visible`, centred above the anchor and kept
+ * inside the window. Material's own would open on a long press and hide itself without a word to JS.
+ */
 export const Tooltip = ({
   children,
-  text
+  onDismiss,
+  text,
+  visible
 }) => {
   useHostGuard('Tooltip');
   const theme = useAppTheme();
+  const onDismissRequest = useCallback(() => onDismiss(), [onDismiss]);
   return /*#__PURE__*/_jsxs(TooltipBox, {
-    children: [/*#__PURE__*/_jsx(TooltipBox.PlainTooltip, {
-      containerColor: theme.colorString('surface.high.contrast'),
-      contentColor: theme.colorString('content.on.high.contrast'),
+    containerColor: theme.color('surface.high.contrast'),
+    isPresented: visible,
+    onDismissRequest: onDismissRequest,
+    plain: true,
+    children: [/*#__PURE__*/_jsx(TooltipBox.Text, {
       children: /*#__PURE__*/_jsx(ComposeText, {
         color: theme.colorString('content.on.high.contrast'),
         style: theme.typography.footnote,