@butternutbox/pawprint-native 0.13.1 → 0.15.0
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.
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +17 -0
- package/dist/index.cjs +196 -72
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +97 -3
- package/dist/index.d.ts +97 -3
- package/dist/index.js +195 -73
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Illustration/Illustration.tsx +2 -2
- package/src/components/molecules/Menu/Menu.stories.tsx +132 -0
- package/src/components/molecules/Menu/Menu.test.tsx +60 -0
- package/src/components/molecules/Menu/Menu.tsx +143 -0
- package/src/components/molecules/Menu/MenuItem.tsx +103 -0
- package/src/components/molecules/Menu/index.ts +4 -0
- package/src/components/molecules/index.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -10148,6 +10148,128 @@ var Tooltip = React66.forwardRef(
|
|
|
10148
10148
|
);
|
|
10149
10149
|
Tooltip.displayName = "Tooltip";
|
|
10150
10150
|
var parseTokenValue53 = (value) => parseFloat(value);
|
|
10151
|
+
var Row = styled51(Pressable)(({ theme: theme2, divider }) => {
|
|
10152
|
+
const { spacing } = theme2.tokens.semantics.dimensions;
|
|
10153
|
+
const { colour } = theme2.tokens.semantics;
|
|
10154
|
+
return {
|
|
10155
|
+
width: "100%",
|
|
10156
|
+
alignItems: "center",
|
|
10157
|
+
justifyContent: "center",
|
|
10158
|
+
paddingVertical: parseTokenValue53(spacing.md),
|
|
10159
|
+
paddingHorizontal: parseTokenValue53(spacing.md),
|
|
10160
|
+
borderBottomWidth: divider ? 1 : 0,
|
|
10161
|
+
borderBottomColor: colour.border.divider
|
|
10162
|
+
};
|
|
10163
|
+
});
|
|
10164
|
+
var MenuItem = React66.forwardRef((_a, ref) => {
|
|
10165
|
+
var _b = _a, { variant = "action", onPress, children, divider = true } = _b, rest = __objRest(_b, ["variant", "onPress", "children", "divider"]);
|
|
10166
|
+
const theme2 = useTheme();
|
|
10167
|
+
const { colour, typography } = theme2.tokens.semantics;
|
|
10168
|
+
const labelColour = variant === "destructive" ? colour.text.error : colour.text.action.default;
|
|
10169
|
+
const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
|
|
10170
|
+
return /* @__PURE__ */ jsx(
|
|
10171
|
+
Row,
|
|
10172
|
+
__spreadProps(__spreadValues({
|
|
10173
|
+
ref,
|
|
10174
|
+
divider,
|
|
10175
|
+
onPress,
|
|
10176
|
+
accessible: true,
|
|
10177
|
+
accessibilityRole: "menuitem",
|
|
10178
|
+
accessibilityLabel: label
|
|
10179
|
+
}, rest), {
|
|
10180
|
+
children: label !== void 0 ? /* @__PURE__ */ jsx(
|
|
10181
|
+
Typography,
|
|
10182
|
+
{
|
|
10183
|
+
token: typography.body.medium.md,
|
|
10184
|
+
align: "center",
|
|
10185
|
+
color: labelColour,
|
|
10186
|
+
children: label
|
|
10187
|
+
}
|
|
10188
|
+
) : children
|
|
10189
|
+
})
|
|
10190
|
+
);
|
|
10191
|
+
});
|
|
10192
|
+
MenuItem.displayName = "Menu.Item";
|
|
10193
|
+
var parseTokenValue54 = (value) => parseFloat(value);
|
|
10194
|
+
var DismissLayer = styled51(Pressable)({
|
|
10195
|
+
position: "absolute",
|
|
10196
|
+
top: 0,
|
|
10197
|
+
left: 0,
|
|
10198
|
+
right: 0,
|
|
10199
|
+
bottom: 0
|
|
10200
|
+
});
|
|
10201
|
+
var Anchor = styled51(View)(({ theme: theme2, align }) => {
|
|
10202
|
+
const inset = parseTokenValue54(theme2.tokens.semantics.dimensions.spacing.md);
|
|
10203
|
+
return __spreadValues({
|
|
10204
|
+
position: "absolute"
|
|
10205
|
+
}, align === "right" ? { right: inset } : { left: inset });
|
|
10206
|
+
});
|
|
10207
|
+
var Card = styled51(Pressable)(({ theme: theme2, width }) => {
|
|
10208
|
+
const { borderRadius } = theme2.tokens.semantics.dimensions;
|
|
10209
|
+
const { shadow, background } = theme2.tokens.semantics.colour;
|
|
10210
|
+
return {
|
|
10211
|
+
width,
|
|
10212
|
+
maxWidth: "90%",
|
|
10213
|
+
borderRadius: parseTokenValue54(borderRadius.md),
|
|
10214
|
+
overflow: "hidden",
|
|
10215
|
+
backgroundColor: background.surface.default,
|
|
10216
|
+
// Shadow token colour carries its own alpha, so opacity stays at 1.
|
|
10217
|
+
shadowColor: shadow.md.color,
|
|
10218
|
+
shadowOffset: {
|
|
10219
|
+
width: parseTokenValue54(shadow.md.offsetX),
|
|
10220
|
+
height: parseTokenValue54(shadow.md.offsetY)
|
|
10221
|
+
},
|
|
10222
|
+
shadowOpacity: 1,
|
|
10223
|
+
shadowRadius: parseTokenValue54(shadow.md.blur),
|
|
10224
|
+
elevation: 8
|
|
10225
|
+
};
|
|
10226
|
+
});
|
|
10227
|
+
var MenuRoot = ({
|
|
10228
|
+
open,
|
|
10229
|
+
onClose,
|
|
10230
|
+
anchorOffset = 0,
|
|
10231
|
+
align = "right",
|
|
10232
|
+
width = 360,
|
|
10233
|
+
closeAccessibilityLabel = "Close menu",
|
|
10234
|
+
children
|
|
10235
|
+
}) => {
|
|
10236
|
+
return /* @__PURE__ */ jsxs(
|
|
10237
|
+
Modal,
|
|
10238
|
+
{
|
|
10239
|
+
visible: open,
|
|
10240
|
+
transparent: true,
|
|
10241
|
+
statusBarTranslucent: true,
|
|
10242
|
+
animationType: "fade",
|
|
10243
|
+
onRequestClose: onClose,
|
|
10244
|
+
children: [
|
|
10245
|
+
/* @__PURE__ */ jsx(
|
|
10246
|
+
DismissLayer,
|
|
10247
|
+
{
|
|
10248
|
+
onPress: onClose,
|
|
10249
|
+
accessible: false,
|
|
10250
|
+
accessibilityLabel: closeAccessibilityLabel
|
|
10251
|
+
}
|
|
10252
|
+
),
|
|
10253
|
+
/* @__PURE__ */ jsx(Anchor, { align, style: { top: anchorOffset }, children: /* @__PURE__ */ jsx(
|
|
10254
|
+
Card,
|
|
10255
|
+
{
|
|
10256
|
+
width,
|
|
10257
|
+
onPress: () => {
|
|
10258
|
+
},
|
|
10259
|
+
accessible: false,
|
|
10260
|
+
accessibilityRole: "menu",
|
|
10261
|
+
children
|
|
10262
|
+
}
|
|
10263
|
+
) })
|
|
10264
|
+
]
|
|
10265
|
+
}
|
|
10266
|
+
);
|
|
10267
|
+
};
|
|
10268
|
+
MenuRoot.displayName = "Menu";
|
|
10269
|
+
var Menu2 = Object.assign(MenuRoot, {
|
|
10270
|
+
Item: MenuItem
|
|
10271
|
+
});
|
|
10272
|
+
var parseTokenValue55 = (value) => parseFloat(value);
|
|
10151
10273
|
var StyledInsightRoot = styled51(View)(
|
|
10152
10274
|
({
|
|
10153
10275
|
rootGap,
|
|
@@ -10192,26 +10314,26 @@ var MessageCardInsight = React66.forwardRef(
|
|
|
10192
10314
|
const isSupporting = variant === "supporting";
|
|
10193
10315
|
const supporting = insightCard.spacing.supporting;
|
|
10194
10316
|
const standalone = insightCard.spacing.standalone;
|
|
10195
|
-
const radiusStandalone =
|
|
10317
|
+
const radiusStandalone = parseTokenValue55(
|
|
10196
10318
|
insightCard.borderRadius.standalone.default
|
|
10197
10319
|
);
|
|
10198
|
-
const radiusSupporting =
|
|
10320
|
+
const radiusSupporting = parseTokenValue55(
|
|
10199
10321
|
insightCard.borderRadius.supporting.bottom
|
|
10200
10322
|
);
|
|
10201
10323
|
return /* @__PURE__ */ jsxs(
|
|
10202
10324
|
StyledInsightRoot,
|
|
10203
10325
|
__spreadProps(__spreadValues({
|
|
10204
10326
|
ref,
|
|
10205
|
-
rootGap:
|
|
10327
|
+
rootGap: parseTokenValue55(
|
|
10206
10328
|
isSupporting ? supporting.gap : standalone.gap
|
|
10207
10329
|
),
|
|
10208
|
-
rootPaddingH:
|
|
10330
|
+
rootPaddingH: parseTokenValue55(
|
|
10209
10331
|
isSupporting ? semanticSpacing.md : standalone.horizontalPadding
|
|
10210
10332
|
),
|
|
10211
|
-
rootPaddingTop:
|
|
10333
|
+
rootPaddingTop: parseTokenValue55(
|
|
10212
10334
|
isSupporting ? supporting.topPadding : standalone.verticalPadding
|
|
10213
10335
|
),
|
|
10214
|
-
rootPaddingBottom:
|
|
10336
|
+
rootPaddingBottom: parseTokenValue55(
|
|
10215
10337
|
isSupporting ? supporting.bottomPadding : standalone.verticalPadding
|
|
10216
10338
|
),
|
|
10217
10339
|
rootBorderTopLeftRadius: isSupporting ? 0 : radiusStandalone,
|
|
@@ -10219,7 +10341,7 @@ var MessageCardInsight = React66.forwardRef(
|
|
|
10219
10341
|
rootBorderBottomLeftRadius: isSupporting ? radiusSupporting : radiusStandalone,
|
|
10220
10342
|
rootBorderBottomRightRadius: isSupporting ? radiusSupporting : radiusStandalone,
|
|
10221
10343
|
rootBgColor: insightCard.colour.background.default,
|
|
10222
|
-
rootMinWidth:
|
|
10344
|
+
rootMinWidth: parseTokenValue55(insightCard.size.minWidth),
|
|
10223
10345
|
accessible: true,
|
|
10224
10346
|
accessibilityRole: "summary"
|
|
10225
10347
|
}, rest), {
|
|
@@ -10228,7 +10350,7 @@ var MessageCardInsight = React66.forwardRef(
|
|
|
10228
10350
|
/* @__PURE__ */ jsxs(
|
|
10229
10351
|
StyledInsightContent,
|
|
10230
10352
|
{
|
|
10231
|
-
contentGap:
|
|
10353
|
+
contentGap: parseTokenValue55(standalone.content.gap),
|
|
10232
10354
|
children: [
|
|
10233
10355
|
title && /* @__PURE__ */ jsx(
|
|
10234
10356
|
Typography,
|
|
@@ -10320,9 +10442,9 @@ var MessageCardBanner = React66.forwardRef(
|
|
|
10320
10442
|
StyledBannerRoot,
|
|
10321
10443
|
__spreadProps(__spreadValues({
|
|
10322
10444
|
ref,
|
|
10323
|
-
rootGap:
|
|
10324
|
-
rootPadding:
|
|
10325
|
-
rootBorderRadius:
|
|
10445
|
+
rootGap: parseTokenValue55(dimensions3.spacing.md),
|
|
10446
|
+
rootPadding: parseTokenValue55(dimensions3.spacing.md),
|
|
10447
|
+
rootBorderRadius: parseTokenValue55(dimensions3.borderRadius.md),
|
|
10326
10448
|
rootBgColor: bgColor,
|
|
10327
10449
|
accessible: true,
|
|
10328
10450
|
accessibilityRole: "summary"
|
|
@@ -10334,7 +10456,7 @@ var MessageCardBanner = React66.forwardRef(
|
|
|
10334
10456
|
}) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
|
|
10335
10457
|
StyledBannerImage,
|
|
10336
10458
|
{
|
|
10337
|
-
imageRadius:
|
|
10459
|
+
imageRadius: parseTokenValue55(dimensions3.borderRadius.sm),
|
|
10338
10460
|
imageBgColor: colour.background.surface.secondary,
|
|
10339
10461
|
children: /* @__PURE__ */ jsx(
|
|
10340
10462
|
Image,
|
|
@@ -10350,12 +10472,12 @@ var MessageCardBanner = React66.forwardRef(
|
|
|
10350
10472
|
/* @__PURE__ */ jsxs(
|
|
10351
10473
|
StyledBannerContents,
|
|
10352
10474
|
{
|
|
10353
|
-
contentsGap:
|
|
10475
|
+
contentsGap: parseTokenValue55(dimensions3.spacing.xs),
|
|
10354
10476
|
children: [
|
|
10355
10477
|
/* @__PURE__ */ jsxs(
|
|
10356
10478
|
StyledBannerCopy,
|
|
10357
10479
|
{
|
|
10358
|
-
copyGap:
|
|
10480
|
+
copyGap: parseTokenValue55(dimensions3.spacing["3xs"]),
|
|
10359
10481
|
children: [
|
|
10360
10482
|
title && /* @__PURE__ */ jsx(Typography, { variant: "heading", size: "xs", color: "primary", children: title }),
|
|
10361
10483
|
/* @__PURE__ */ jsx(Typography, { variant: "body", size: "md", color: "secondary", children })
|
|
@@ -10386,7 +10508,7 @@ var MessageCard = {
|
|
|
10386
10508
|
Insight: MessageCardInsight,
|
|
10387
10509
|
Banner: MessageCardBanner
|
|
10388
10510
|
};
|
|
10389
|
-
var
|
|
10511
|
+
var parseTokenValue56 = (value) => parseFloat(value);
|
|
10390
10512
|
var slideEaseOut = Easing$1.out(Easing$1.quad);
|
|
10391
10513
|
var MONTH_SLIDE_ENTERING = {
|
|
10392
10514
|
forward: FadeInRight.duration(250).easing(slideEaseOut),
|
|
@@ -10547,17 +10669,17 @@ var DatePicker = React66.forwardRef(
|
|
|
10547
10669
|
} = useMemo(
|
|
10548
10670
|
() => ({
|
|
10549
10671
|
// Gap between the week-day header and the month header.
|
|
10550
|
-
weekGap:
|
|
10672
|
+
weekGap: parseTokenValue56(datePicker.spacing.gap),
|
|
10551
10673
|
// Gap between the month header and the dates grid.
|
|
10552
|
-
datesGap:
|
|
10553
|
-
containerMaxWidth:
|
|
10554
|
-
headerGap:
|
|
10555
|
-
cellHeight:
|
|
10556
|
-
indicatorSize:
|
|
10557
|
-
indicatorBorderRadius:
|
|
10558
|
-
selectedBorderWidth:
|
|
10559
|
-
disabledOpacity:
|
|
10560
|
-
rowGap:
|
|
10674
|
+
datesGap: parseTokenValue56(theme2.tokens.semantics.dimensions.spacing.md),
|
|
10675
|
+
containerMaxWidth: parseTokenValue56(dt.size.width) * 7,
|
|
10676
|
+
headerGap: parseTokenValue56(datePicker.month.spacing.gap),
|
|
10677
|
+
cellHeight: parseTokenValue56(dt.size.height),
|
|
10678
|
+
indicatorSize: parseTokenValue56(dt.size.indicator),
|
|
10679
|
+
indicatorBorderRadius: parseTokenValue56(dt.borderRadius.indicator),
|
|
10680
|
+
selectedBorderWidth: parseTokenValue56(dt.borderWidth.indicator.selected),
|
|
10681
|
+
disabledOpacity: parseTokenValue56(dt.opacity.disabled),
|
|
10682
|
+
rowGap: parseTokenValue56(datePicker.dates.spacing.gap)
|
|
10561
10683
|
}),
|
|
10562
10684
|
[datePicker, dt, theme2]
|
|
10563
10685
|
);
|
|
@@ -10835,7 +10957,7 @@ var buildPointerPath = (r) => {
|
|
|
10835
10957
|
"Z"
|
|
10836
10958
|
].join(" ");
|
|
10837
10959
|
};
|
|
10838
|
-
var
|
|
10960
|
+
var parseTokenValue57 = (value) => parseFloat(value);
|
|
10839
10961
|
var StyledRoot16 = styled51(View)(({ rootGap }) => ({
|
|
10840
10962
|
flexDirection: "column",
|
|
10841
10963
|
gap: rootGap,
|
|
@@ -10925,21 +11047,21 @@ var PictureSelector = React66.forwardRef(
|
|
|
10925
11047
|
if (!isControlled) setInternalValue(nextValue);
|
|
10926
11048
|
onValueChange == null ? void 0 : onValueChange(nextValue);
|
|
10927
11049
|
};
|
|
10928
|
-
const rootGap =
|
|
10929
|
-
const rowGap =
|
|
10930
|
-
const stackGap =
|
|
10931
|
-
const buttonPadding =
|
|
10932
|
-
const buttonBorderRadius =
|
|
11050
|
+
const rootGap = parseTokenValue57(pictureSelector.spacing.container.gap);
|
|
11051
|
+
const rowGap = parseTokenValue57(pictureSelector.spacing.buttons.gap);
|
|
11052
|
+
const stackGap = parseTokenValue57(pictureButton.spacing.container.gap);
|
|
11053
|
+
const buttonPadding = parseTokenValue57(pictureButton.spacing.padding);
|
|
11054
|
+
const buttonBorderRadius = parseTokenValue57(
|
|
10933
11055
|
pictureButton.borderRadius.default
|
|
10934
11056
|
);
|
|
10935
|
-
const borderWidthDefault =
|
|
11057
|
+
const borderWidthDefault = parseTokenValue57(
|
|
10936
11058
|
pictureButton.borderWidth.default
|
|
10937
11059
|
);
|
|
10938
|
-
const borderWidthActive =
|
|
11060
|
+
const borderWidthActive = parseTokenValue57(pictureButton.borderWidth.active);
|
|
10939
11061
|
const pointerPath = buildPointerPath(
|
|
10940
|
-
|
|
11062
|
+
parseTokenValue57(pictureButton.pointer.borderRadius.default)
|
|
10941
11063
|
);
|
|
10942
|
-
const resolvedMinWidth = itemMinWidth != null ? itemMinWidth :
|
|
11064
|
+
const resolvedMinWidth = itemMinWidth != null ? itemMinWidth : parseTokenValue57(pictureButton.size.minWidth);
|
|
10943
11065
|
const resolvedMinHeight = itemMinHeight != null ? itemMinHeight : resolvedMinWidth;
|
|
10944
11066
|
return /* @__PURE__ */ jsxs(
|
|
10945
11067
|
StyledRoot16,
|
|
@@ -11032,7 +11154,7 @@ var DEFAULT_UNIT_LABELS = {
|
|
|
11032
11154
|
seconds: { singular: "sec", plural: "secs" }
|
|
11033
11155
|
};
|
|
11034
11156
|
var resolveLabel = (label, value) => typeof label === "string" ? label : value === 1 ? label.singular : label.plural;
|
|
11035
|
-
var
|
|
11157
|
+
var parseTokenValue58 = (value) => parseFloat(value);
|
|
11036
11158
|
var pad = (value) => String(Math.max(0, Math.floor(value))).padStart(2, "0");
|
|
11037
11159
|
var StackedRoot = styled51(View)(({ rootGap }) => ({
|
|
11038
11160
|
flexDirection: "row",
|
|
@@ -11162,28 +11284,28 @@ var Countdown = React66.forwardRef(
|
|
|
11162
11284
|
InlineRoot,
|
|
11163
11285
|
__spreadProps(__spreadValues({
|
|
11164
11286
|
ref,
|
|
11165
|
-
rootGap:
|
|
11166
|
-
rootVerticalPadding:
|
|
11287
|
+
rootGap: parseTokenValue58(countdown.spacing.gap),
|
|
11288
|
+
rootVerticalPadding: parseTokenValue58(
|
|
11167
11289
|
countdown.spacing.verticalPadding
|
|
11168
11290
|
),
|
|
11169
|
-
rootHorizontalPadding:
|
|
11291
|
+
rootHorizontalPadding: parseTokenValue58(
|
|
11170
11292
|
countdown.spacing.horizontalPadding
|
|
11171
11293
|
),
|
|
11172
11294
|
rootBgColor: countdown.colour.background.default,
|
|
11173
|
-
rootBorderRadius:
|
|
11295
|
+
rootBorderRadius: parseTokenValue58(countdown.borderRadius.default)
|
|
11174
11296
|
}, rest), {
|
|
11175
11297
|
children: [
|
|
11176
11298
|
label != null && /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", size: "md", color: "primary", children: label }),
|
|
11177
11299
|
/* @__PURE__ */ jsx(
|
|
11178
11300
|
InlineGroup,
|
|
11179
11301
|
{
|
|
11180
|
-
groupGap:
|
|
11302
|
+
groupGap: parseTokenValue58(countdown.countdownGroup.spacing.gap),
|
|
11181
11303
|
children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
|
|
11182
11304
|
index > 0 && colon(`colon-${unit.key}`),
|
|
11183
11305
|
/* @__PURE__ */ jsxs(
|
|
11184
11306
|
InlineCount,
|
|
11185
11307
|
{
|
|
11186
|
-
countGap:
|
|
11308
|
+
countGap: parseTokenValue58(countdown.count.spacing.gap),
|
|
11187
11309
|
children: [
|
|
11188
11310
|
/* @__PURE__ */ jsx(
|
|
11189
11311
|
Typography,
|
|
@@ -11219,33 +11341,33 @@ var Countdown = React66.forwardRef(
|
|
|
11219
11341
|
StackedRoot,
|
|
11220
11342
|
__spreadProps(__spreadValues({
|
|
11221
11343
|
ref,
|
|
11222
|
-
rootGap:
|
|
11344
|
+
rootGap: parseTokenValue58(countdown.spacing.gap)
|
|
11223
11345
|
}, rest), {
|
|
11224
11346
|
children: units.map((unit, index) => /* @__PURE__ */ jsxs(React66.Fragment, { children: [
|
|
11225
11347
|
index > 0 && colon(`colon-${unit.key}`),
|
|
11226
11348
|
/* @__PURE__ */ jsxs(
|
|
11227
11349
|
StackedItem,
|
|
11228
11350
|
{
|
|
11229
|
-
itemGap:
|
|
11230
|
-
itemVerticalPadding:
|
|
11351
|
+
itemGap: parseTokenValue58(countdownItem.spacing.gap),
|
|
11352
|
+
itemVerticalPadding: parseTokenValue58(
|
|
11231
11353
|
countdownItem.spacing.verticalPadding
|
|
11232
11354
|
),
|
|
11233
|
-
itemHorizontalPadding:
|
|
11355
|
+
itemHorizontalPadding: parseTokenValue58(
|
|
11234
11356
|
countdownItem.spacing.horizontalPadding
|
|
11235
11357
|
),
|
|
11236
11358
|
itemBgColor: countdownItem.colour.background.default,
|
|
11237
|
-
itemBorderRadius:
|
|
11359
|
+
itemBorderRadius: parseTokenValue58(
|
|
11238
11360
|
countdownItem.borderRadius.default
|
|
11239
11361
|
),
|
|
11240
11362
|
children: [
|
|
11241
11363
|
/* @__PURE__ */ jsx(
|
|
11242
11364
|
StackedCountBox,
|
|
11243
11365
|
{
|
|
11244
|
-
countPaddingTop:
|
|
11366
|
+
countPaddingTop: parseTokenValue58(
|
|
11245
11367
|
countdownItem.count.spacing.paddingTop
|
|
11246
11368
|
),
|
|
11247
11369
|
countBgColor: countdownItem.count.colour.background.default,
|
|
11248
|
-
countBorderRadius:
|
|
11370
|
+
countBorderRadius: parseTokenValue58(
|
|
11249
11371
|
countdownItem.count.borderRadius.default
|
|
11250
11372
|
),
|
|
11251
11373
|
children: /* @__PURE__ */ jsx(
|
|
@@ -11275,7 +11397,7 @@ var Countdown = React66.forwardRef(
|
|
|
11275
11397
|
}
|
|
11276
11398
|
);
|
|
11277
11399
|
Countdown.displayName = "Countdown";
|
|
11278
|
-
var
|
|
11400
|
+
var parseTokenValue59 = (value) => {
|
|
11279
11401
|
if (typeof value === "number") return value;
|
|
11280
11402
|
return parseFloat(value);
|
|
11281
11403
|
};
|
|
@@ -11286,14 +11408,14 @@ var BadgeContainer = styled51(View)(({ theme: theme2 }) => {
|
|
|
11286
11408
|
return {
|
|
11287
11409
|
display: "flex",
|
|
11288
11410
|
flexDirection: "row",
|
|
11289
|
-
gap:
|
|
11411
|
+
gap: parseTokenValue59(spacing["2xs"]),
|
|
11290
11412
|
alignItems: "center",
|
|
11291
11413
|
justifyContent: "center",
|
|
11292
|
-
height:
|
|
11293
|
-
paddingRight:
|
|
11414
|
+
height: parseTokenValue59(sizing["2xl"]),
|
|
11415
|
+
paddingRight: parseTokenValue59(spacing.xs),
|
|
11294
11416
|
backgroundColor: colour.background.container.brand,
|
|
11295
|
-
borderTopRightRadius:
|
|
11296
|
-
borderBottomRightRadius:
|
|
11417
|
+
borderTopRightRadius: parseTokenValue59(borderRadius.xs),
|
|
11418
|
+
borderBottomRightRadius: parseTokenValue59(borderRadius.xs)
|
|
11297
11419
|
};
|
|
11298
11420
|
});
|
|
11299
11421
|
var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
|
|
@@ -11303,9 +11425,9 @@ var BadgeIcon = styled51(View)(({ theme: theme2 }) => {
|
|
|
11303
11425
|
display: "flex",
|
|
11304
11426
|
alignItems: "center",
|
|
11305
11427
|
justifyContent: "center",
|
|
11306
|
-
width:
|
|
11307
|
-
height:
|
|
11308
|
-
marginLeft:
|
|
11428
|
+
width: parseTokenValue59(sizing.md),
|
|
11429
|
+
height: parseTokenValue59(sizing.md),
|
|
11430
|
+
marginLeft: parseTokenValue59(spacing.xs),
|
|
11309
11431
|
flexShrink: 0
|
|
11310
11432
|
};
|
|
11311
11433
|
});
|
|
@@ -11354,7 +11476,7 @@ var Grid = React66.forwardRef(
|
|
|
11354
11476
|
}
|
|
11355
11477
|
);
|
|
11356
11478
|
Grid.displayName = "ProductListingCard.Grid";
|
|
11357
|
-
var
|
|
11479
|
+
var parseTokenValue60 = (value) => {
|
|
11358
11480
|
if (typeof value === "number") return value;
|
|
11359
11481
|
return parseFloat(value);
|
|
11360
11482
|
};
|
|
@@ -11363,7 +11485,7 @@ var StyledRoot17 = styled51(Pressable)(({ theme: theme2 }) => {
|
|
|
11363
11485
|
return {
|
|
11364
11486
|
display: "flex",
|
|
11365
11487
|
flexDirection: "column",
|
|
11366
|
-
gap:
|
|
11488
|
+
gap: parseTokenValue60(spacing.md),
|
|
11367
11489
|
alignItems: "flex-start",
|
|
11368
11490
|
width: "100%"
|
|
11369
11491
|
};
|
|
@@ -11373,7 +11495,7 @@ var ImageContainer = styled51(View)(({ theme: theme2 }) => ({
|
|
|
11373
11495
|
width: "100%",
|
|
11374
11496
|
aspectRatio: 1,
|
|
11375
11497
|
overflow: "hidden",
|
|
11376
|
-
borderRadius:
|
|
11498
|
+
borderRadius: parseTokenValue60(
|
|
11377
11499
|
theme2.tokens.semantics.dimensions.borderRadius.md
|
|
11378
11500
|
)
|
|
11379
11501
|
}));
|
|
@@ -11384,7 +11506,7 @@ var StyledImage2 = styled51(Image)({
|
|
|
11384
11506
|
});
|
|
11385
11507
|
var BadgeContainer2 = styled51(View)(({ theme: theme2 }) => ({
|
|
11386
11508
|
position: "absolute",
|
|
11387
|
-
top:
|
|
11509
|
+
top: parseTokenValue60(theme2.tokens.semantics.dimensions.spacing.md),
|
|
11388
11510
|
left: 0
|
|
11389
11511
|
}));
|
|
11390
11512
|
var ContentContainer = styled51(View)(({ theme: theme2 }) => {
|
|
@@ -11392,7 +11514,7 @@ var ContentContainer = styled51(View)(({ theme: theme2 }) => {
|
|
|
11392
11514
|
return {
|
|
11393
11515
|
display: "flex",
|
|
11394
11516
|
flexDirection: "column",
|
|
11395
|
-
gap:
|
|
11517
|
+
gap: parseTokenValue60(spacing.md),
|
|
11396
11518
|
alignItems: "flex-start",
|
|
11397
11519
|
width: "100%"
|
|
11398
11520
|
};
|
|
@@ -11406,7 +11528,7 @@ var DetailsContainer = styled51(View)({
|
|
|
11406
11528
|
var CategoryWrapper = styled51(View)(({ theme: theme2 }) => {
|
|
11407
11529
|
const spacing = theme2.tokens.semantics.dimensions.spacing;
|
|
11408
11530
|
return {
|
|
11409
|
-
marginBottom:
|
|
11531
|
+
marginBottom: parseTokenValue60(spacing["3xs"])
|
|
11410
11532
|
};
|
|
11411
11533
|
});
|
|
11412
11534
|
var TitleContainer = styled51(View)({
|
|
@@ -11754,7 +11876,7 @@ var useTabNavigationContext = () => {
|
|
|
11754
11876
|
}
|
|
11755
11877
|
return context;
|
|
11756
11878
|
};
|
|
11757
|
-
var
|
|
11879
|
+
var parseTokenValue61 = (value) => parseFloat(value);
|
|
11758
11880
|
var StyledFixedList = styled51(View)({
|
|
11759
11881
|
flexDirection: "row",
|
|
11760
11882
|
alignItems: "stretch",
|
|
@@ -11820,13 +11942,13 @@ var TabNavigationTab = React66.forwardRef(
|
|
|
11820
11942
|
StyledTab,
|
|
11821
11943
|
__spreadProps(__spreadValues({
|
|
11822
11944
|
ref,
|
|
11823
|
-
tabHeight:
|
|
11824
|
-
tabMinWidth:
|
|
11825
|
-
tabPaddingTop:
|
|
11826
|
-
tabPaddingBottom:
|
|
11827
|
-
tabPaddingHorizontal:
|
|
11828
|
-
tabGap:
|
|
11829
|
-
tabBorderWidth:
|
|
11945
|
+
tabHeight: parseTokenValue61(tabitem.size.height),
|
|
11946
|
+
tabMinWidth: parseTokenValue61(tabitem.size.minWidth),
|
|
11947
|
+
tabPaddingTop: parseTokenValue61(spacing.topPadding),
|
|
11948
|
+
tabPaddingBottom: parseTokenValue61(spacing.bottomPadding),
|
|
11949
|
+
tabPaddingHorizontal: parseTokenValue61(spacing.horizontalPadding),
|
|
11950
|
+
tabGap: parseTokenValue61(spacing.gap),
|
|
11951
|
+
tabBorderWidth: parseTokenValue61(borderWidth.default),
|
|
11830
11952
|
tabBorderColor: borderColour,
|
|
11831
11953
|
tabFlex: layout === "fixed" ? 1 : void 0
|
|
11832
11954
|
}, rest), {
|
|
@@ -11908,6 +12030,6 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
|
|
|
11908
12030
|
Panel: TabNavigationPanel
|
|
11909
12031
|
});
|
|
11910
12032
|
|
|
11911
|
-
export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
12033
|
+
export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
11912
12034
|
//# sourceMappingURL=index.js.map
|
|
11913
12035
|
//# sourceMappingURL=index.js.map
|