@butternutbox/pawprint-native 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/.turbo/turbo-build.log +30 -0
  2. package/COMPONENT_GUIDELINES.md +610 -0
  3. package/README.md +72 -0
  4. package/dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 +0 -0
  5. package/dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 +0 -0
  6. package/dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 +0 -0
  7. package/dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 +0 -0
  8. package/dist/ida-narrow-500-normal-C6I2PK4T.woff2 +0 -0
  9. package/dist/ida-narrow-700-normal-UPHPRIN6.woff2 +0 -0
  10. package/dist/index.cjs +2686 -0
  11. package/dist/index.cjs.map +1 -0
  12. package/dist/index.d.cts +780 -0
  13. package/dist/index.d.ts +780 -0
  14. package/dist/index.js +2617 -0
  15. package/dist/index.js.map +1 -0
  16. package/eslint.config.js +3 -0
  17. package/llms.txt +458 -0
  18. package/package.json +57 -0
  19. package/src/components/atoms/Avatar/Avatar.stories.tsx +125 -0
  20. package/src/components/atoms/Avatar/Avatar.tsx +159 -0
  21. package/src/components/atoms/Avatar/index.ts +7 -0
  22. package/src/components/atoms/Badge/Badge.stories.tsx +231 -0
  23. package/src/components/atoms/Badge/Badge.tsx +184 -0
  24. package/src/components/atoms/Badge/index.ts +2 -0
  25. package/src/components/atoms/Button/Button.stories.tsx +145 -0
  26. package/src/components/atoms/Button/Button.tsx +261 -0
  27. package/src/components/atoms/Button/index.ts +7 -0
  28. package/src/components/atoms/Hint/Hint.stories.tsx +84 -0
  29. package/src/components/atoms/Hint/Hint.tsx +59 -0
  30. package/src/components/atoms/Hint/index.ts +2 -0
  31. package/src/components/atoms/Icon/Icon.stories.tsx +200 -0
  32. package/src/components/atoms/Icon/Icon.tsx +112 -0
  33. package/src/components/atoms/Icon/index.ts +8 -0
  34. package/src/components/atoms/IconButton/IconButton.stories.tsx +162 -0
  35. package/src/components/atoms/IconButton/IconButton.tsx +227 -0
  36. package/src/components/atoms/IconButton/index.ts +7 -0
  37. package/src/components/atoms/Illustration/Illustration.stories.tsx +167 -0
  38. package/src/components/atoms/Illustration/Illustration.tsx +81 -0
  39. package/src/components/atoms/Illustration/index.ts +6 -0
  40. package/src/components/atoms/Input/Input.stories.tsx +142 -0
  41. package/src/components/atoms/Input/Input.tsx +110 -0
  42. package/src/components/atoms/Input/InputDescription.tsx +49 -0
  43. package/src/components/atoms/Input/InputError.tsx +39 -0
  44. package/src/components/atoms/Input/InputField.tsx +119 -0
  45. package/src/components/atoms/Input/InputLabel.tsx +61 -0
  46. package/src/components/atoms/Input/index.ts +10 -0
  47. package/src/components/atoms/Link/Link.stories.tsx +119 -0
  48. package/src/components/atoms/Link/Link.tsx +118 -0
  49. package/src/components/atoms/Link/index.ts +2 -0
  50. package/src/components/atoms/Logo/Logo.registry.ts +39 -0
  51. package/src/components/atoms/Logo/Logo.tsx +68 -0
  52. package/src/components/atoms/Logo/index.ts +4 -0
  53. package/src/components/atoms/Spinner/Spinner.stories.tsx +98 -0
  54. package/src/components/atoms/Spinner/Spinner.tsx +91 -0
  55. package/src/components/atoms/Spinner/index.ts +2 -0
  56. package/src/components/atoms/Switch/Switch.stories.tsx +120 -0
  57. package/src/components/atoms/Switch/Switch.tsx +196 -0
  58. package/src/components/atoms/Switch/index.ts +2 -0
  59. package/src/components/atoms/Tag/Tag.stories.tsx +89 -0
  60. package/src/components/atoms/Tag/Tag.tsx +122 -0
  61. package/src/components/atoms/Tag/index.ts +2 -0
  62. package/src/components/atoms/Typography/Typography.stories.tsx +315 -0
  63. package/src/components/atoms/Typography/Typography.tsx +284 -0
  64. package/src/components/atoms/Typography/index.ts +2 -0
  65. package/src/components/atoms/index.ts +14 -0
  66. package/src/components/index.ts +2 -0
  67. package/src/components/molecules/ButtonDock/ButtonDock.stories.tsx +95 -0
  68. package/src/components/molecules/ButtonDock/ButtonDock.tsx +148 -0
  69. package/src/components/molecules/ButtonDock/index.ts +2 -0
  70. package/src/components/molecules/ButtonGroup/ButtonGroup.stories.tsx +82 -0
  71. package/src/components/molecules/ButtonGroup/ButtonGroup.tsx +94 -0
  72. package/src/components/molecules/ButtonGroup/index.ts +2 -0
  73. package/src/components/molecules/Checkbox/Checkbox.stories.tsx +148 -0
  74. package/src/components/molecules/Checkbox/Checkbox.tsx +279 -0
  75. package/src/components/molecules/Checkbox/CheckboxGroup.tsx +53 -0
  76. package/src/components/molecules/Checkbox/index.ts +4 -0
  77. package/src/components/molecules/Radio/Radio.stories.tsx +182 -0
  78. package/src/components/molecules/Radio/Radio.tsx +249 -0
  79. package/src/components/molecules/Radio/RadioGroup.tsx +142 -0
  80. package/src/components/molecules/Radio/index.ts +4 -0
  81. package/src/components/molecules/SegmentedControl/SegmentedControl.stories.tsx +151 -0
  82. package/src/components/molecules/SegmentedControl/SegmentedControl.tsx +323 -0
  83. package/src/components/molecules/SegmentedControl/index.ts +5 -0
  84. package/src/components/molecules/Slider/Slider.stories.tsx +144 -0
  85. package/src/components/molecules/Slider/Slider.tsx +303 -0
  86. package/src/components/molecules/Slider/index.ts +2 -0
  87. package/src/components/molecules/index.ts +6 -0
  88. package/src/fonts/ibm-plex-sans-condensed-400-normal.woff2 +0 -0
  89. package/src/fonts/ibm-plex-sans-condensed-500-normal.woff2 +0 -0
  90. package/src/fonts/ibm-plex-sans-condensed-600-normal.woff2 +0 -0
  91. package/src/fonts/ibm-plex-sans-condensed-700-normal.woff2 +0 -0
  92. package/src/fonts/ida-narrow-500-normal.woff2 +0 -0
  93. package/src/fonts/ida-narrow-700-normal.woff2 +0 -0
  94. package/src/fonts/index.ts +49 -0
  95. package/src/index.ts +9 -0
  96. package/src/theme/PawprintProvider.tsx +26 -0
  97. package/src/theme/ThemeProvider.tsx +63 -0
  98. package/src/theme/index.ts +5 -0
  99. package/src/theme/theme.ts +3 -0
  100. package/src/theme/utils.ts +31 -0
  101. package/src/types/fonts.d.ts +4 -0
  102. package/src/types/index.ts +1 -0
  103. package/src/types/theme.ts +24 -0
  104. package/tsconfig.json +5 -0
  105. package/tsup.config.ts +11 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,2686 @@
1
+ 'use strict';
2
+
3
+ var react = require('@emotion/react');
4
+ var pawprintTokens = require('@butternutbox/pawprint-tokens');
5
+ var styled25 = require('@emotion/native');
6
+ var React26 = require('react');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+ var AvatarPrimitive = require('@rn-primitives/avatar');
9
+ var reactNative = require('react-native');
10
+ var SwitchPrimitive = require('@rn-primitives/switch');
11
+ var CheckboxPrimitive = require('@rn-primitives/checkbox');
12
+ var SliderPrimitive = require('@rn-primitives/slider');
13
+
14
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
+
16
+ function _interopNamespace(e) {
17
+ if (e && e.__esModule) return e;
18
+ var n = Object.create(null);
19
+ if (e) {
20
+ Object.keys(e).forEach(function (k) {
21
+ if (k !== 'default') {
22
+ var d = Object.getOwnPropertyDescriptor(e, k);
23
+ Object.defineProperty(n, k, d.get ? d : {
24
+ enumerable: true,
25
+ get: function () { return e[k]; }
26
+ });
27
+ }
28
+ });
29
+ }
30
+ n.default = e;
31
+ return Object.freeze(n);
32
+ }
33
+
34
+ var styled25__default = /*#__PURE__*/_interopDefault(styled25);
35
+ var React26__default = /*#__PURE__*/_interopDefault(React26);
36
+ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
37
+ var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
38
+ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
39
+ var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
40
+
41
+ var __defProp = Object.defineProperty;
42
+ var __defProps = Object.defineProperties;
43
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
44
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
45
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
46
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
47
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
48
+ var __spreadValues = (a, b) => {
49
+ for (var prop in b || (b = {}))
50
+ if (__hasOwnProp.call(b, prop))
51
+ __defNormalProp(a, prop, b[prop]);
52
+ if (__getOwnPropSymbols)
53
+ for (var prop of __getOwnPropSymbols(b)) {
54
+ if (__propIsEnum.call(b, prop))
55
+ __defNormalProp(a, prop, b[prop]);
56
+ }
57
+ return a;
58
+ };
59
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
60
+ var __objRest = (source, exclude) => {
61
+ var target = {};
62
+ for (var prop in source)
63
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
64
+ target[prop] = source[prop];
65
+ if (source != null && __getOwnPropSymbols)
66
+ for (var prop of __getOwnPropSymbols(source)) {
67
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
68
+ target[prop] = source[prop];
69
+ }
70
+ return target;
71
+ };
72
+
73
+ // src/fonts/ida-narrow-500-normal.woff2
74
+ var ida_narrow_500_normal_default = "./ida-narrow-500-normal-C6I2PK4T.woff2";
75
+
76
+ // src/fonts/ida-narrow-700-normal.woff2
77
+ var ida_narrow_700_normal_default = "./ida-narrow-700-normal-UPHPRIN6.woff2";
78
+
79
+ // src/fonts/ibm-plex-sans-condensed-400-normal.woff2
80
+ var ibm_plex_sans_condensed_400_normal_default = "./ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2";
81
+
82
+ // src/fonts/ibm-plex-sans-condensed-500-normal.woff2
83
+ var ibm_plex_sans_condensed_500_normal_default = "./ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2";
84
+
85
+ // src/fonts/ibm-plex-sans-condensed-600-normal.woff2
86
+ var ibm_plex_sans_condensed_600_normal_default = "./ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2";
87
+
88
+ // src/fonts/ibm-plex-sans-condensed-700-normal.woff2
89
+ var ibm_plex_sans_condensed_700_normal_default = "./ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2";
90
+
91
+ // src/fonts/index.ts
92
+ var BRAND_FONTS = {
93
+ [pawprintTokens.Brand.Butternutbox]: {
94
+ "IdaNarrow-Medium": ida_narrow_500_normal_default,
95
+ "IdaNarrow-Bold": ida_narrow_700_normal_default,
96
+ "IBMPlexSansCondensed-Regular": ibm_plex_sans_condensed_400_normal_default,
97
+ "IBMPlexSansCondensed-Medium": ibm_plex_sans_condensed_500_normal_default,
98
+ "IBMPlexSansCondensed-SemiBold": ibm_plex_sans_condensed_600_normal_default,
99
+ "IBMPlexSansCondensed-Bold": ibm_plex_sans_condensed_700_normal_default
100
+ }
101
+ };
102
+ var FONT_MAP = {
103
+ "IBM Plex Sans Condensed": {
104
+ "400": "IBMPlexSansCondensed-Regular",
105
+ "500": "IBMPlexSansCondensed-Medium",
106
+ "600": "IBMPlexSansCondensed-SemiBold",
107
+ "700": "IBMPlexSansCondensed-Bold"
108
+ },
109
+ "Ida Narrow": {
110
+ "500": "IdaNarrow-Medium",
111
+ "700": "IdaNarrow-Bold"
112
+ }
113
+ };
114
+ var resolveFont = (fontFamily, fontWeight) => {
115
+ var _a;
116
+ const resolved = (_a = FONT_MAP[fontFamily]) == null ? void 0 : _a[fontWeight];
117
+ return { fontFamily: resolved != null ? resolved : fontFamily };
118
+ };
119
+ var createPawprintTheme = (brand = pawprintTokens.Brand.Butternutbox, theme2 = pawprintTokens.Theme.Default) => {
120
+ const brandThemes = pawprintTokens.THEME_OPTIONS_MAP[brand];
121
+ const themeOptions = brandThemes && theme2 in brandThemes ? brandThemes[theme2] : pawprintTokens.DEFAULT_THEME_OPTIONS;
122
+ return themeOptions;
123
+ };
124
+ var ThemeContext = React26.createContext({
125
+ brand: pawprintTokens.Brand.Butternutbox,
126
+ theme: pawprintTokens.Theme.Default,
127
+ setTheme: (_theme) => {
128
+ },
129
+ emotionTheme: createPawprintTheme(pawprintTokens.Brand.Butternutbox, pawprintTokens.Theme.Default)
130
+ });
131
+ var ThemeProvider = ({
132
+ children,
133
+ brand = pawprintTokens.Brand.Butternutbox,
134
+ initialTheme = pawprintTokens.Theme.Default
135
+ }) => {
136
+ const [theme2, setTheme] = React26.useState(initialTheme);
137
+ const emotionTheme = React26.useMemo(
138
+ () => createPawprintTheme(brand, theme2),
139
+ [brand, theme2]
140
+ );
141
+ const contextValue = React26.useMemo(
142
+ () => ({
143
+ brand,
144
+ theme: theme2,
145
+ setTheme,
146
+ emotionTheme
147
+ }),
148
+ [brand, theme2, emotionTheme]
149
+ );
150
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(react.ThemeProvider, { theme: emotionTheme, children }) });
151
+ };
152
+ var usePawprint = () => React26.useContext(ThemeContext);
153
+ var PawprintProvider = ({
154
+ brand = pawprintTokens.Brand.Butternutbox,
155
+ initialTheme = pawprintTokens.Theme.Default,
156
+ children
157
+ }) => {
158
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { brand, initialTheme, children });
159
+ };
160
+ var theme = pawprintTokens.tokens;
161
+ var parseTokenValue = (value) => parseFloat(value);
162
+ var resolveLetterSpacing = (letterSpacing, fontSize) => {
163
+ if (letterSpacing.endsWith("%")) {
164
+ return parseFloat(letterSpacing) / 100 * fontSize;
165
+ }
166
+ return parseFloat(letterSpacing);
167
+ };
168
+ var semanticToStyle = (token) => {
169
+ const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
170
+ const fontSize = parseTokenValue(token.fontSize);
171
+ return __spreadValues({
172
+ fontFamily,
173
+ fontSize,
174
+ lineHeight: parseTokenValue(token.lineHeight)
175
+ }, token.letterSpacing && {
176
+ letterSpacing: resolveLetterSpacing(token.letterSpacing, fontSize)
177
+ });
178
+ };
179
+ var nativeTokenToStyle = (token) => {
180
+ const style = {};
181
+ if (token.fontFamily && token.fontWeight) {
182
+ const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight);
183
+ style.fontFamily = fontFamily;
184
+ } else if (token.fontFamily) {
185
+ style.fontFamily = token.fontFamily;
186
+ }
187
+ if (token.fontSize) style.fontSize = parseTokenValue(token.fontSize);
188
+ if (token.lineHeight) style.lineHeight = parseTokenValue(token.lineHeight);
189
+ if (token.letterSpacing && style.fontSize) {
190
+ style.letterSpacing = resolveLetterSpacing(
191
+ token.letterSpacing,
192
+ style.fontSize
193
+ );
194
+ }
195
+ return style;
196
+ };
197
+ var VARIANT_DEFAULTS = {
198
+ body: { size: "md" },
199
+ heading: { size: "md" },
200
+ display: { size: "lg" }
201
+ };
202
+ var StyledText = styled25__default.default(reactNative.Text)({});
203
+ var Typography = React26__default.default.forwardRef(
204
+ (props, ref) => {
205
+ const theme2 = react.useTheme();
206
+ const { typography, colour } = theme2.tokens.semantics;
207
+ const getCommonStyles = (align2, textTransform2, textDecoration2) => __spreadValues(__spreadValues(__spreadValues({}, align2 && { textAlign: align2 }), textTransform2 && { textTransform: textTransform2 }), textDecoration2 && {
208
+ textDecorationLine: textDecoration2
209
+ });
210
+ if ("token" in props && props.token) {
211
+ const _a = props, {
212
+ token,
213
+ color: color2,
214
+ align: align2,
215
+ noWrap: noWrap2,
216
+ textTransform: textTransform2,
217
+ textDecoration: textDecoration2
218
+ } = _a, rest2 = __objRest(_a, [
219
+ "token",
220
+ "color",
221
+ "align",
222
+ "noWrap",
223
+ "textTransform",
224
+ "textDecoration"
225
+ ]);
226
+ const style = __spreadValues(__spreadValues(__spreadValues({}, nativeTokenToStyle(token)), color2 ? { color: color2 } : {}), getCommonStyles(align2, textTransform2, textDecoration2));
227
+ return /* @__PURE__ */ jsxRuntime.jsx(
228
+ StyledText,
229
+ __spreadValues({
230
+ ref,
231
+ style,
232
+ numberOfLines: noWrap2 ? 1 : void 0,
233
+ ellipsizeMode: noWrap2 ? "tail" : void 0
234
+ }, rest2)
235
+ );
236
+ }
237
+ const _b = props, {
238
+ variant = "body",
239
+ size,
240
+ weight = "medium",
241
+ color = "primary",
242
+ align,
243
+ noWrap,
244
+ textTransform,
245
+ textDecoration
246
+ } = _b, rest = __objRest(_b, [
247
+ "variant",
248
+ "size",
249
+ "weight",
250
+ "color",
251
+ "align",
252
+ "noWrap",
253
+ "textTransform",
254
+ "textDecoration"
255
+ ]);
256
+ const resolvedSize = size != null ? size : VARIANT_DEFAULTS[variant].size;
257
+ const commonStyles = getCommonStyles(align, textTransform, textDecoration);
258
+ const getSemanticColor = (colorKey) => ({
259
+ color: colour.text[colorKey]
260
+ });
261
+ let textStyle = {};
262
+ if (variant === "body") {
263
+ textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(typography.body[weight][resolvedSize])), getSemanticColor(color)), commonStyles);
264
+ } else if (variant === "heading") {
265
+ const headingSize = resolvedSize;
266
+ const tokenSet = typography.heading.mobile[headingSize];
267
+ textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(tokenSet)), getSemanticColor(color)), commonStyles);
268
+ } else if (variant === "display") {
269
+ const displaySize = resolvedSize;
270
+ const tokenSet = typography.heading.display.mobile[displaySize];
271
+ textStyle = __spreadValues(__spreadValues(__spreadValues({}, semanticToStyle(tokenSet)), getSemanticColor(color)), commonStyles);
272
+ }
273
+ return /* @__PURE__ */ jsxRuntime.jsx(
274
+ StyledText,
275
+ __spreadValues({
276
+ ref,
277
+ style: textStyle,
278
+ numberOfLines: noWrap ? 1 : void 0,
279
+ ellipsizeMode: noWrap ? "tail" : void 0
280
+ }, rest)
281
+ );
282
+ }
283
+ );
284
+ Typography.displayName = "Typography";
285
+ var SIZE_MAP = {
286
+ sm: "small",
287
+ md: "medium",
288
+ lg: "large"
289
+ };
290
+ var parseTokenValue2 = (value) => parseFloat(value);
291
+ var StyledRoot = styled25__default.default(AvatarPrimitive__namespace.Root)(({ theme: theme2, size, border }) => {
292
+ const { avatar } = theme2.tokens.components;
293
+ const { borderRadius } = theme2.tokens.semantics.dimensions;
294
+ const tokenSize = SIZE_MAP[size];
295
+ const avatarSize = parseTokenValue2(avatar.size[tokenSize]);
296
+ return __spreadValues({
297
+ display: "flex",
298
+ alignItems: "center",
299
+ justifyContent: "center",
300
+ overflow: "hidden",
301
+ borderRadius: parseTokenValue2(borderRadius.round),
302
+ width: avatarSize,
303
+ height: avatarSize
304
+ }, border !== "none" && {
305
+ borderWidth: parseTokenValue2(
306
+ avatar.borderWidth[border === "sm" ? "small" : "medium"]
307
+ ),
308
+ borderColor: avatar.colour.border.default,
309
+ borderStyle: "solid"
310
+ });
311
+ });
312
+ var StyledImage = styled25__default.default(AvatarPrimitive__namespace.Image)({
313
+ width: "100%",
314
+ height: "100%",
315
+ resizeMode: "cover"
316
+ });
317
+ var StyledFallback = styled25__default.default(AvatarPrimitive__namespace.Fallback)(({ theme: theme2 }) => {
318
+ const { background, text } = theme2.tokens.semantics.colour;
319
+ return {
320
+ display: "flex",
321
+ alignItems: "center",
322
+ justifyContent: "center",
323
+ width: "100%",
324
+ height: "100%",
325
+ backgroundColor: background.container.disabled,
326
+ color: text.disabled
327
+ };
328
+ });
329
+ var AVATAR_TO_BODY_SIZE = {
330
+ sm: "xs",
331
+ md: "sm",
332
+ lg: "md"
333
+ };
334
+ var AvatarRoot = React26__default.default.forwardRef(
335
+ (_a, ref) => {
336
+ var _b = _a, {
337
+ src,
338
+ alt,
339
+ size = "md",
340
+ border = "none",
341
+ fallbackType,
342
+ fallbackString
343
+ } = _b, rest = __objRest(_b, [
344
+ "src",
345
+ "alt",
346
+ "size",
347
+ "border",
348
+ "fallbackType",
349
+ "fallbackString"
350
+ ]);
351
+ const effectiveFallbackType = fallbackType != null ? fallbackType : fallbackString ? "string" : "image";
352
+ const showStringFallback = effectiveFallbackType === "string" && fallbackString;
353
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledRoot, __spreadProps(__spreadValues({ ref, alt, size, border }, rest), { children: [
354
+ src && /* @__PURE__ */ jsxRuntime.jsx(StyledImage, { source: { uri: src } }),
355
+ /* @__PURE__ */ jsxRuntime.jsx(StyledFallback, { children: showStringFallback ? /* @__PURE__ */ jsxRuntime.jsx(
356
+ Typography,
357
+ {
358
+ size: AVATAR_TO_BODY_SIZE[size],
359
+ weight: "bold",
360
+ color: "disabled",
361
+ children: fallbackString
362
+ }
363
+ ) : (
364
+ // TODO: replace with the Icon when available
365
+ /* @__PURE__ */ jsxRuntime.jsx(Typography, { size: AVATAR_TO_BODY_SIZE[size], color: "disabled", children: "\u{1F464}" })
366
+ ) })
367
+ ] }));
368
+ }
369
+ );
370
+ AvatarRoot.displayName = "Avatar";
371
+ var Avatar = AvatarRoot;
372
+ var parseTokenValue3 = (value) => parseFloat(value);
373
+ var StyledIconRoot = styled25__default.default(reactNative.View)(({ iconDimension }) => ({
374
+ alignItems: "center",
375
+ justifyContent: "center",
376
+ flexShrink: 0,
377
+ width: iconDimension,
378
+ height: iconDimension
379
+ }));
380
+ var Icon = React26__default.default.forwardRef(
381
+ (_a, ref) => {
382
+ var _b = _a, {
383
+ icon: IconComponent,
384
+ size = "md",
385
+ colour = "primary",
386
+ "aria-label": ariaLabel
387
+ } = _b, rest = __objRest(_b, [
388
+ "icon",
389
+ "size",
390
+ "colour",
391
+ "aria-label"
392
+ ]);
393
+ const theme2 = react.useTheme();
394
+ const category = IconComponent.category || "core";
395
+ const iconTokens = theme2.tokens.semantics.colour.icon;
396
+ let color;
397
+ if (colour === "action-default") {
398
+ color = iconTokens.action.default;
399
+ } else if (colour === "action-inverse") {
400
+ color = iconTokens.action.inverse;
401
+ } else {
402
+ color = iconTokens[colour];
403
+ }
404
+ const sizing = theme2.tokens.components.icons.sizing.icons;
405
+ const categorySizing = sizing[category];
406
+ const dimension = parseTokenValue3(categorySizing[size]);
407
+ return /* @__PURE__ */ jsxRuntime.jsx(
408
+ StyledIconRoot,
409
+ __spreadProps(__spreadValues({
410
+ ref,
411
+ iconDimension: dimension,
412
+ accessibilityRole: ariaLabel ? "image" : void 0,
413
+ accessibilityLabel: ariaLabel,
414
+ accessible: !!ariaLabel
415
+ }, rest), {
416
+ children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { width: dimension, height: dimension, color })
417
+ })
418
+ );
419
+ }
420
+ );
421
+ Icon.displayName = "Icon";
422
+ var parseTokenValue4 = (value) => parseFloat(value);
423
+ var StyledBadge = styled25__default.default(reactNative.View)(({ theme: theme2, badgeVariant, badgeSize, pinned, top, bottom }) => {
424
+ const { sizing, spacing, colour, primary, pinnedBadge } = theme2.tokens.components.badges.badge;
425
+ const backgroundColorMap = {
426
+ primary: colour.background.default,
427
+ promo: colour.background.promo,
428
+ success: colour.background.success,
429
+ warning: colour.background.warning,
430
+ error: colour.background.error
431
+ };
432
+ const borderRadiusStyles = pinned ? {
433
+ borderTopLeftRadius: parseTokenValue4(
434
+ pinnedBadge.borderRadius.leftRadius
435
+ ),
436
+ borderBottomLeftRadius: parseTokenValue4(
437
+ pinnedBadge.borderRadius.leftRadius
438
+ ),
439
+ borderTopRightRadius: parseTokenValue4(
440
+ pinnedBadge.borderRadius.rightRadius
441
+ ),
442
+ borderBottomRightRadius: parseTokenValue4(
443
+ pinnedBadge.borderRadius.rightRadius
444
+ )
445
+ } : {
446
+ borderRadius: parseTokenValue4(primary.borderRadius.default)
447
+ };
448
+ const positionStyles = pinned ? __spreadValues(__spreadValues({
449
+ position: "absolute",
450
+ left: 0
451
+ }, top !== void 0 && { top }), bottom !== void 0 && { bottom }) : {};
452
+ return __spreadValues(__spreadValues({
453
+ flexDirection: "row",
454
+ alignItems: "center",
455
+ justifyContent: "center",
456
+ height: parseTokenValue4(sizing[badgeSize].height),
457
+ minWidth: parseTokenValue4(sizing[badgeSize].minWidth),
458
+ paddingHorizontal: parseTokenValue4(spacing[badgeSize].horizontalPadding),
459
+ gap: parseTokenValue4(spacing[badgeSize].gap),
460
+ backgroundColor: backgroundColorMap[badgeVariant]
461
+ }, borderRadiusStyles), positionStyles);
462
+ });
463
+ var Badge = React26__default.default.forwardRef(
464
+ (_a, ref) => {
465
+ var _b = _a, {
466
+ variant = "primary",
467
+ size = "medium",
468
+ pinned = false,
469
+ icon,
470
+ children,
471
+ top,
472
+ bottom
473
+ } = _b, rest = __objRest(_b, [
474
+ "variant",
475
+ "size",
476
+ "pinned",
477
+ "icon",
478
+ "children",
479
+ "top",
480
+ "bottom"
481
+ ]);
482
+ const theme2 = react.useTheme();
483
+ const { typography, colour } = theme2.tokens.components.badges.badge;
484
+ const iconSizeMap = {
485
+ small: "xs",
486
+ medium: "xs",
487
+ large: "sm"
488
+ };
489
+ const iconColourMap = {
490
+ primary: "primary",
491
+ promo: "promo",
492
+ success: "alt",
493
+ warning: "alt",
494
+ error: "alt"
495
+ };
496
+ const textColorMap = {
497
+ primary: colour.text.primary,
498
+ promo: colour.text.promo,
499
+ success: colour.text.default,
500
+ warning: colour.text.default,
501
+ error: colour.text.default
502
+ };
503
+ return /* @__PURE__ */ jsxRuntime.jsxs(
504
+ StyledBadge,
505
+ __spreadProps(__spreadValues({
506
+ ref,
507
+ badgeVariant: variant,
508
+ badgeSize: size,
509
+ pinned,
510
+ top,
511
+ bottom
512
+ }, rest), {
513
+ children: [
514
+ icon && /* @__PURE__ */ jsxRuntime.jsx(
515
+ Icon,
516
+ {
517
+ icon,
518
+ size: iconSizeMap[size],
519
+ colour: iconColourMap[variant]
520
+ }
521
+ ),
522
+ /* @__PURE__ */ jsxRuntime.jsx(
523
+ Typography,
524
+ {
525
+ token: typography[size].default,
526
+ color: textColorMap[variant],
527
+ children
528
+ }
529
+ )
530
+ ]
531
+ })
532
+ );
533
+ }
534
+ );
535
+ Badge.displayName = "Badge";
536
+ var parseTokenValue5 = (value) => parseFloat(value);
537
+ var StyledSpinner = styled25__default.default(reactNative.View)({});
538
+ var Spinner = React26__default.default.forwardRef(
539
+ (_a, ref) => {
540
+ var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
541
+ const theme2 = react.useTheme();
542
+ const spinAnim = React26.useRef(new reactNative.Animated.Value(0)).current;
543
+ const { size: sizeTokens, colour } = theme2.tokens.components.spinner;
544
+ const borderWidth = parseTokenValue5(
545
+ theme2.tokens.semantics.dimensions.borderWidth.md
546
+ );
547
+ const baseColor = colour.background.base[variant];
548
+ const progressColor = colour.background.progress[variant];
549
+ const dimension = parseTokenValue5(sizeTokens[size]);
550
+ React26.useEffect(() => {
551
+ const animation = reactNative.Animated.loop(
552
+ reactNative.Animated.timing(spinAnim, {
553
+ toValue: 1,
554
+ duration: 600,
555
+ easing: reactNative.Easing.linear,
556
+ useNativeDriver: true
557
+ })
558
+ );
559
+ animation.start();
560
+ return () => animation.stop();
561
+ }, [spinAnim]);
562
+ const spin = spinAnim.interpolate({
563
+ inputRange: [0, 1],
564
+ outputRange: ["0deg", "360deg"]
565
+ });
566
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledSpinner, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(
567
+ reactNative.Animated.View,
568
+ {
569
+ accessibilityRole: "progressbar",
570
+ accessibilityLabel: "Loading",
571
+ style: [
572
+ {
573
+ width: dimension,
574
+ height: dimension,
575
+ borderRadius: dimension / 2,
576
+ borderWidth,
577
+ borderColor: baseColor,
578
+ borderTopColor: progressColor,
579
+ transform: [{ rotate: spin }]
580
+ },
581
+ style
582
+ ]
583
+ }
584
+ ) }));
585
+ }
586
+ );
587
+ Spinner.displayName = "Spinner";
588
+ var parseTokenValue6 = (value) => parseFloat(value);
589
+ var sizeToTypographyKey = {
590
+ lg: "large",
591
+ md: "medium",
592
+ sm: "small"
593
+ };
594
+ var IconWrapper = styled25__default.default(reactNative.View)({
595
+ alignItems: "center",
596
+ justifyContent: "center",
597
+ flexShrink: 0
598
+ });
599
+ var StyledButton = styled25__default.default(reactNative.Pressable)(
600
+ ({
601
+ buttonHeight,
602
+ buttonMinWidth,
603
+ buttonPaddingHorizontal,
604
+ buttonPaddingVertical,
605
+ buttonGap,
606
+ buttonBorderRadius,
607
+ buttonBgColor,
608
+ buttonOpacity,
609
+ buttonBorderWidth,
610
+ buttonBorderColor,
611
+ buttonFullWidth
612
+ }) => __spreadValues(__spreadValues({
613
+ flexDirection: "row",
614
+ alignItems: "center",
615
+ justifyContent: "center",
616
+ position: "relative",
617
+ height: buttonHeight,
618
+ minWidth: buttonMinWidth,
619
+ paddingHorizontal: buttonPaddingHorizontal,
620
+ paddingVertical: buttonPaddingVertical,
621
+ gap: buttonGap,
622
+ borderRadius: buttonBorderRadius,
623
+ backgroundColor: buttonBgColor,
624
+ opacity: buttonOpacity
625
+ }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {}), buttonFullWidth ? { width: "100%" } : {})
626
+ );
627
+ var StyledTextWrapper = styled25__default.default(reactNative.View)(({ textOpacity }) => ({
628
+ opacity: textOpacity
629
+ }));
630
+ var StyledSpinnerWrapper = styled25__default.default(reactNative.View)({
631
+ position: "absolute",
632
+ alignItems: "center",
633
+ justifyContent: "center"
634
+ });
635
+ var Button = React26__default.default.forwardRef(
636
+ (_a, ref) => {
637
+ var _b = _a, {
638
+ variant = "filled",
639
+ size = "md",
640
+ colour = "primary",
641
+ loading = false,
642
+ fullWidth = false,
643
+ startIcon,
644
+ endIcon,
645
+ children,
646
+ disabled
647
+ } = _b, rest = __objRest(_b, [
648
+ "variant",
649
+ "size",
650
+ "colour",
651
+ "loading",
652
+ "fullWidth",
653
+ "startIcon",
654
+ "endIcon",
655
+ "children",
656
+ "disabled"
657
+ ]);
658
+ const theme2 = react.useTheme();
659
+ const isDisabled = disabled || loading;
660
+ const buttons = theme2.tokens.components.buttons;
661
+ const sizeTokens = buttons.size[size];
662
+ const spacingTokens = buttons.spacing[size];
663
+ const typographyKey = sizeToTypographyKey[size];
664
+ const typography = buttons.text[typographyKey];
665
+ resolveFont(typography.fontFamily, typography.fontWeight);
666
+ const [pressed, setPressed] = React26__default.default.useState(false);
667
+ const getVariantStyles = (isPressed) => {
668
+ if (variant === "filled") {
669
+ const bgTokens = buttons.filledButton.colour.background[colour];
670
+ const textToken = buttons.filledButton.colour.text[colour].default;
671
+ return {
672
+ backgroundColor: isDisabled ? bgTokens.disabled : isPressed ? bgTokens.selected : bgTokens.default,
673
+ textColor: textToken,
674
+ spinnerColor: textToken
675
+ };
676
+ }
677
+ if (variant === "outlined") {
678
+ const outline = buttons.outlineButton;
679
+ return {
680
+ backgroundColor: loading || isPressed ? outline.colour.background.selected : "transparent",
681
+ borderWidth: parseTokenValue6(outline.border.default),
682
+ borderColor: outline.colour.border.default,
683
+ textColor: loading || isPressed ? outline.colour.text.selected : outline.colour.text.default,
684
+ spinnerColor: outline.colour.text.selected
685
+ };
686
+ }
687
+ const text = buttons.textButton;
688
+ return {
689
+ backgroundColor: loading || isPressed ? text.background.selected : "transparent",
690
+ textColor: loading || isPressed ? text.text.selected : text.text.default,
691
+ spinnerColor: text.text.selected
692
+ };
693
+ };
694
+ const variantStyles = getVariantStyles(pressed);
695
+ return /* @__PURE__ */ jsxRuntime.jsxs(
696
+ StyledButton,
697
+ __spreadProps(__spreadValues({
698
+ ref,
699
+ disabled: isDisabled,
700
+ accessibilityState: { disabled: isDisabled, busy: loading },
701
+ onPressIn: () => setPressed(true),
702
+ onPressOut: () => setPressed(false),
703
+ buttonHeight: parseTokenValue6(sizeTokens.height),
704
+ buttonMinWidth: parseTokenValue6(sizeTokens.minWidth),
705
+ buttonPaddingHorizontal: parseTokenValue6(
706
+ spacingTokens.horizontalPadding
707
+ ),
708
+ buttonPaddingVertical: parseTokenValue6(spacingTokens.verticalPadding),
709
+ buttonGap: parseTokenValue6(spacingTokens.gap),
710
+ buttonBorderRadius: parseTokenValue6(buttons.borderRadius.default),
711
+ buttonBgColor: variantStyles.backgroundColor,
712
+ buttonOpacity: isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1,
713
+ buttonBorderWidth: variantStyles.borderWidth,
714
+ buttonBorderColor: variantStyles.borderColor,
715
+ buttonFullWidth: fullWidth
716
+ }, rest), {
717
+ children: [
718
+ startIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: startIcon }),
719
+ /* @__PURE__ */ jsxRuntime.jsx(StyledTextWrapper, { textOpacity: loading ? 0 : 1, children: /* @__PURE__ */ jsxRuntime.jsx(
720
+ Typography,
721
+ {
722
+ token: {
723
+ fontFamily: typography.fontFamily,
724
+ fontWeight: typography.fontWeight,
725
+ fontSize: typography.fontSize,
726
+ lineHeight: typography.fontSize,
727
+ letterSpacing: typography.letterSpacing
728
+ },
729
+ color: variantStyles.textColor,
730
+ children
731
+ }
732
+ ) }),
733
+ endIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: endIcon }),
734
+ loading && /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
735
+ Spinner,
736
+ {
737
+ size,
738
+ style: {
739
+ borderColor: "transparent",
740
+ borderTopColor: variantStyles.spinnerColor
741
+ }
742
+ }
743
+ ) })
744
+ ]
745
+ })
746
+ );
747
+ }
748
+ );
749
+ Button.displayName = "Button";
750
+ var parseTokenValue7 = (value) => parseFloat(value);
751
+ var StyledHint = styled25__default.default(reactNative.View)(({
752
+ theme: theme2,
753
+ hintVariant
754
+ }) => {
755
+ const {
756
+ badge,
757
+ hint: {
758
+ colour: { background }
759
+ }
760
+ } = theme2.tokens.components.badges;
761
+ const hintVariantMap = {
762
+ default: background.default,
763
+ success: background.success,
764
+ warning: background.warning,
765
+ error: background.error
766
+ };
767
+ const size = parseTokenValue7(badge.hint.sizing.default);
768
+ return {
769
+ width: size,
770
+ height: size,
771
+ borderRadius: size / 2,
772
+ backgroundColor: hintVariantMap[hintVariant]
773
+ };
774
+ });
775
+ var Hint = React26__default.default.forwardRef(
776
+ (_a, ref) => {
777
+ var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
778
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
779
+ }
780
+ );
781
+ Hint.displayName = "Hint";
782
+ var parseTokenValue8 = (value) => parseFloat(value);
783
+ var sizeToIconSizeToken = {
784
+ lg: "xl",
785
+ md: "lg",
786
+ sm: "md"
787
+ };
788
+ var StyledIconButton = styled25__default.default(reactNative.Pressable)(
789
+ ({
790
+ buttonDimension,
791
+ buttonBorderRadius,
792
+ buttonBgColor,
793
+ buttonOpacity,
794
+ buttonBorderWidth,
795
+ buttonBorderColor
796
+ }) => __spreadValues({
797
+ alignItems: "center",
798
+ justifyContent: "center",
799
+ position: "relative",
800
+ width: buttonDimension,
801
+ height: buttonDimension,
802
+ borderRadius: buttonBorderRadius,
803
+ backgroundColor: buttonBgColor,
804
+ opacity: buttonOpacity
805
+ }, buttonBorderWidth ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor } : {})
806
+ );
807
+ var StyledIconWrapper = styled25__default.default(reactNative.View)(({ iconDimension, iconOpacity }) => ({
808
+ width: iconDimension,
809
+ height: iconDimension,
810
+ opacity: iconOpacity
811
+ }));
812
+ var StyledSpinnerWrapper2 = styled25__default.default(reactNative.View)({
813
+ position: "absolute",
814
+ alignItems: "center",
815
+ justifyContent: "center"
816
+ });
817
+ var IconButton = React26__default.default.forwardRef(
818
+ (_a, ref) => {
819
+ var _b = _a, {
820
+ icon: IconComponent,
821
+ variant = "filled",
822
+ size = "md",
823
+ colour = "primary",
824
+ loading = false,
825
+ disabled,
826
+ "aria-label": ariaLabel
827
+ } = _b, rest = __objRest(_b, [
828
+ "icon",
829
+ "variant",
830
+ "size",
831
+ "colour",
832
+ "loading",
833
+ "disabled",
834
+ "aria-label"
835
+ ]);
836
+ const theme2 = react.useTheme();
837
+ const isDisabled = disabled || loading;
838
+ const buttons = theme2.tokens.components.buttons;
839
+ const sizeTokens = buttons.size[size];
840
+ const dimension = parseTokenValue8(sizeTokens.height);
841
+ const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
842
+ const iconDimension = parseTokenValue8(iconSizing[sizeToIconSizeToken[size]]);
843
+ const [pressed, setPressed] = React26__default.default.useState(false);
844
+ const getVariantStyles = (isPressed) => {
845
+ if (variant === "filled") {
846
+ const filled = buttons.iconButton.filledButton;
847
+ const bgTokens = filled.colour.background[colour];
848
+ const iconTokens = filled.colour.icon[colour];
849
+ const hasStatefulIconColor = "hover" in iconTokens;
850
+ return {
851
+ backgroundColor: isDisabled ? bgTokens.disabled : loading || isPressed ? bgTokens.selected : bgTokens.default,
852
+ iconColor: (loading || isPressed) && hasStatefulIconColor ? iconTokens.selected : iconTokens.default
853
+ };
854
+ }
855
+ if (variant === "outlined") {
856
+ const outline = buttons.iconButton.outlineButton;
857
+ return {
858
+ backgroundColor: loading || isPressed ? outline.colour.background.selected : "transparent",
859
+ borderWidth: parseTokenValue8(outline.border.default),
860
+ borderColor: outline.colour.border.default,
861
+ iconColor: loading || isPressed ? outline.colour.icon.selected : outline.colour.icon.default
862
+ };
863
+ }
864
+ const text = buttons.iconButton.textButton;
865
+ return {
866
+ backgroundColor: loading || isPressed ? text.background.selected : "transparent",
867
+ iconColor: loading || isPressed ? text.icon.selected : text.icon.default
868
+ };
869
+ };
870
+ const variantStyles = getVariantStyles(pressed);
871
+ return /* @__PURE__ */ jsxRuntime.jsxs(
872
+ StyledIconButton,
873
+ __spreadProps(__spreadValues({
874
+ ref,
875
+ disabled: isDisabled,
876
+ accessibilityLabel: ariaLabel,
877
+ accessibilityState: { disabled: isDisabled, busy: loading },
878
+ onPressIn: () => setPressed(true),
879
+ onPressOut: () => setPressed(false),
880
+ buttonDimension: dimension,
881
+ buttonBorderRadius: parseTokenValue8(buttons.borderRadius.default),
882
+ buttonBgColor: variantStyles.backgroundColor,
883
+ buttonOpacity: isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1,
884
+ buttonBorderWidth: variantStyles.borderWidth,
885
+ buttonBorderColor: variantStyles.borderColor
886
+ }, rest), {
887
+ children: [
888
+ /* @__PURE__ */ jsxRuntime.jsx(
889
+ StyledIconWrapper,
890
+ {
891
+ iconDimension,
892
+ iconOpacity: loading ? 0 : 1,
893
+ children: /* @__PURE__ */ jsxRuntime.jsx(
894
+ IconComponent,
895
+ {
896
+ width: iconDimension,
897
+ height: iconDimension,
898
+ color: variantStyles.iconColor
899
+ }
900
+ )
901
+ }
902
+ ),
903
+ loading && /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(
904
+ Spinner,
905
+ {
906
+ size,
907
+ style: {
908
+ borderColor: "transparent",
909
+ borderTopColor: "currentColor"
910
+ }
911
+ }
912
+ ) })
913
+ ]
914
+ })
915
+ );
916
+ }
917
+ );
918
+ IconButton.displayName = "IconButton";
919
+ var parseTokenValue9 = (value) => parseFloat(value);
920
+ var StyledRoot2 = styled25__default.default(reactNative.View)(({ illustrationHeight }) => ({
921
+ alignItems: "center",
922
+ justifyContent: "center",
923
+ flexShrink: 0,
924
+ height: illustrationHeight
925
+ }));
926
+ var Illustration = React26__default.default.forwardRef(
927
+ (_a, ref) => {
928
+ var _b = _a, {
929
+ illustration: IllustrationComponent,
930
+ size = "sm",
931
+ "aria-label": ariaLabel
932
+ } = _b, rest = __objRest(_b, [
933
+ "illustration",
934
+ "size",
935
+ "aria-label"
936
+ ]);
937
+ const theme2 = react.useTheme();
938
+ const dimension = parseTokenValue9(
939
+ theme2.tokens.components.illustrations.sizing.illustrations[size]
940
+ );
941
+ return /* @__PURE__ */ jsxRuntime.jsx(
942
+ StyledRoot2,
943
+ __spreadProps(__spreadValues({
944
+ ref,
945
+ illustrationHeight: dimension,
946
+ accessibilityRole: ariaLabel ? "image" : void 0,
947
+ accessibilityLabel: ariaLabel,
948
+ accessible: !!ariaLabel
949
+ }, rest), {
950
+ children: /* @__PURE__ */ jsxRuntime.jsx(IllustrationComponent, { height: dimension })
951
+ })
952
+ );
953
+ }
954
+ );
955
+ Illustration.displayName = "Illustration";
956
+ var parseTokenValue10 = (value) => parseFloat(value);
957
+ var StyledLabelRow = styled25__default.default(reactNative.View)(({ labelGap }) => ({
958
+ flexDirection: "row",
959
+ alignItems: "center",
960
+ gap: labelGap
961
+ }));
962
+ var InputLabel = React26__default.default.forwardRef(
963
+ (_a, ref) => {
964
+ var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
965
+ const theme2 = react.useTheme();
966
+ const { colour, text, spacing } = theme2.tokens.components.inputs;
967
+ return /* @__PURE__ */ jsxRuntime.jsxs(
968
+ StyledLabelRow,
969
+ __spreadProps(__spreadValues({
970
+ ref,
971
+ labelGap: parseTokenValue10(spacing.label.gap)
972
+ }, rest), {
973
+ children: [
974
+ /* @__PURE__ */ jsxRuntime.jsx(
975
+ Typography,
976
+ {
977
+ token: text.label,
978
+ color: state === "error" ? colour.label.error : colour.label.default,
979
+ children
980
+ }
981
+ ),
982
+ optionalText && /* @__PURE__ */ jsxRuntime.jsx(Typography, { token: text.optional, color: colour.label.optional, children: optionalText })
983
+ ]
984
+ })
985
+ );
986
+ }
987
+ );
988
+ InputLabel.displayName = "Input.Label";
989
+ var parseTokenValue11 = (value) => parseFloat(value);
990
+ var StyledInputWrapper = styled25__default.default(reactNative.View)(
991
+ ({
992
+ wrapperGap,
993
+ wrapperMinWidth,
994
+ wrapperHeight,
995
+ wrapperPaddingVertical,
996
+ wrapperPaddingHorizontal,
997
+ wrapperBgColor,
998
+ wrapperBorderWidth,
999
+ wrapperBorderColor,
1000
+ wrapperBorderRadius
1001
+ }) => ({
1002
+ flexDirection: "row",
1003
+ alignItems: "center",
1004
+ gap: wrapperGap,
1005
+ minWidth: wrapperMinWidth,
1006
+ width: "100%",
1007
+ height: wrapperHeight,
1008
+ paddingVertical: wrapperPaddingVertical,
1009
+ paddingHorizontal: wrapperPaddingHorizontal,
1010
+ backgroundColor: wrapperBgColor,
1011
+ borderWidth: wrapperBorderWidth,
1012
+ borderColor: wrapperBorderColor,
1013
+ borderRadius: wrapperBorderRadius
1014
+ })
1015
+ );
1016
+ var StyledInput = styled25__default.default(reactNative.TextInput)(({ inputColor }) => ({
1017
+ flex: 1,
1018
+ minWidth: 0,
1019
+ minHeight: 0,
1020
+ padding: 0,
1021
+ color: inputColor
1022
+ }));
1023
+ var StyledIconSlot = styled25__default.default(reactNative.View)({
1024
+ alignItems: "center",
1025
+ justifyContent: "center",
1026
+ flexShrink: 0
1027
+ });
1028
+ var InputField = React26__default.default.forwardRef(
1029
+ (_a, ref) => {
1030
+ var _b = _a, { leadingIcon, trailingIcon, state = "default", style } = _b, rest = __objRest(_b, ["leadingIcon", "trailingIcon", "state", "style"]);
1031
+ const theme2 = react.useTheme();
1032
+ const { spacing, colour, borderWidth, borderRadius, size } = theme2.tokens.components.inputs;
1033
+ const stateBorderColorMap = {
1034
+ error: colour.field.border.error,
1035
+ success: colour.field.border.success,
1036
+ default: colour.field.border.default
1037
+ };
1038
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1039
+ StyledInputWrapper,
1040
+ {
1041
+ wrapperGap: parseTokenValue11(spacing.field.gap),
1042
+ wrapperMinWidth: parseTokenValue11(size.field.minWidth),
1043
+ wrapperHeight: parseTokenValue11(size.field.height),
1044
+ wrapperPaddingVertical: parseTokenValue11(spacing.field.verticalPadding),
1045
+ wrapperPaddingHorizontal: parseTokenValue11(
1046
+ spacing.field.horizontalPadding
1047
+ ),
1048
+ wrapperBgColor: colour.field.background.default,
1049
+ wrapperBorderWidth: parseTokenValue11(borderWidth.field.default),
1050
+ wrapperBorderColor: stateBorderColorMap[state],
1051
+ wrapperBorderRadius: parseTokenValue11(borderRadius.field.default),
1052
+ children: [
1053
+ leadingIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { children: leadingIcon }),
1054
+ /* @__PURE__ */ jsxRuntime.jsx(
1055
+ StyledInput,
1056
+ __spreadValues({
1057
+ ref,
1058
+ inputColor: colour.field.text.default,
1059
+ style,
1060
+ placeholderTextColor: colour.field.text.placeholder
1061
+ }, rest)
1062
+ ),
1063
+ trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { children: trailingIcon })
1064
+ ]
1065
+ }
1066
+ );
1067
+ }
1068
+ );
1069
+ InputField.displayName = "Input.Field";
1070
+ var StyledDescriptionRow = styled25__default.default(reactNative.View)({
1071
+ flexDirection: "row",
1072
+ alignItems: "center"
1073
+ });
1074
+ var InputDescription = React26__default.default.forwardRef(
1075
+ (_a, ref) => {
1076
+ var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
1077
+ const theme2 = react.useTheme();
1078
+ const { colour, description } = theme2.tokens.components.inputs;
1079
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledDescriptionRow, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(
1080
+ Typography,
1081
+ {
1082
+ token: description.text.default,
1083
+ color: state === "error" ? colour.description.error : colour.description.default,
1084
+ children
1085
+ }
1086
+ ) }));
1087
+ }
1088
+ );
1089
+ InputDescription.displayName = "Input.Description";
1090
+ var StyledErrorRow = styled25__default.default(reactNative.View)({
1091
+ flexDirection: "row",
1092
+ alignItems: "center"
1093
+ });
1094
+ var InputError = React26__default.default.forwardRef(
1095
+ (_a, ref) => {
1096
+ var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
1097
+ const theme2 = react.useTheme();
1098
+ const { colour, description } = theme2.tokens.components.inputs;
1099
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledErrorRow, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(
1100
+ Typography,
1101
+ {
1102
+ token: description.text.default,
1103
+ color: colour.description.error,
1104
+ children
1105
+ }
1106
+ ) }));
1107
+ }
1108
+ );
1109
+ InputError.displayName = "Input.Error";
1110
+ var parseTokenValue12 = (value) => parseFloat(value);
1111
+ var StyledRoot3 = styled25__default.default(reactNative.View)(({ theme: theme2 }) => {
1112
+ const { spacing } = theme2.tokens.components.inputs;
1113
+ return {
1114
+ gap: parseTokenValue12(spacing.gap)
1115
+ };
1116
+ });
1117
+ var InputRoot = React26__default.default.forwardRef(
1118
+ (_a, ref) => {
1119
+ var _b = _a, {
1120
+ label,
1121
+ description,
1122
+ error,
1123
+ state = "default",
1124
+ optionalText,
1125
+ children
1126
+ } = _b, inputFieldProps = __objRest(_b, [
1127
+ "label",
1128
+ "description",
1129
+ "error",
1130
+ "state",
1131
+ "optionalText",
1132
+ "children"
1133
+ ]);
1134
+ if (children) {
1135
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledRoot3, { ref, children });
1136
+ }
1137
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledRoot3, { ref, children: [
1138
+ label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { optionalText, state, children: label }),
1139
+ /* @__PURE__ */ jsxRuntime.jsx(InputField, __spreadValues({ state }, inputFieldProps)),
1140
+ description && /* @__PURE__ */ jsxRuntime.jsx(InputDescription, { state, children: description }),
1141
+ error && state === "error" && /* @__PURE__ */ jsxRuntime.jsx(InputError, { children: error })
1142
+ ] });
1143
+ }
1144
+ );
1145
+ InputRoot.displayName = "Input";
1146
+ var Input = Object.assign(InputRoot, {
1147
+ Root: StyledRoot3,
1148
+ Label: InputLabel,
1149
+ Field: InputField,
1150
+ Description: InputDescription,
1151
+ Error: InputError
1152
+ });
1153
+ var Link = React26__default.default.forwardRef(
1154
+ (_a, ref) => {
1155
+ var _b = _a, {
1156
+ size = "md",
1157
+ weight = "semiBold",
1158
+ standalone = false,
1159
+ disabled = false,
1160
+ href,
1161
+ children,
1162
+ onPress,
1163
+ style
1164
+ } = _b, rest = __objRest(_b, [
1165
+ "size",
1166
+ "weight",
1167
+ "standalone",
1168
+ "disabled",
1169
+ "href",
1170
+ "children",
1171
+ "onPress",
1172
+ "style"
1173
+ ]);
1174
+ const theme2 = react.useTheme();
1175
+ const { typography, colour } = theme2.tokens.semantics;
1176
+ const linkColour = colour.text.link;
1177
+ const handlePress = (e) => {
1178
+ if (onPress) {
1179
+ onPress(e);
1180
+ } else if (href) {
1181
+ reactNative.Linking.openURL(href);
1182
+ }
1183
+ };
1184
+ return /* @__PURE__ */ jsxRuntime.jsx(
1185
+ reactNative.Pressable,
1186
+ __spreadProps(__spreadValues({
1187
+ ref,
1188
+ disabled,
1189
+ onPress: handlePress,
1190
+ accessibilityRole: "link",
1191
+ accessibilityState: { disabled },
1192
+ style: ({ pressed }) => {
1193
+ const baseStyle = __spreadProps(__spreadValues({}, standalone && {
1194
+ flexDirection: "row",
1195
+ alignItems: "center",
1196
+ gap: 4
1197
+ }), {
1198
+ opacity: disabled ? 0.5 : 1
1199
+ });
1200
+ return [
1201
+ baseStyle,
1202
+ typeof style === "function" ? style({ pressed }) : style
1203
+ ];
1204
+ }
1205
+ }, rest), {
1206
+ children: ({ pressed }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1207
+ /* @__PURE__ */ jsxRuntime.jsx(
1208
+ Typography,
1209
+ {
1210
+ token: typography.link[weight][size],
1211
+ color: pressed ? linkColour.hover : linkColour.default,
1212
+ textDecoration: standalone ? "none" : "underline",
1213
+ children
1214
+ }
1215
+ ),
1216
+ standalone && /* @__PURE__ */ jsxRuntime.jsx(
1217
+ Typography,
1218
+ {
1219
+ token: typography.link[weight][size],
1220
+ color: pressed ? linkColour.hover : linkColour.default,
1221
+ children: " \u2192"
1222
+ }
1223
+ )
1224
+ ] })
1225
+ })
1226
+ );
1227
+ }
1228
+ );
1229
+ Link.displayName = "Link";
1230
+
1231
+ // src/components/atoms/Logo/Logo.registry.ts
1232
+ var LOGOS = {
1233
+ butternut: {},
1234
+ psibufet: {},
1235
+ bcorp: {}
1236
+ };
1237
+ function resolveLogo(brand, variant) {
1238
+ var _a;
1239
+ return (_a = LOGOS[brand]) == null ? void 0 : _a[variant];
1240
+ }
1241
+ function registerLogo(brand, variant, component) {
1242
+ if (!LOGOS[brand]) {
1243
+ LOGOS[brand] = {};
1244
+ }
1245
+ LOGOS[brand][variant] = component;
1246
+ }
1247
+ var StyledRoot4 = styled25__default.default(reactNative.View)({
1248
+ alignItems: "center",
1249
+ justifyContent: "center",
1250
+ flexShrink: 0
1251
+ });
1252
+ var Logo = React26__default.default.forwardRef(
1253
+ (_a, ref) => {
1254
+ var _b = _a, { brand, variant = "primary", "aria-label": ariaLabel } = _b, rest = __objRest(_b, ["brand", "variant", "aria-label"]);
1255
+ const effectiveVariant = brand === "bcorp" ? "primary" : variant;
1256
+ const LogoComponent = resolveLogo(brand, effectiveVariant);
1257
+ if (!LogoComponent) {
1258
+ return null;
1259
+ }
1260
+ return /* @__PURE__ */ jsxRuntime.jsx(
1261
+ StyledRoot4,
1262
+ __spreadProps(__spreadValues({
1263
+ ref,
1264
+ accessibilityRole: ariaLabel ? "image" : void 0,
1265
+ accessibilityLabel: ariaLabel,
1266
+ accessible: !!ariaLabel
1267
+ }, rest), {
1268
+ children: /* @__PURE__ */ jsxRuntime.jsx(LogoComponent, {})
1269
+ })
1270
+ );
1271
+ }
1272
+ );
1273
+ Logo.displayName = "Logo";
1274
+ var parseTokenValue13 = (value) => parseFloat(value);
1275
+ var StyledContainer = styled25__default.default(reactNative.View)(({ switchGap, switchOpacity }) => ({
1276
+ flexDirection: "row",
1277
+ alignItems: "flex-start",
1278
+ gap: switchGap,
1279
+ opacity: switchOpacity
1280
+ }));
1281
+ var StyledControl = styled25__default.default(SwitchPrimitive__namespace.Root)(
1282
+ ({
1283
+ switchChecked,
1284
+ controlWidth,
1285
+ controlHeight,
1286
+ controlBorderWidth,
1287
+ controlBorderColor,
1288
+ controlBgChecked,
1289
+ controlBgDefault
1290
+ }) => ({
1291
+ position: "relative",
1292
+ width: controlWidth,
1293
+ height: controlHeight,
1294
+ minWidth: controlWidth,
1295
+ minHeight: controlHeight,
1296
+ borderRadius: controlHeight,
1297
+ borderWidth: switchChecked ? 0 : controlBorderWidth,
1298
+ borderColor: switchChecked ? "transparent" : controlBorderColor,
1299
+ backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
1300
+ justifyContent: "center"
1301
+ })
1302
+ );
1303
+ var StyledThumb = styled25__default.default(reactNative.Animated.View)(({ thumbSize, thumbBgColor }) => ({
1304
+ width: thumbSize,
1305
+ height: thumbSize,
1306
+ borderRadius: thumbSize / 2,
1307
+ backgroundColor: thumbBgColor,
1308
+ position: "absolute"
1309
+ }));
1310
+ var StyledContent = styled25__default.default(reactNative.View)(({ contentGap }) => ({
1311
+ gap: contentGap
1312
+ }));
1313
+ var Switch = React26__default.default.forwardRef(
1314
+ (_a, ref) => {
1315
+ var _b = _a, {
1316
+ label,
1317
+ subText,
1318
+ disabled = false,
1319
+ checked: controlledChecked,
1320
+ defaultChecked = false,
1321
+ onCheckedChange
1322
+ } = _b, rest = __objRest(_b, [
1323
+ "label",
1324
+ "subText",
1325
+ "disabled",
1326
+ "checked",
1327
+ "defaultChecked",
1328
+ "onCheckedChange"
1329
+ ]);
1330
+ const theme2 = react.useTheme();
1331
+ const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
1332
+ const isControlled = controlledChecked !== void 0;
1333
+ const [internalChecked, setInternalChecked] = React26__default.default.useState(defaultChecked);
1334
+ const isChecked = isControlled ? controlledChecked : internalChecked;
1335
+ const controlWidth = parseTokenValue13(size.control.width);
1336
+ const controlHeight = parseTokenValue13(size.control.height);
1337
+ const thumbSize = parseTokenValue13(size.thumb.default);
1338
+ const borderWidthValue = parseTokenValue13(borderWidth.control.default);
1339
+ const outerInset = 5;
1340
+ const inset = outerInset - borderWidthValue;
1341
+ const translateX = controlWidth - thumbSize - outerInset * 2;
1342
+ const animValue = React26.useRef(new reactNative.Animated.Value(isChecked ? 1 : 0)).current;
1343
+ React26.useEffect(() => {
1344
+ reactNative.Animated.timing(animValue, {
1345
+ toValue: isChecked ? 1 : 0,
1346
+ duration: 200,
1347
+ useNativeDriver: true
1348
+ }).start();
1349
+ }, [isChecked, animValue]);
1350
+ const thumbTranslateX = animValue.interpolate({
1351
+ inputRange: [0, 1],
1352
+ outputRange: [inset, inset + translateX]
1353
+ });
1354
+ const handleCheckedChange = (checked) => {
1355
+ if (!isControlled) {
1356
+ setInternalChecked(checked);
1357
+ }
1358
+ onCheckedChange == null ? void 0 : onCheckedChange(checked);
1359
+ };
1360
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1361
+ StyledContainer,
1362
+ __spreadProps(__spreadValues({
1363
+ ref,
1364
+ switchGap: parseTokenValue13(spacing.gap),
1365
+ switchOpacity: disabled ? parseFloat(opacity.disabled) : 1
1366
+ }, rest), {
1367
+ children: [
1368
+ /* @__PURE__ */ jsxRuntime.jsx(
1369
+ StyledControl,
1370
+ {
1371
+ checked: isChecked,
1372
+ onCheckedChange: handleCheckedChange,
1373
+ disabled,
1374
+ switchChecked: isChecked,
1375
+ controlWidth,
1376
+ controlHeight,
1377
+ controlBorderWidth: borderWidthValue,
1378
+ controlBorderColor: colour.control.border.default,
1379
+ controlBgChecked: colour.control.background.selected,
1380
+ controlBgDefault: colour.control.background.default,
1381
+ children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1382
+ StyledThumb,
1383
+ {
1384
+ thumbSize,
1385
+ thumbBgColor: isChecked ? colour.thumb.background.selected : colour.thumb.background.default,
1386
+ style: { transform: [{ translateX: thumbTranslateX }] }
1387
+ }
1388
+ ) })
1389
+ }
1390
+ ),
1391
+ (label || subText) && /* @__PURE__ */ jsxRuntime.jsxs(StyledContent, { contentGap: parseTokenValue13(spacing.content.gap), children: [
1392
+ label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
1393
+ subText && /* @__PURE__ */ jsxRuntime.jsx(
1394
+ Typography,
1395
+ {
1396
+ token: typography.subText,
1397
+ color: colour.text.subtext,
1398
+ children: subText
1399
+ }
1400
+ )
1401
+ ] })
1402
+ ]
1403
+ })
1404
+ );
1405
+ }
1406
+ );
1407
+ Switch.displayName = "Switch";
1408
+ var parseTokenValue14 = (value) => parseFloat(value);
1409
+ var StyledTag = styled25__default.default(reactNative.View)(({ theme: theme2, tagVariant, tagSize }) => {
1410
+ const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
1411
+ const backgroundColorMap = {
1412
+ primary: colour.primary.background,
1413
+ secondary: colour.primary.secondary,
1414
+ tertiary: colour.primary.tertiery,
1415
+ promo: colour.primary.promo,
1416
+ success: colour.primary.success,
1417
+ warning: colour.primary.warning,
1418
+ error: colour.primary.error
1419
+ };
1420
+ return {
1421
+ flexDirection: "row",
1422
+ alignItems: "center",
1423
+ justifyContent: "center",
1424
+ height: parseTokenValue14(sizing[tagSize].height),
1425
+ minWidth: parseTokenValue14(sizing[tagSize].minWidth),
1426
+ paddingHorizontal: parseTokenValue14(spacing.horizontalPadding),
1427
+ gap: parseTokenValue14(spacing[tagSize].gap),
1428
+ borderRadius: parseTokenValue14(badge.borderRadius.default),
1429
+ backgroundColor: backgroundColorMap[tagVariant]
1430
+ };
1431
+ });
1432
+ var Tag = React26__default.default.forwardRef(
1433
+ (_a, ref) => {
1434
+ var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
1435
+ const theme2 = react.useTheme();
1436
+ const { typography, colour } = theme2.tokens.components.tags;
1437
+ const iconSizeMap = {
1438
+ small: "xs",
1439
+ medium: "xs",
1440
+ large: "sm"
1441
+ };
1442
+ const iconColourMap = {
1443
+ primary: "primary",
1444
+ secondary: "primary",
1445
+ tertiary: "primary",
1446
+ promo: "promo",
1447
+ success: "success",
1448
+ warning: "warning",
1449
+ error: "error"
1450
+ };
1451
+ const textColorMap = {
1452
+ primary: colour.text.default,
1453
+ secondary: colour.text.default,
1454
+ tertiary: colour.text.default,
1455
+ promo: colour.text.promo,
1456
+ success: colour.text.success,
1457
+ warning: colour.text.warning,
1458
+ error: colour.text.error
1459
+ };
1460
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledTag, __spreadProps(__spreadValues({ ref, tagVariant: variant, tagSize: size }, rest), { children: [
1461
+ icon && /* @__PURE__ */ jsxRuntime.jsx(
1462
+ Icon,
1463
+ {
1464
+ icon,
1465
+ size: iconSizeMap[size],
1466
+ colour: iconColourMap[variant]
1467
+ }
1468
+ ),
1469
+ /* @__PURE__ */ jsxRuntime.jsx(
1470
+ Typography,
1471
+ {
1472
+ token: typography[size].default,
1473
+ color: textColorMap[variant],
1474
+ children
1475
+ }
1476
+ )
1477
+ ] }));
1478
+ }
1479
+ );
1480
+ Tag.displayName = "Tag";
1481
+ var parseTokenValue15 = (value) => parseFloat(value);
1482
+ var StyledDockRoot = styled25__default.default(reactNative.View)(
1483
+ ({
1484
+ dockBgColor,
1485
+ dockBorderTopWidth,
1486
+ dockBorderTopColor,
1487
+ dockPaddingVertical
1488
+ }) => ({
1489
+ alignItems: "center",
1490
+ justifyContent: "center",
1491
+ width: "100%",
1492
+ backgroundColor: dockBgColor,
1493
+ borderTopWidth: dockBorderTopWidth,
1494
+ borderTopColor: dockBorderTopColor,
1495
+ paddingVertical: dockPaddingVertical
1496
+ })
1497
+ );
1498
+ var StyledStackedInner = styled25__default.default(reactNative.View)({
1499
+ alignItems: "center",
1500
+ gap: 16,
1501
+ width: "100%",
1502
+ maxWidth: 520
1503
+ });
1504
+ var StyledButtonGroup = styled25__default.default(reactNative.View)(({ groupDirection, groupAlign, groupJustify, groupGap }) => __spreadValues({
1505
+ flexDirection: groupDirection,
1506
+ alignItems: groupAlign,
1507
+ justifyContent: groupJustify,
1508
+ gap: groupGap,
1509
+ width: "100%"
1510
+ }, groupDirection === "column" ? { maxWidth: 520 } : {}));
1511
+ var ButtonDock = React26__default.default.forwardRef(
1512
+ (_a, ref) => {
1513
+ var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
1514
+ const theme2 = react.useTheme();
1515
+ const { buttonDock, buttonGroup } = theme2.tokens.components;
1516
+ const { dimensions } = theme2.tokens.semantics;
1517
+ const isStacked = variant === "stacked";
1518
+ const groupGap = parseTokenValue15(
1519
+ isStacked ? buttonGroup.spacing.stacked.gap : buttonGroup.spacing.sideBySide.gap
1520
+ );
1521
+ return /* @__PURE__ */ jsxRuntime.jsx(
1522
+ StyledDockRoot,
1523
+ __spreadProps(__spreadValues({
1524
+ ref,
1525
+ dockBgColor: buttonDock.colour.background,
1526
+ dockBorderTopWidth: parseTokenValue15(dimensions.borderWidth.sm),
1527
+ dockBorderTopColor: buttonDock.colour.border,
1528
+ dockPaddingVertical: parseTokenValue15(
1529
+ buttonDock.spacing[variant].desktop.verticalPadding
1530
+ )
1531
+ }, rest), {
1532
+ children: isStacked ? /* @__PURE__ */ jsxRuntime.jsxs(StyledStackedInner, { children: [
1533
+ leadingContent,
1534
+ /* @__PURE__ */ jsxRuntime.jsx(
1535
+ StyledButtonGroup,
1536
+ {
1537
+ groupDirection: "column",
1538
+ groupAlign: "stretch",
1539
+ groupJustify: "center",
1540
+ groupGap,
1541
+ children
1542
+ }
1543
+ ),
1544
+ description && /* @__PURE__ */ jsxRuntime.jsx(
1545
+ Typography,
1546
+ {
1547
+ variant: "body",
1548
+ size: "md",
1549
+ weight: "medium",
1550
+ align: "center",
1551
+ children: typeof description === "string" ? description : description
1552
+ }
1553
+ )
1554
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(
1555
+ StyledButtonGroup,
1556
+ {
1557
+ groupDirection: "row",
1558
+ groupAlign: "center",
1559
+ groupJustify: "space-around",
1560
+ groupGap,
1561
+ children
1562
+ }
1563
+ )
1564
+ })
1565
+ );
1566
+ }
1567
+ );
1568
+ ButtonDock.displayName = "ButtonDock";
1569
+ var parseTokenValue16 = (value) => parseFloat(value);
1570
+ var StyledGroupRoot = styled25__default.default(reactNative.View)(({ rootGap }) => ({
1571
+ gap: rootGap,
1572
+ alignItems: "center",
1573
+ width: "100%"
1574
+ }));
1575
+ var StyledButtonRow = styled25__default.default(reactNative.View)(({ rowDirection, rowAlign, rowGap }) => __spreadValues({
1576
+ flexDirection: rowDirection,
1577
+ width: "100%",
1578
+ gap: rowGap
1579
+ }, rowAlign ? { alignItems: rowAlign } : {}));
1580
+ var ButtonGroup = React26__default.default.forwardRef(
1581
+ (_a, ref) => {
1582
+ var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
1583
+ const theme2 = react.useTheme();
1584
+ const { buttonGroup } = theme2.tokens.components;
1585
+ const isInline = layout === "inline";
1586
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1587
+ StyledGroupRoot,
1588
+ __spreadProps(__spreadValues({
1589
+ ref,
1590
+ accessibilityRole: "none",
1591
+ rootGap: parseTokenValue16(buttonGroup.spacing.gap)
1592
+ }, rest), {
1593
+ children: [
1594
+ /* @__PURE__ */ jsxRuntime.jsx(
1595
+ StyledButtonRow,
1596
+ {
1597
+ rowDirection: isInline ? "row-reverse" : "column",
1598
+ rowAlign: isInline ? "center" : void 0,
1599
+ rowGap: parseTokenValue16(
1600
+ isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
1601
+ ),
1602
+ children
1603
+ }
1604
+ ),
1605
+ description && /* @__PURE__ */ jsxRuntime.jsx(
1606
+ Typography,
1607
+ {
1608
+ token: buttonGroup.typography.description,
1609
+ color: buttonGroup.colour.text,
1610
+ align: "center",
1611
+ children: description
1612
+ }
1613
+ )
1614
+ ]
1615
+ })
1616
+ );
1617
+ }
1618
+ );
1619
+ ButtonGroup.displayName = "ButtonGroup";
1620
+
1621
+ // ../pawprint-icons/dist/chunk-N3ETBM74.js
1622
+ var __defProp2 = Object.defineProperty;
1623
+ var __defProps2 = Object.defineProperties;
1624
+ var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
1625
+ var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
1626
+ var __hasOwnProp2 = Object.prototype.hasOwnProperty;
1627
+ var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
1628
+ var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
1629
+ var __spreadValues2 = (a, b) => {
1630
+ for (var prop in b || (b = {}))
1631
+ if (__hasOwnProp2.call(b, prop))
1632
+ __defNormalProp2(a, prop, b[prop]);
1633
+ if (__getOwnPropSymbols2)
1634
+ for (var prop of __getOwnPropSymbols2(b)) {
1635
+ if (__propIsEnum2.call(b, prop))
1636
+ __defNormalProp2(a, prop, b[prop]);
1637
+ }
1638
+ return a;
1639
+ };
1640
+ var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
1641
+ var Add = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
1642
+ var ForwardRef = React26.forwardRef(Add);
1643
+ ForwardRef.category = "core";
1644
+ var AddCircle = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
1645
+ var ForwardRef2 = React26.forwardRef(AddCircle);
1646
+ ForwardRef2.category = "core";
1647
+ var AddCircleOutline = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1m0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
1648
+ var ForwardRef3 = React26.forwardRef(AddCircleOutline);
1649
+ ForwardRef3.category = "core";
1650
+ var ArrowBack = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1" }) }));
1651
+ var ForwardRef4 = React26.forwardRef(ArrowBack);
1652
+ ForwardRef4.category = "core";
1653
+ var ArrowDownward = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1" }) }));
1654
+ var ForwardRef5 = React26.forwardRef(ArrowDownward);
1655
+ ForwardRef5.category = "core";
1656
+ var ArrowDropDown = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8.71 11.71 2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71" }) }));
1657
+ var ForwardRef6 = React26.forwardRef(ArrowDropDown);
1658
+ ForwardRef6.category = "core";
1659
+ var ArrowDropUp = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.71 12.29 11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71" }) }));
1660
+ var ForwardRef7 = React26.forwardRef(ArrowDropUp);
1661
+ ForwardRef7.category = "core";
1662
+ var ArrowForward = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42s1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1" }) }));
1663
+ var ForwardRef8 = React26.forwardRef(ArrowForward);
1664
+ ForwardRef8.category = "core";
1665
+ var ArrowLeft = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.29 8.71 9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" }) }));
1666
+ var ForwardRef9 = React26.forwardRef(ArrowLeft);
1667
+ ForwardRef9.category = "core";
1668
+ var ArrowRight = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11.71 15.29 2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" }) }));
1669
+ var ForwardRef10 = React26.forwardRef(ArrowRight);
1670
+ ForwardRef10.category = "core";
1671
+ var ArrowUpward = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1" }) }));
1672
+ var ForwardRef11 = React26.forwardRef(ArrowUpward);
1673
+ ForwardRef11.category = "core";
1674
+ var Autorenew = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79a.5.5 0 0 0-.85.36V4c-4.42 0-8 3.58-8 8 0 1.04.2 2.04.57 2.95.27.67 1.13.85 1.64.34.27-.27.38-.68.23-1.04C6.15 13.56 6 12.79 6 12c0-3.31 2.69-6 6-6m5.79 2.71c-.27.27-.38.69-.23 1.04.28.7.44 1.46.44 2.25 0 3.31-2.69 6-6 6v-1.79c0-.45-.54-.67-.85-.35l-2.79 2.79c-.2.2-.2.51 0 .71l2.79 2.79a.5.5 0 0 0 .85-.35V20c4.42 0 8-3.58 8-8 0-1.04-.2-2.04-.57-2.95-.27-.67-1.13-.85-1.64-.34" }) }));
1675
+ var ForwardRef12 = React26.forwardRef(Autorenew);
1676
+ ForwardRef12.category = "core";
1677
+ var Cancel = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41" }) }));
1678
+ var ForwardRef13 = React26.forwardRef(Cancel);
1679
+ ForwardRef13.category = "core";
1680
+ var Check = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z" }) }));
1681
+ var ForwardRef14 = React26.forwardRef(Check);
1682
+ ForwardRef14.category = "core";
1683
+ var Check_default = ForwardRef14;
1684
+ var CheckCircle = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0" }) }));
1685
+ var ForwardRef15 = React26.forwardRef(CheckCircle);
1686
+ ForwardRef15.category = "core";
1687
+ var Close = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4" }) }));
1688
+ var ForwardRef16 = React26.forwardRef(Close);
1689
+ ForwardRef16.category = "core";
1690
+ var Delete = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1" }) }));
1691
+ var ForwardRef17 = React26.forwardRef(Delete);
1692
+ ForwardRef17.category = "core";
1693
+ var DoDisturb = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.9 7.9 0 0 1 12 20m6.31-3.1L7.1 5.69A7.9 7.9 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9" }) }));
1694
+ var ForwardRef18 = React26.forwardRef(DoDisturb);
1695
+ ForwardRef18.category = "core";
1696
+ var Edit = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1q-.15.15-.15.36M20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" }) }));
1697
+ var ForwardRef19 = React26.forwardRef(Edit);
1698
+ ForwardRef19.category = "core";
1699
+ var Error2 = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z" }) }));
1700
+ var ForwardRef20 = React26.forwardRef(Error2);
1701
+ ForwardRef20.category = "core";
1702
+ var ErrorOutline = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V8c0-.55.45-1 1-1m-.01-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m1-3h-2v-2h2z" }) }));
1703
+ var ForwardRef21 = React26.forwardRef(ErrorOutline);
1704
+ ForwardRef21.category = "core";
1705
+ var Female = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m1 8.91a5.5 5.5 0 0 0 4.5-5.41C17.5 6.46 15.04 4 12 4S6.5 6.46 6.5 9.5a5.5 5.5 0 0 0 4.5 5.41V17h-1c-.55 0-1 .45-1 1s.45 1 1 1h1v1c0 .55.45 1 1 1s1-.45 1-1v-1h1c.55 0 1-.45 1-1s-.45-1-1-1h-1z" }) }));
1706
+ var ForwardRef22 = React26.forwardRef(Female);
1707
+ ForwardRef22.category = "core";
1708
+ var FilterAlt = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.25 5.61C6.57 8.59 10 13 10 13v5c0 1.1.9 2 2 2s2-.9 2-2v-5s3.43-4.41 5.75-7.39c.51-.66.04-1.61-.8-1.61H5.04c-.83 0-1.3.95-.79 1.61" }) }));
1709
+ var ForwardRef23 = React26.forwardRef(FilterAlt);
1710
+ ForwardRef23.category = "core";
1711
+ var HelpOutline = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47" }) }));
1712
+ var ForwardRef24 = React26.forwardRef(HelpOutline);
1713
+ ForwardRef24.category = "core";
1714
+ var HighlightOff = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.89 8.7 12 10.59 10.11 8.7a.996.996 0 1 0-1.41 1.41L10.59 12 8.7 13.89a.996.996 0 1 0 1.41 1.41L12 13.41l1.89 1.89a.996.996 0 1 0 1.41-1.41L13.41 12l1.89-1.89a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.38-1.41 0M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
1715
+ var ForwardRef25 = React26.forwardRef(HighlightOff);
1716
+ ForwardRef25.category = "core";
1717
+ var Info = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z" }) }));
1718
+ var ForwardRef26 = React26.forwardRef(Info);
1719
+ ForwardRef26.category = "core";
1720
+ var InfoOutline = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 7h2v2h-2zm1 10c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1m0-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
1721
+ var ForwardRef27 = React26.forwardRef(InfoOutline);
1722
+ ForwardRef27.category = "core";
1723
+ var KeyboardArrowDown = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0" }) }));
1724
+ var ForwardRef28 = React26.forwardRef(KeyboardArrowDown);
1725
+ ForwardRef28.category = "core";
1726
+ var KeyboardArrowLeft = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.71 15.88 10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42" }) }));
1727
+ var ForwardRef29 = React26.forwardRef(KeyboardArrowLeft);
1728
+ ForwardRef29.category = "core";
1729
+ var KeyboardArrowRight = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42" }) }));
1730
+ var ForwardRef30 = React26.forwardRef(KeyboardArrowRight);
1731
+ ForwardRef30.category = "core";
1732
+ var KeyboardArrowUp = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0" }) }));
1733
+ var ForwardRef31 = React26.forwardRef(KeyboardArrowUp);
1734
+ ForwardRef31.category = "core";
1735
+ var KeyboardDoubleArrowDown = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M6.702 12.282a.996.996 0 0 1 1.41 0l3.88 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02.01 1.4l-4.59 4.59a.996.996 0 0 1-1.41 0l-4.59-4.59a.996.996 0 0 1 0-1.41m-.01-6.59a.995.995 0 0 1 1.41 0l3.89 3.88 3.88-3.87a.996.996 0 0 1 1.41 0c.39.39.39 1.02 0 1.4l-4.59 4.59a.997.997 0 0 1-1.41 0l-4.59-4.59a.995.995 0 0 1 0-1.41", clipRule: "evenodd" }) }));
1736
+ var ForwardRef32 = React26.forwardRef(KeyboardDoubleArrowDown);
1737
+ ForwardRef32.category = "core";
1738
+ var KeyboardDoubleArrowLeft = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.282 6.692a.996.996 0 1 1 1.41 1.41l-3.88 3.88 3.87 3.88c.39.39.39 1.02 0 1.41a.993.993 0 0 1-1.4.01l-4.59-4.59a.996.996 0 0 1 0-1.41zm6.59 0a.996.996 0 1 1 1.41 1.41l-3.88 3.88 3.87 3.88c.39.39.39 1.02 0 1.41a.993.993 0 0 1-1.4.01l-4.59-4.59a.996.996 0 0 1 0-1.41z", clipRule: "evenodd" }) }));
1739
+ var ForwardRef33 = React26.forwardRef(KeyboardDoubleArrowLeft);
1740
+ ForwardRef33.category = "core";
1741
+ var KeyboardDoubleArrowRight = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M5.692 6.693a1.01 1.01 0 0 1 1.421 0l4.58 4.58c.39.39.39 1.02 0 1.41l-4.59 4.59a.996.996 0 1 1-1.41-1.41l3.88-3.88-3.88-3.88a.997.997 0 0 1 0-1.41m6.591 0c.39-.39 1.03-.39 1.41-.01l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.59a.996.996 0 1 1-1.41-1.41l3.88-3.88-3.88-3.88a.996.996 0 0 1 0-1.41", clipRule: "evenodd" }) }));
1742
+ var ForwardRef34 = React26.forwardRef(KeyboardDoubleArrowRight);
1743
+ ForwardRef34.category = "core";
1744
+ var KeyboardDoubleArrowUp = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M11.282 12.282a.996.996 0 0 1 1.41 0l4.59 4.59a.996.996 0 1 1-1.41 1.41l-3.88-3.88-3.89 3.87a.995.995 0 0 1-1.41 0 .995.995 0 0 1 0-1.41zm0-6.59a.996.996 0 0 1 1.41 0l4.59 4.59a.996.996 0 1 1-1.41 1.41l-3.88-3.88-3.89 3.87a.996.996 0 1 1-1.41-1.41z", clipRule: "evenodd" }) }));
1745
+ var ForwardRef35 = React26.forwardRef(KeyboardDoubleArrowUp);
1746
+ ForwardRef35.category = "core";
1747
+ var Language = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95a15.7 15.7 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A8 8 0 0 1 5.08 16m2.95-8H5.08a8 8 0 0 1 4.33-3.56A15.7 15.7 0 0 0 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z" }) }));
1748
+ var ForwardRef36 = React26.forwardRef(Language);
1749
+ ForwardRef36.category = "core";
1750
+ var Lock = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z" }) }));
1751
+ var ForwardRef37 = React26.forwardRef(Lock);
1752
+ ForwardRef37.category = "core";
1753
+ var Male = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 4h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.58l-3.97 3.97C11.73 9.36 10.66 9 9.5 9 6.46 9 4 11.46 4 14.5S6.46 20 9.5 20s5.5-2.46 5.5-5.5c0-1.16-.36-2.23-.97-3.12L18 7.42V9c0 .55.45 1 1 1s1-.45 1-1V5c0-.55-.45-1-1-1M9.5 18C7.57 18 6 16.43 6 14.5S7.57 11 9.5 11s3.5 1.57 3.5 3.5S11.43 18 9.5 18" }) }));
1754
+ var ForwardRef38 = React26.forwardRef(Male);
1755
+ ForwardRef38.category = "core";
1756
+ var Menu = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1" }) }));
1757
+ var ForwardRef39 = React26.forwardRef(Menu);
1758
+ ForwardRef39.category = "core";
1759
+ var MoreHoriz = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" }) }));
1760
+ var ForwardRef40 = React26.forwardRef(MoreHoriz);
1761
+ ForwardRef40.category = "core";
1762
+ var MoreVert = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" }) }));
1763
+ var ForwardRef41 = React26.forwardRef(MoreVert);
1764
+ ForwardRef41.category = "core";
1765
+ var Pause = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2m6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2" }) }));
1766
+ var ForwardRef42 = React26.forwardRef(Pause);
1767
+ ForwardRef42.category = "core";
1768
+ var PlayArrow = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18a1 1 0 0 0 0-1.69L9.54 5.98A.998.998 0 0 0 8 6.82" }) }));
1769
+ var ForwardRef43 = React26.forwardRef(PlayArrow);
1770
+ ForwardRef43.category = "core";
1771
+ var Refresh = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.65 6.35a7.95 7.95 0 0 0-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 0 0 7.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 0 1-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0 1 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71z" }) }));
1772
+ var ForwardRef44 = React26.forwardRef(Refresh);
1773
+ ForwardRef44.category = "core";
1774
+ var Remove = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
1775
+ var ForwardRef45 = React26.forwardRef(Remove);
1776
+ ForwardRef45.category = "core";
1777
+ var RemoveCircle = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m4 11H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1" }) }));
1778
+ var ForwardRef46 = React26.forwardRef(RemoveCircle);
1779
+ ForwardRef46.category = "core";
1780
+ var RemoveCircleOutline = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 12c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1m5-10C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" }) }));
1781
+ var ForwardRef47 = React26.forwardRef(RemoveCircleOutline);
1782
+ ForwardRef47.category = "core";
1783
+ var Search = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" }) }));
1784
+ var ForwardRef48 = React26.forwardRef(Search);
1785
+ ForwardRef48.category = "core";
1786
+ var Settings = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.3 7.3 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5" }) }));
1787
+ var ForwardRef49 = React26.forwardRef(Settings);
1788
+ ForwardRef49.category = "core";
1789
+ var StarBorder = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
1790
+ var ForwardRef50 = React26.forwardRef(StarBorder);
1791
+ ForwardRef50.category = "core";
1792
+ var StarHalf = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.65 9.04-4.84-.42-1.89-4.45c-.34-.81-1.5-.81-1.84 0L9.19 8.63l-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08l4.15-2.5 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.73 3.67-3.18c.67-.58.32-1.68-.56-1.75M12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z" }) }));
1793
+ var ForwardRef51 = React26.forwardRef(StarHalf);
1794
+ ForwardRef51.category = "core";
1795
+ var StarRate = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11.957 17.498 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0l-1.89 4.45-4.83.41c-.88.07-1.24 1.17-.57 1.75l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08z" }) }));
1796
+ var ForwardRef52 = React26.forwardRef(StarRate);
1797
+ ForwardRef52.category = "core";
1798
+ var Visibility = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) }));
1799
+ var ForwardRef53 = React26.forwardRef(Visibility);
1800
+ ForwardRef53.category = "core";
1801
+ var VisibilityOff = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.9 11.9 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z" }) }));
1802
+ var ForwardRef54 = React26.forwardRef(VisibilityOff);
1803
+ ForwardRef54.category = "core";
1804
+ var VolumeOff = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.63 3.63a.996.996 0 0 0 0 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 1 0 1.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0M19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12m-8.71-6.29-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7M16.5 12A4.5 4.5 0 0 0 14 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24" }) }));
1805
+ var ForwardRef55 = React26.forwardRef(VolumeOff);
1806
+ ForwardRef55.category = "core";
1807
+ var VolumeUp = (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps2(__spreadValues2({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ref }, props), { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1m13.5 2A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 4.45v.2c0 .38.25.71.6.85A7 7 0 0 1 19 12c0 2.94-1.82 5.47-4.4 6.5-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85A8.98 8.98 0 0 0 21 12c0-3.84-2.4-7.11-5.79-8.4-.58-.23-1.21.22-1.21.85" }) }));
1808
+ var ForwardRef56 = React26.forwardRef(VolumeUp);
1809
+ ForwardRef56.category = "core";
1810
+ var parseTokenValue17 = (value) => parseFloat(value);
1811
+ var StyledRoot5 = styled25__default.default(CheckboxPrimitive__namespace.Root)(
1812
+ ({
1813
+ rootFlexAlign,
1814
+ rootGap,
1815
+ rootOpacity,
1816
+ rootPaddingVertical,
1817
+ rootPaddingHorizontal,
1818
+ rootMaxWidth,
1819
+ rootBgColor,
1820
+ rootBorderWidth,
1821
+ rootBorderColor,
1822
+ rootBorderRadius
1823
+ }) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
1824
+ flexDirection: "row",
1825
+ alignItems: rootFlexAlign,
1826
+ gap: rootGap,
1827
+ opacity: rootOpacity
1828
+ }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
1829
+ );
1830
+ var StyledControl2 = styled25__default.default(reactNative.View)(
1831
+ ({
1832
+ controlSize,
1833
+ controlBorderWidth,
1834
+ controlBorderColor,
1835
+ controlBorderRadius,
1836
+ controlBgColor
1837
+ }) => ({
1838
+ flexShrink: 0,
1839
+ width: controlSize,
1840
+ height: controlSize,
1841
+ borderWidth: controlBorderWidth,
1842
+ borderColor: controlBorderColor,
1843
+ borderRadius: controlBorderRadius,
1844
+ backgroundColor: controlBgColor,
1845
+ alignItems: "center",
1846
+ justifyContent: "center"
1847
+ })
1848
+ );
1849
+ var StyledContent2 = styled25__default.default(reactNative.View)(({ contentGap }) => ({
1850
+ flexDirection: "column",
1851
+ gap: contentGap,
1852
+ flex: 1,
1853
+ minWidth: 0
1854
+ }));
1855
+ var StyledIllustration = styled25__default.default(reactNative.View)(({ illustrationSize }) => ({
1856
+ flexShrink: 0,
1857
+ width: illustrationSize,
1858
+ height: illustrationSize,
1859
+ overflow: "hidden"
1860
+ }));
1861
+ var Checkbox = React26__default.default.forwardRef(
1862
+ (_a, ref) => {
1863
+ var _b = _a, {
1864
+ variant = "standalone",
1865
+ label,
1866
+ subText,
1867
+ illustration,
1868
+ checked: controlledChecked,
1869
+ defaultChecked = false,
1870
+ onCheckedChange,
1871
+ disabled = false,
1872
+ style
1873
+ } = _b, rest = __objRest(_b, [
1874
+ "variant",
1875
+ "label",
1876
+ "subText",
1877
+ "illustration",
1878
+ "checked",
1879
+ "defaultChecked",
1880
+ "onCheckedChange",
1881
+ "disabled",
1882
+ "style"
1883
+ ]);
1884
+ const theme2 = react.useTheme();
1885
+ const { checkbox } = theme2.tokens.components;
1886
+ const { dimensions } = theme2.tokens.semantics;
1887
+ const isControlled = controlledChecked !== void 0;
1888
+ const [internalChecked, setInternalChecked] = React26__default.default.useState(defaultChecked);
1889
+ const isChecked = isControlled ? controlledChecked : internalChecked;
1890
+ const handleCheckedChange = (checked) => {
1891
+ if (!isControlled) {
1892
+ setInternalChecked(checked);
1893
+ }
1894
+ onCheckedChange == null ? void 0 : onCheckedChange(checked);
1895
+ };
1896
+ const isTile = variant === "tile";
1897
+ const controlSize = parseTokenValue17(checkbox.size.control.default);
1898
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1899
+ StyledRoot5,
1900
+ __spreadProps(__spreadValues({
1901
+ ref,
1902
+ checked: isChecked,
1903
+ onCheckedChange: handleCheckedChange,
1904
+ disabled,
1905
+ rootFlexAlign: isTile ? "center" : "flex-start",
1906
+ rootGap: parseTokenValue17(
1907
+ isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
1908
+ ),
1909
+ rootOpacity: disabled ? parseFloat(theme2.tokens.primitives.opacity["40"]) : 1,
1910
+ rootPaddingVertical: isTile ? parseTokenValue17(checkbox.checkboxTile.spacing.verticalPadding) : void 0,
1911
+ rootPaddingHorizontal: isTile ? parseTokenValue17(checkbox.checkboxTile.spacing.horizontalPadding) : void 0,
1912
+ rootMaxWidth: isTile ? parseTokenValue17(checkbox.checkboxTile.size.maxWidth) : void 0,
1913
+ rootBgColor: isTile ? isChecked ? checkbox.checkboxTile.colour.background.selected : checkbox.checkboxTile.colour.background.default : void 0,
1914
+ rootBorderWidth: isTile ? parseTokenValue17(checkbox.checkboxTile.borderWidth.default) : void 0,
1915
+ rootBorderColor: isTile ? isChecked ? checkbox.checkboxTile.colour.border.selected : checkbox.checkboxTile.colour.border.default : void 0,
1916
+ rootBorderRadius: isTile ? parseTokenValue17(checkbox.checkboxTile.borderRadius.default) : void 0,
1917
+ style: typeof style === "function" ? void 0 : style
1918
+ }, rest), {
1919
+ children: [
1920
+ /* @__PURE__ */ jsxRuntime.jsx(
1921
+ StyledControl2,
1922
+ {
1923
+ controlSize,
1924
+ controlBorderWidth: parseTokenValue17(checkbox.control.border.default),
1925
+ controlBorderColor: isChecked ? checkbox.colour.background.selected : checkbox.colour.border.default,
1926
+ controlBorderRadius: parseTokenValue17(dimensions.borderRadius.xs),
1927
+ controlBgColor: isChecked ? checkbox.colour.background.selected : "transparent",
1928
+ children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: Check_default, size: "xs", colour: "alt" }) })
1929
+ }
1930
+ ),
1931
+ /* @__PURE__ */ jsxRuntime.jsxs(
1932
+ StyledContent2,
1933
+ {
1934
+ contentGap: parseTokenValue17(checkbox.spacing.content.gap),
1935
+ children: [
1936
+ label && /* @__PURE__ */ jsxRuntime.jsx(
1937
+ Typography,
1938
+ {
1939
+ token: checkbox.typography.label,
1940
+ color: checkbox.colour.text.title,
1941
+ children: label
1942
+ }
1943
+ ),
1944
+ subText && /* @__PURE__ */ jsxRuntime.jsx(
1945
+ Typography,
1946
+ {
1947
+ token: checkbox.typography.subText,
1948
+ color: checkbox.colour.text.subtext,
1949
+ children: subText
1950
+ }
1951
+ )
1952
+ ]
1953
+ }
1954
+ ),
1955
+ isTile && illustration && /* @__PURE__ */ jsxRuntime.jsx(
1956
+ StyledIllustration,
1957
+ {
1958
+ illustrationSize: parseTokenValue17(
1959
+ checkbox.checkboxTile.size.illustration.default
1960
+ ),
1961
+ children: illustration
1962
+ }
1963
+ )
1964
+ ]
1965
+ })
1966
+ );
1967
+ }
1968
+ );
1969
+ Checkbox.displayName = "Checkbox";
1970
+ var parseTokenValue18 = (value) => parseFloat(value);
1971
+ var StyledGroup = styled25__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
1972
+ flexDirection: groupDirection,
1973
+ gap: groupGap
1974
+ }));
1975
+ var CheckboxGroup = React26__default.default.forwardRef(
1976
+ (_a, ref) => {
1977
+ var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
1978
+ const theme2 = react.useTheme();
1979
+ const { checkbox } = theme2.tokens.components;
1980
+ return /* @__PURE__ */ jsxRuntime.jsx(
1981
+ StyledGroup,
1982
+ __spreadProps(__spreadValues({
1983
+ ref,
1984
+ groupDirection: orientation === "horizontal" ? "row" : "column",
1985
+ groupGap: parseTokenValue18(checkbox.spacing.gap)
1986
+ }, rest), {
1987
+ children
1988
+ })
1989
+ );
1990
+ }
1991
+ );
1992
+ CheckboxGroup.displayName = "CheckboxGroup";
1993
+ var parseTokenValue19 = (value) => parseFloat(value);
1994
+ var StyledRadioRoot = styled25__default.default(reactNative.Pressable)(
1995
+ ({
1996
+ radioGap,
1997
+ radioOpacity,
1998
+ radioPaddingVertical,
1999
+ radioPaddingHorizontal,
2000
+ radioMaxWidth,
2001
+ radioBgColor,
2002
+ radioBorderWidth,
2003
+ radioBorderColor,
2004
+ radioBorderRadius
2005
+ }) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
2006
+ flexDirection: "row",
2007
+ alignItems: "flex-start",
2008
+ width: "100%",
2009
+ gap: radioGap,
2010
+ opacity: radioOpacity
2011
+ }, radioPaddingVertical !== void 0 ? { paddingVertical: radioPaddingVertical } : {}), radioPaddingHorizontal !== void 0 ? { paddingHorizontal: radioPaddingHorizontal } : {}), radioMaxWidth !== void 0 ? { maxWidth: radioMaxWidth } : {}), radioBgColor ? { backgroundColor: radioBgColor } : {}), radioBorderWidth !== void 0 ? { borderWidth: radioBorderWidth, borderColor: radioBorderColor } : {}), radioBorderRadius !== void 0 ? { borderRadius: radioBorderRadius } : {})
2012
+ );
2013
+ var StyledRadioControl = styled25__default.default(reactNative.View)(({ controlSize, controlBorderWidth, controlBorderColor }) => ({
2014
+ width: controlSize,
2015
+ height: controlSize,
2016
+ minWidth: controlSize,
2017
+ minHeight: controlSize,
2018
+ borderWidth: controlBorderWidth,
2019
+ borderColor: controlBorderColor,
2020
+ borderRadius: controlSize / 2,
2021
+ alignItems: "center",
2022
+ justifyContent: "center"
2023
+ }));
2024
+ var StyledIndicator = styled25__default.default(reactNative.View)(({ indicatorSize, indicatorBgColor }) => ({
2025
+ width: indicatorSize,
2026
+ height: indicatorSize,
2027
+ borderRadius: indicatorSize / 2,
2028
+ backgroundColor: indicatorBgColor
2029
+ }));
2030
+ var StyledTextContent = styled25__default.default(reactNative.View)(({ textContentGap }) => ({
2031
+ flexDirection: "column",
2032
+ gap: textContentGap,
2033
+ marginTop: 2
2034
+ }));
2035
+ var StyledAssetWrapper = styled25__default.default(reactNative.View)({
2036
+ alignSelf: "center"
2037
+ });
2038
+ var Radio = React26__default.default.forwardRef(
2039
+ (_a, ref) => {
2040
+ var _b = _a, {
2041
+ variant = "standalone",
2042
+ label,
2043
+ subText,
2044
+ asset,
2045
+ disabled = false,
2046
+ value,
2047
+ selected = false,
2048
+ onSelect,
2049
+ style
2050
+ } = _b, rest = __objRest(_b, [
2051
+ "variant",
2052
+ "label",
2053
+ "subText",
2054
+ "asset",
2055
+ "disabled",
2056
+ "value",
2057
+ "selected",
2058
+ "onSelect",
2059
+ "style"
2060
+ ]);
2061
+ const theme2 = react.useTheme();
2062
+ const { radio } = theme2.tokens.components;
2063
+ const { spacing, typography, colour } = radio;
2064
+ const handlePress = () => {
2065
+ if (disabled) return;
2066
+ onSelect == null ? void 0 : onSelect(value);
2067
+ };
2068
+ const controlSize = parseTokenValue19(radio.size.control.default);
2069
+ const indicatorSize = parseTokenValue19(radio.size.indicator.default);
2070
+ const borderWidthVal = parseTokenValue19(radio.borderWidth.default);
2071
+ const isTile = variant === "tile";
2072
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2073
+ StyledRadioRoot,
2074
+ __spreadProps(__spreadValues({
2075
+ ref,
2076
+ onPress: handlePress,
2077
+ disabled,
2078
+ accessibilityRole: "radio",
2079
+ accessibilityState: { selected, disabled },
2080
+ radioGap: parseTokenValue19(
2081
+ isTile ? radio.radioTile.spacing.gap : spacing.gap
2082
+ ),
2083
+ radioOpacity: disabled ? parseFloat(radio.opacity.disabled) : 1,
2084
+ radioPaddingVertical: isTile ? parseTokenValue19(radio.radioTile.spacing.verticalPadding) : void 0,
2085
+ radioPaddingHorizontal: isTile ? parseTokenValue19(radio.radioTile.spacing.horizontalPadding) : void 0,
2086
+ radioMaxWidth: isTile ? parseTokenValue19(radio.radioTile.size.maxWidth) : void 0,
2087
+ radioBgColor: isTile ? selected ? radio.radioTile.colour.background.selected : radio.radioTile.colour.background.default : void 0,
2088
+ radioBorderWidth: isTile ? parseTokenValue19(radio.radioTile.borderWidth.default) : void 0,
2089
+ radioBorderColor: isTile ? selected ? radio.radioTile.colour.border.selected : radio.radioTile.colour.border.default : void 0,
2090
+ radioBorderRadius: isTile ? parseTokenValue19(radio.radioTile.borderRadius.default) : void 0,
2091
+ style: typeof style === "function" ? void 0 : style
2092
+ }, rest), {
2093
+ children: [
2094
+ /* @__PURE__ */ jsxRuntime.jsx(
2095
+ StyledRadioControl,
2096
+ {
2097
+ controlSize,
2098
+ controlBorderWidth: borderWidthVal,
2099
+ controlBorderColor: selected ? radio.colour.control.border.selected : radio.colour.control.border.default,
2100
+ children: selected && /* @__PURE__ */ jsxRuntime.jsx(
2101
+ StyledIndicator,
2102
+ {
2103
+ indicatorSize,
2104
+ indicatorBgColor: radio.colour.indicator.background.selected
2105
+ }
2106
+ )
2107
+ }
2108
+ ),
2109
+ (label || subText) && /* @__PURE__ */ jsxRuntime.jsxs(
2110
+ StyledTextContent,
2111
+ {
2112
+ textContentGap: parseTokenValue19(spacing.content.gap),
2113
+ children: [
2114
+ label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { token: typography.label, color: colour.text.title, children: label }),
2115
+ subText && /* @__PURE__ */ jsxRuntime.jsx(
2116
+ Typography,
2117
+ {
2118
+ token: typography.subText,
2119
+ color: colour.text.subtext,
2120
+ children: subText
2121
+ }
2122
+ )
2123
+ ]
2124
+ }
2125
+ ),
2126
+ isTile && asset && /* @__PURE__ */ jsxRuntime.jsx(StyledAssetWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, __spreadValues({}, asset)) })
2127
+ ]
2128
+ })
2129
+ );
2130
+ }
2131
+ );
2132
+ Radio.displayName = "Radio";
2133
+ var parseTokenValue20 = (value) => parseFloat(value);
2134
+ var StyledRadioGroup = styled25__default.default(reactNative.View)(({ groupDirection, groupGap }) => ({
2135
+ flexDirection: groupDirection,
2136
+ gap: groupGap
2137
+ }));
2138
+ var RadioGroupRoot = React26__default.default.forwardRef(
2139
+ (_a, ref) => {
2140
+ var _b = _a, {
2141
+ name: _name,
2142
+ options,
2143
+ orientation = "vertical",
2144
+ value,
2145
+ defaultValue,
2146
+ onValueChange,
2147
+ disabled = false,
2148
+ children
2149
+ } = _b, rest = __objRest(_b, [
2150
+ "name",
2151
+ "options",
2152
+ "orientation",
2153
+ "value",
2154
+ "defaultValue",
2155
+ "onValueChange",
2156
+ "disabled",
2157
+ "children"
2158
+ ]);
2159
+ var _a2;
2160
+ const theme2 = react.useTheme();
2161
+ const { radio } = theme2.tokens.components;
2162
+ const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
2163
+ const derivedDefaultValue = defaultValue != null ? defaultValue : optionsFirstValue;
2164
+ const isControlled = value !== void 0;
2165
+ const [internalValue, setInternalValue] = React26__default.default.useState(
2166
+ derivedDefaultValue != null ? derivedDefaultValue : ""
2167
+ );
2168
+ const currentValue = isControlled ? value : internalValue;
2169
+ const handleSelect = React26__default.default.useCallback(
2170
+ (newValue) => {
2171
+ if (!isControlled) {
2172
+ setInternalValue(newValue);
2173
+ }
2174
+ onValueChange == null ? void 0 : onValueChange(newValue);
2175
+ },
2176
+ [isControlled, onValueChange]
2177
+ );
2178
+ const renderChildren = () => {
2179
+ if (options) {
2180
+ return options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
2181
+ Radio,
2182
+ __spreadProps(__spreadValues({}, option), {
2183
+ selected: currentValue === option.value,
2184
+ onSelect: handleSelect,
2185
+ disabled: disabled || option.disabled
2186
+ }),
2187
+ option.value
2188
+ ));
2189
+ }
2190
+ return React26__default.default.Children.map(children, (child) => {
2191
+ if (!React26__default.default.isValidElement(child)) return child;
2192
+ return React26__default.default.cloneElement(child, {
2193
+ selected: currentValue === child.props.value,
2194
+ onSelect: handleSelect,
2195
+ disabled: disabled || child.props.disabled
2196
+ });
2197
+ });
2198
+ };
2199
+ return /* @__PURE__ */ jsxRuntime.jsx(
2200
+ StyledRadioGroup,
2201
+ __spreadProps(__spreadValues({
2202
+ ref,
2203
+ accessibilityRole: "radiogroup",
2204
+ groupDirection: orientation === "horizontal" ? "row" : "column",
2205
+ groupGap: parseTokenValue20(radio.spacing.gap)
2206
+ }, rest), {
2207
+ children: renderChildren()
2208
+ })
2209
+ );
2210
+ }
2211
+ );
2212
+ RadioGroupRoot.displayName = "RadioGroup";
2213
+ var RadioGroup = Object.assign(RadioGroupRoot, {
2214
+ Radio
2215
+ });
2216
+ var parseTokenValue21 = (value) => parseFloat(value);
2217
+ var StyledSegmentItem = styled25__default.default(reactNative.Pressable)(
2218
+ ({
2219
+ itemHeight,
2220
+ itemMinWidth,
2221
+ itemPaddingVertical,
2222
+ itemPaddingHorizontal,
2223
+ itemBorderRadius,
2224
+ itemBgColor,
2225
+ itemOpacity,
2226
+ itemFlex
2227
+ }) => __spreadValues({
2228
+ height: itemHeight,
2229
+ minWidth: itemMinWidth,
2230
+ paddingVertical: itemPaddingVertical,
2231
+ paddingHorizontal: itemPaddingHorizontal,
2232
+ borderRadius: itemBorderRadius,
2233
+ alignItems: "center",
2234
+ justifyContent: "center",
2235
+ backgroundColor: itemBgColor,
2236
+ opacity: itemOpacity
2237
+ }, itemFlex !== void 0 ? { flex: itemFlex } : { flexShrink: 0 })
2238
+ );
2239
+ var StyledContainer2 = styled25__default.default(reactNative.View)(
2240
+ ({
2241
+ containerGap,
2242
+ containerPaddingVertical,
2243
+ containerPaddingHorizontal,
2244
+ containerBorderRadius,
2245
+ containerBgColor,
2246
+ containerFullWidth
2247
+ }) => __spreadValues({
2248
+ flexDirection: "row",
2249
+ alignItems: "stretch",
2250
+ gap: containerGap,
2251
+ paddingVertical: containerPaddingVertical,
2252
+ paddingHorizontal: containerPaddingHorizontal,
2253
+ borderRadius: containerBorderRadius,
2254
+ backgroundColor: containerBgColor
2255
+ }, containerFullWidth ? { width: "100%" } : {})
2256
+ );
2257
+ var SegmentedControlItemBase = ({
2258
+ value,
2259
+ disabled = false,
2260
+ selected = false,
2261
+ layout,
2262
+ onSelect,
2263
+ children,
2264
+ theme: theme2
2265
+ }) => {
2266
+ const { controlItem } = theme2.tokens.components.segmentedControl;
2267
+ const { size, spacing, borderRadius, colour, opacity } = controlItem;
2268
+ const { typography } = controlItem;
2269
+ const handlePress = () => {
2270
+ if (disabled) return;
2271
+ onSelect == null ? void 0 : onSelect(value);
2272
+ };
2273
+ const { token, color } = selected ? {
2274
+ token: typography.label.default,
2275
+ color: colour.text.selected
2276
+ } : {
2277
+ token: typography.label.inactive,
2278
+ color: colour.text.unselected
2279
+ };
2280
+ return /* @__PURE__ */ jsxRuntime.jsx(
2281
+ StyledSegmentItem,
2282
+ {
2283
+ onPress: handlePress,
2284
+ disabled,
2285
+ accessibilityRole: "button",
2286
+ accessibilityState: { selected, disabled },
2287
+ itemHeight: parseTokenValue21(size.small.height),
2288
+ itemMinWidth: parseTokenValue21(size.small.minWidth),
2289
+ itemPaddingVertical: parseTokenValue21(spacing.verticalPadding),
2290
+ itemPaddingHorizontal: parseTokenValue21(spacing.horizontalPadding),
2291
+ itemBorderRadius: parseTokenValue21(borderRadius.default),
2292
+ itemBgColor: selected ? colour.background.selected : "transparent",
2293
+ itemOpacity: disabled ? parseFloat(opacity.disabled.default) : 1,
2294
+ itemFlex: layout === "fixed" ? 1 : void 0,
2295
+ children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { token, color, children })
2296
+ }
2297
+ );
2298
+ };
2299
+ var SegmentedControlItem = React26__default.default.forwardRef(
2300
+ (_props, _ref) => {
2301
+ return null;
2302
+ }
2303
+ );
2304
+ SegmentedControlItem.displayName = "SegmentedControl.Item";
2305
+ var SegmentedControlRoot = React26__default.default.forwardRef(
2306
+ (_a, ref) => {
2307
+ var _b = _a, {
2308
+ options,
2309
+ value,
2310
+ defaultValue,
2311
+ onValueChange,
2312
+ layout = "intrinsic",
2313
+ disabled = false,
2314
+ children
2315
+ } = _b, rest = __objRest(_b, [
2316
+ "options",
2317
+ "value",
2318
+ "defaultValue",
2319
+ "onValueChange",
2320
+ "layout",
2321
+ "disabled",
2322
+ "children"
2323
+ ]);
2324
+ var _a2, _b2;
2325
+ const theme2 = react.useTheme();
2326
+ const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
2327
+ const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
2328
+ const childrenArray = React26__default.default.Children.toArray(children);
2329
+ const firstChildValue = childrenArray.map((child) => {
2330
+ if (!React26__default.default.isValidElement(child)) return void 0;
2331
+ return child.props.value;
2332
+ }).find((v) => typeof v === "string");
2333
+ const derivedDefaultValue = (_b2 = defaultValue != null ? defaultValue : optionsFirstValue) != null ? _b2 : firstChildValue;
2334
+ const isControlled = typeof value === "string";
2335
+ const [uncontrolledValue, setUncontrolledValue] = React26__default.default.useState(
2336
+ () => derivedDefaultValue != null ? derivedDefaultValue : ""
2337
+ );
2338
+ const currentValue = isControlled ? value : uncontrolledValue;
2339
+ const handleSelect = React26__default.default.useCallback(
2340
+ (newValue) => {
2341
+ if (!isControlled) {
2342
+ setUncontrolledValue(newValue);
2343
+ }
2344
+ onValueChange == null ? void 0 : onValueChange(newValue);
2345
+ },
2346
+ [isControlled, onValueChange]
2347
+ );
2348
+ const renderItems = () => {
2349
+ if (options) {
2350
+ return options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
2351
+ SegmentedControlItemBase,
2352
+ {
2353
+ value: option.value,
2354
+ disabled: disabled || option.disabled,
2355
+ selected: currentValue === option.value,
2356
+ layout,
2357
+ onSelect: handleSelect,
2358
+ theme: theme2,
2359
+ children: option.label
2360
+ },
2361
+ option.value
2362
+ ));
2363
+ }
2364
+ return childrenArray.map((child) => {
2365
+ if (!React26__default.default.isValidElement(child)) return child;
2366
+ const childProps = child.props;
2367
+ return /* @__PURE__ */ jsxRuntime.jsx(
2368
+ SegmentedControlItemBase,
2369
+ {
2370
+ value: childProps.value,
2371
+ disabled: disabled || childProps.disabled,
2372
+ selected: currentValue === childProps.value,
2373
+ layout,
2374
+ onSelect: handleSelect,
2375
+ theme: theme2,
2376
+ children: childProps.children
2377
+ },
2378
+ childProps.value
2379
+ );
2380
+ });
2381
+ };
2382
+ const containerProps = {
2383
+ containerGap: parseTokenValue21(spacing.gap),
2384
+ containerPaddingVertical: parseTokenValue21(spacing.verticalPadding),
2385
+ containerPaddingHorizontal: parseTokenValue21(spacing.horizontalPadding),
2386
+ containerBorderRadius: parseTokenValue21(borderRadius.default),
2387
+ containerBgColor: colour.background.default,
2388
+ containerFullWidth: layout === "fixed"
2389
+ };
2390
+ if (layout === "intrinsic") {
2391
+ return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, __spreadProps(__spreadValues({ ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(
2392
+ reactNative.ScrollView,
2393
+ {
2394
+ horizontal: true,
2395
+ showsHorizontalScrollIndicator: false,
2396
+ contentContainerStyle: {
2397
+ flexDirection: "row",
2398
+ alignItems: "stretch",
2399
+ gap: containerProps.containerGap,
2400
+ paddingVertical: containerProps.containerPaddingVertical,
2401
+ paddingHorizontal: containerProps.containerPaddingHorizontal,
2402
+ borderRadius: containerProps.containerBorderRadius,
2403
+ backgroundColor: containerProps.containerBgColor
2404
+ },
2405
+ children: renderItems()
2406
+ }
2407
+ ) }));
2408
+ }
2409
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledContainer2, __spreadProps(__spreadValues(__spreadValues({ ref }, containerProps), rest), { children: renderItems() }));
2410
+ }
2411
+ );
2412
+ SegmentedControlRoot.displayName = "SegmentedControl";
2413
+ var SegmentedControl = Object.assign(SegmentedControlRoot, {
2414
+ Item: SegmentedControlItem
2415
+ });
2416
+ var parseTokenValue22 = (value) => parseFloat(value);
2417
+ var clamp = (val, min, max) => Math.min(Math.max(val, min), max);
2418
+ var snap = (val, step, min) => {
2419
+ const steps = Math.round((val - min) / step);
2420
+ return min + steps * step;
2421
+ };
2422
+ var StyledSliderRoot = styled25__default.default(SliderPrimitive__namespace.Root)(({ sliderGap, sliderMinWidth, sliderOpacity }) => ({
2423
+ gap: sliderGap,
2424
+ minWidth: sliderMinWidth,
2425
+ opacity: sliderOpacity
2426
+ }));
2427
+ var StyledLabelRow2 = styled25__default.default(reactNative.View)(({ labelRowGap }) => ({
2428
+ flexDirection: "row",
2429
+ alignItems: "center",
2430
+ gap: labelRowGap
2431
+ }));
2432
+ var StyledLabelSlot = styled25__default.default(reactNative.View)(({ labelSlotGap }) => ({
2433
+ flexDirection: "row",
2434
+ alignItems: "center",
2435
+ gap: labelSlotGap,
2436
+ flexShrink: 0
2437
+ }));
2438
+ var StyledTrackArea = styled25__default.default(reactNative.View)(({ trackAreaHeight }) => ({
2439
+ flex: 1,
2440
+ height: trackAreaHeight,
2441
+ justifyContent: "center"
2442
+ }));
2443
+ var StyledTrack = styled25__default.default(SliderPrimitive__namespace.Track)(
2444
+ ({
2445
+ trackHeight,
2446
+ trackBorderRadius,
2447
+ trackBgColor,
2448
+ trackBorderWidth,
2449
+ trackBorderColor
2450
+ }) => ({
2451
+ height: trackHeight,
2452
+ borderRadius: trackBorderRadius,
2453
+ backgroundColor: trackBgColor,
2454
+ borderWidth: trackBorderWidth,
2455
+ borderColor: trackBorderColor,
2456
+ overflow: "hidden"
2457
+ })
2458
+ );
2459
+ var StyledRange = styled25__default.default(SliderPrimitive__namespace.Range)(({ rangeBgColor, rangeBorderRadius }) => ({
2460
+ height: "100%",
2461
+ backgroundColor: rangeBgColor,
2462
+ borderRadius: rangeBorderRadius
2463
+ }));
2464
+ var StyledThumb2 = styled25__default.default(SliderPrimitive__namespace.Thumb)(({ thumbSize, thumbBorderRadius, thumbBgColor }) => ({
2465
+ position: "absolute",
2466
+ width: thumbSize,
2467
+ height: thumbSize,
2468
+ borderRadius: thumbBorderRadius,
2469
+ backgroundColor: thumbBgColor,
2470
+ alignItems: "center",
2471
+ justifyContent: "center"
2472
+ }));
2473
+ var Slider = React26__default.default.forwardRef(
2474
+ (_a, ref) => {
2475
+ var _b = _a, {
2476
+ value: controlledValue,
2477
+ defaultValue = 0,
2478
+ onValueChange,
2479
+ onValueCommitted,
2480
+ min = 0,
2481
+ max = 100,
2482
+ step = 1,
2483
+ disabled = false,
2484
+ leadingLabel,
2485
+ trailingLabel,
2486
+ leadingIcon,
2487
+ trailingIcon,
2488
+ description
2489
+ } = _b, rest = __objRest(_b, [
2490
+ "value",
2491
+ "defaultValue",
2492
+ "onValueChange",
2493
+ "onValueCommitted",
2494
+ "min",
2495
+ "max",
2496
+ "step",
2497
+ "disabled",
2498
+ "leadingLabel",
2499
+ "trailingLabel",
2500
+ "leadingIcon",
2501
+ "trailingIcon",
2502
+ "description"
2503
+ ]);
2504
+ const theme2 = react.useTheme();
2505
+ const { slider, buttons } = theme2.tokens.components;
2506
+ const { dimensions } = theme2.tokens.semantics;
2507
+ const isControlled = controlledValue !== void 0;
2508
+ const [internalValue, setInternalValue] = React26__default.default.useState(defaultValue);
2509
+ const currentValue = isControlled ? controlledValue : internalValue;
2510
+ const trackWidth = React26.useRef(0);
2511
+ const thumbSize = parseTokenValue22(buttons.size.md.height);
2512
+ const trackHeight = parseTokenValue22(slider.sizing.track.height);
2513
+ const fraction = max > min ? (currentValue - min) / (max - min) : 0;
2514
+ const handleLayout = (e) => {
2515
+ trackWidth.current = e.nativeEvent.layout.width;
2516
+ };
2517
+ const updateValue = React26.useCallback(
2518
+ (locationX) => {
2519
+ if (disabled || trackWidth.current === 0) return;
2520
+ const ratio = clamp(locationX / trackWidth.current, 0, 1);
2521
+ const raw = min + ratio * (max - min);
2522
+ const snapped = snap(clamp(raw, min, max), step, min);
2523
+ if (!isControlled) {
2524
+ setInternalValue(snapped);
2525
+ }
2526
+ onValueChange == null ? void 0 : onValueChange(snapped);
2527
+ },
2528
+ [disabled, min, max, step, isControlled, onValueChange]
2529
+ );
2530
+ const panResponder = React26.useRef(
2531
+ reactNative.PanResponder.create({
2532
+ onStartShouldSetPanResponder: () => !disabled,
2533
+ onMoveShouldSetPanResponder: () => !disabled,
2534
+ onPanResponderGrant: (e) => {
2535
+ updateValue(e.nativeEvent.locationX);
2536
+ },
2537
+ onPanResponderMove: (e) => {
2538
+ updateValue(e.nativeEvent.locationX);
2539
+ },
2540
+ onPanResponderRelease: () => {
2541
+ onValueCommitted == null ? void 0 : onValueCommitted(currentValue);
2542
+ }
2543
+ })
2544
+ ).current;
2545
+ const hasLeading = leadingIcon !== void 0 || leadingLabel !== void 0;
2546
+ const hasTrailing = trailingIcon !== void 0 || trailingLabel !== void 0;
2547
+ const labelGap = parseTokenValue22(slider.sliderField.spacing.label.gap);
2548
+ const roundBorderRadius = parseTokenValue22(dimensions.borderRadius.round);
2549
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2550
+ StyledSliderRoot,
2551
+ __spreadProps(__spreadValues({
2552
+ ref,
2553
+ value: currentValue,
2554
+ min,
2555
+ max,
2556
+ disabled,
2557
+ sliderGap: parseTokenValue22(slider.sliderField.spacing.gap),
2558
+ sliderMinWidth: parseTokenValue22(slider.sizing.minWidth),
2559
+ sliderOpacity: disabled ? parseFloat(buttons.opacity.disabled) : 1
2560
+ }, rest), {
2561
+ children: [
2562
+ /* @__PURE__ */ jsxRuntime.jsxs(StyledLabelRow2, { labelRowGap: labelGap, children: [
2563
+ hasLeading && /* @__PURE__ */ jsxRuntime.jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
2564
+ leadingIcon,
2565
+ leadingLabel && /* @__PURE__ */ jsxRuntime.jsx(
2566
+ Typography,
2567
+ {
2568
+ token: slider.sliderField.typography.label,
2569
+ color: slider.sliderField.colour.text.label,
2570
+ children: leadingLabel
2571
+ }
2572
+ )
2573
+ ] }),
2574
+ /* @__PURE__ */ jsxRuntime.jsxs(
2575
+ StyledTrackArea,
2576
+ __spreadProps(__spreadValues({
2577
+ trackAreaHeight: thumbSize,
2578
+ onLayout: handleLayout
2579
+ }, panResponder.panHandlers), {
2580
+ children: [
2581
+ /* @__PURE__ */ jsxRuntime.jsx(
2582
+ StyledTrack,
2583
+ {
2584
+ trackHeight,
2585
+ trackBorderRadius: roundBorderRadius,
2586
+ trackBgColor: slider.colour.track.background.default,
2587
+ trackBorderWidth: parseTokenValue22(dimensions.borderWidth.sm),
2588
+ trackBorderColor: slider.colour.track.border.default,
2589
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2590
+ StyledRange,
2591
+ {
2592
+ rangeBgColor: slider.colour.indicator.background.default,
2593
+ rangeBorderRadius: roundBorderRadius,
2594
+ style: { width: `${fraction * 100}%` }
2595
+ }
2596
+ )
2597
+ }
2598
+ ),
2599
+ /* @__PURE__ */ jsxRuntime.jsx(
2600
+ StyledThumb2,
2601
+ {
2602
+ thumbSize,
2603
+ style: {
2604
+ left: `${fraction * 100}%`,
2605
+ marginLeft: -thumbSize / 2
2606
+ },
2607
+ thumbBorderRadius: parseTokenValue22(buttons.borderRadius.default),
2608
+ thumbBgColor: buttons.iconButton.filledButton.colour.background.primary.default,
2609
+ children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { size: "xs", color: "alt", children: "\u27E8\u27E9" })
2610
+ }
2611
+ )
2612
+ ]
2613
+ })
2614
+ ),
2615
+ hasTrailing && /* @__PURE__ */ jsxRuntime.jsxs(StyledLabelSlot, { labelSlotGap: labelGap, children: [
2616
+ trailingLabel && /* @__PURE__ */ jsxRuntime.jsx(
2617
+ Typography,
2618
+ {
2619
+ token: slider.sliderField.typography.label,
2620
+ color: slider.sliderField.colour.text.label,
2621
+ children: trailingLabel
2622
+ }
2623
+ ),
2624
+ trailingIcon
2625
+ ] })
2626
+ ] }),
2627
+ description && /* @__PURE__ */ jsxRuntime.jsx(
2628
+ Typography,
2629
+ {
2630
+ token: slider.sliderField.typography.description,
2631
+ color: slider.sliderField.colour.text.description,
2632
+ children: description
2633
+ }
2634
+ )
2635
+ ]
2636
+ })
2637
+ );
2638
+ }
2639
+ );
2640
+ Slider.displayName = "Slider";
2641
+
2642
+ Object.defineProperty(exports, "tokens", {
2643
+ enumerable: true,
2644
+ get: function () { return pawprintTokens.tokens; }
2645
+ });
2646
+ Object.defineProperty(exports, "styled", {
2647
+ enumerable: true,
2648
+ get: function () { return styled25__default.default; }
2649
+ });
2650
+ exports.Avatar = Avatar;
2651
+ exports.BRAND_FONTS = BRAND_FONTS;
2652
+ exports.Badge = Badge;
2653
+ exports.Button = Button;
2654
+ exports.ButtonDock = ButtonDock;
2655
+ exports.ButtonGroup = ButtonGroup;
2656
+ exports.Checkbox = Checkbox;
2657
+ exports.CheckboxGroup = CheckboxGroup;
2658
+ exports.Hint = Hint;
2659
+ exports.Icon = Icon;
2660
+ exports.IconButton = IconButton;
2661
+ exports.Illustration = Illustration;
2662
+ exports.Input = Input;
2663
+ exports.InputDescription = InputDescription;
2664
+ exports.InputError = InputError;
2665
+ exports.InputField = InputField;
2666
+ exports.InputLabel = InputLabel;
2667
+ exports.Link = Link;
2668
+ exports.Logo = Logo;
2669
+ exports.PawprintProvider = PawprintProvider;
2670
+ exports.Radio = Radio;
2671
+ exports.RadioGroup = RadioGroup;
2672
+ exports.SegmentedControl = SegmentedControl;
2673
+ exports.Slider = Slider;
2674
+ exports.Spinner = Spinner;
2675
+ exports.Switch = Switch;
2676
+ exports.Tag = Tag;
2677
+ exports.ThemeProvider = ThemeProvider;
2678
+ exports.Typography = Typography;
2679
+ exports.createPawprintTheme = createPawprintTheme;
2680
+ exports.registerLogo = registerLogo;
2681
+ exports.resolveFont = resolveFont;
2682
+ exports.resolveLogo = resolveLogo;
2683
+ exports.theme = theme;
2684
+ exports.usePawprint = usePawprint;
2685
+ //# sourceMappingURL=index.cjs.map
2686
+ //# sourceMappingURL=index.cjs.map