@snacky/ui 0.5.9 → 0.6.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.
- package/README.md +1 -1
- package/dist/index.cjs +168 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +197 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +55 -1
- package/dist/index.d.ts +55 -1
- package/dist/index.js +166 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -96,7 +96,7 @@ Names are listed under **What's here** below. `outline` has 42, `solid` has 11.
|
|
|
96
96
|
|
|
97
97
|
## What's here
|
|
98
98
|
|
|
99
|
-
All
|
|
99
|
+
All 24 documented components, each matching its `code.tsx` sample's prop
|
|
100
100
|
shape from `components.json` (padding, colors, radius, states - all sourced
|
|
101
101
|
directly from the design tokens, not eyeballed):
|
|
102
102
|
|
package/dist/index.cjs
CHANGED
|
@@ -26,6 +26,7 @@ __export(index_exports, {
|
|
|
26
26
|
Avatar: () => Avatar,
|
|
27
27
|
BottomSheet: () => BottomSheet,
|
|
28
28
|
Button: () => Button,
|
|
29
|
+
Calendar: () => Calendar,
|
|
29
30
|
Callout: () => Callout,
|
|
30
31
|
ChatInput: () => ChatInput,
|
|
31
32
|
Checkbox: () => Checkbox,
|
|
@@ -52,6 +53,7 @@ __export(index_exports, {
|
|
|
52
53
|
SnackyIcons: () => SnackyIcons,
|
|
53
54
|
SoldOutBadge: () => SoldOutBadge,
|
|
54
55
|
SquareBanner: () => SquareBanner,
|
|
56
|
+
Stepper: () => Stepper,
|
|
55
57
|
TabRow: () => TabRow,
|
|
56
58
|
TextField: () => TextField,
|
|
57
59
|
Toggle: () => Toggle,
|
|
@@ -1026,14 +1028,139 @@ function Section({ title, onAction, children, className }) {
|
|
|
1026
1028
|
] });
|
|
1027
1029
|
}
|
|
1028
1030
|
|
|
1029
|
-
// src/components/
|
|
1031
|
+
// src/components/Stepper/Stepper.tsx
|
|
1030
1032
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1033
|
+
function Stepper({ steps, className }) {
|
|
1034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ol", { className: cx("snacky-stepper", className), children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1035
|
+
"li",
|
|
1036
|
+
{
|
|
1037
|
+
className: cx("snacky-stepper__step", i === steps.length - 1 && "snacky-stepper__step--last"),
|
|
1038
|
+
children: [
|
|
1039
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__dot", `snacky-stepper__dot--${step.state}`), children: step.state === "cancelled" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(close, { width: 12, height: 12 }) }),
|
|
1040
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "snacky-stepper__body", children: [
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("snacky-stepper__label", `snacky-stepper__label--${step.state}`), children: step.label }),
|
|
1042
|
+
step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "snacky-stepper__time", children: step.timestamp })
|
|
1043
|
+
] })
|
|
1044
|
+
]
|
|
1045
|
+
},
|
|
1046
|
+
`${step.label}-${i}`
|
|
1047
|
+
)) });
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
// src/components/Calendar/Calendar.tsx
|
|
1051
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1052
|
+
var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
1053
|
+
var MONTHS = [
|
|
1054
|
+
"January",
|
|
1055
|
+
"February",
|
|
1056
|
+
"March",
|
|
1057
|
+
"April",
|
|
1058
|
+
"May",
|
|
1059
|
+
"June",
|
|
1060
|
+
"July",
|
|
1061
|
+
"August",
|
|
1062
|
+
"September",
|
|
1063
|
+
"October",
|
|
1064
|
+
"November",
|
|
1065
|
+
"December"
|
|
1066
|
+
];
|
|
1067
|
+
var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1068
|
+
function buildGrid(month) {
|
|
1069
|
+
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
|
1070
|
+
const last = new Date(month.getFullYear(), month.getMonth() + 1, 0);
|
|
1071
|
+
const start = new Date(first);
|
|
1072
|
+
start.setDate(1 - first.getDay());
|
|
1073
|
+
const end = new Date(last);
|
|
1074
|
+
end.setDate(last.getDate() + (6 - last.getDay()));
|
|
1075
|
+
const days = [];
|
|
1076
|
+
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
|
1077
|
+
days.push(new Date(d));
|
|
1078
|
+
}
|
|
1079
|
+
return days;
|
|
1080
|
+
}
|
|
1081
|
+
function Calendar({
|
|
1082
|
+
month,
|
|
1083
|
+
onPrevMonth,
|
|
1084
|
+
onNextMonth,
|
|
1085
|
+
selected,
|
|
1086
|
+
onSelect,
|
|
1087
|
+
marked = [],
|
|
1088
|
+
actionLabel = "Select Date",
|
|
1089
|
+
onAction,
|
|
1090
|
+
className
|
|
1091
|
+
}) {
|
|
1092
|
+
const days = buildGrid(month);
|
|
1093
|
+
const range = Array.isArray(selected) ? selected : null;
|
|
1094
|
+
const single = selected instanceof Date ? selected : null;
|
|
1095
|
+
const [lo, hi] = range ? [range[0], range[1]].sort((a, b) => a.getTime() - b.getTime()) : [null, null];
|
|
1096
|
+
const isEnd = (d) => single && sameDay(d, single) || lo && hi && (sameDay(d, lo) || sameDay(d, hi));
|
|
1097
|
+
const isInRange = (d) => lo && hi && d > lo && d < hi;
|
|
1098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("snacky-calendar", className), children: [
|
|
1099
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__header", children: [
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1101
|
+
"button",
|
|
1102
|
+
{
|
|
1103
|
+
type: "button",
|
|
1104
|
+
className: "snacky-calendar__nav",
|
|
1105
|
+
onClick: onPrevMonth,
|
|
1106
|
+
"aria-label": "Previous month",
|
|
1107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
|
|
1108
|
+
}
|
|
1109
|
+
),
|
|
1110
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "snacky-calendar__label", children: [
|
|
1111
|
+
MONTHS[month.getMonth()],
|
|
1112
|
+
" ",
|
|
1113
|
+
month.getFullYear()
|
|
1114
|
+
] }),
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1116
|
+
"button",
|
|
1117
|
+
{
|
|
1118
|
+
type: "button",
|
|
1119
|
+
className: "snacky-calendar__nav snacky-calendar__nav--next",
|
|
1120
|
+
onClick: onNextMonth,
|
|
1121
|
+
"aria-label": "Next month",
|
|
1122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(back, { width: 24, height: 24 })
|
|
1123
|
+
}
|
|
1124
|
+
)
|
|
1125
|
+
] }),
|
|
1126
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "snacky-calendar__grid", children: [
|
|
1127
|
+
WEEKDAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__weekday", children: d }, d)),
|
|
1128
|
+
days.map((d, i) => {
|
|
1129
|
+
const outside = d.getMonth() !== month.getMonth();
|
|
1130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1131
|
+
"button",
|
|
1132
|
+
{
|
|
1133
|
+
type: "button",
|
|
1134
|
+
className: cx(
|
|
1135
|
+
"snacky-calendar__day",
|
|
1136
|
+
outside && "snacky-calendar__day--outside",
|
|
1137
|
+
isInRange(d) && "snacky-calendar__day--in-range",
|
|
1138
|
+
isEnd(d) && "snacky-calendar__day--selected"
|
|
1139
|
+
),
|
|
1140
|
+
onClick: () => onSelect?.(d),
|
|
1141
|
+
disabled: outside,
|
|
1142
|
+
"aria-current": isEnd(d) ? "date" : void 0,
|
|
1143
|
+
children: [
|
|
1144
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__day-number", children: d.getDate() }),
|
|
1145
|
+
marked.some((m) => sameDay(m, d)) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "snacky-calendar__marker" })
|
|
1146
|
+
]
|
|
1147
|
+
},
|
|
1148
|
+
i
|
|
1149
|
+
);
|
|
1150
|
+
})
|
|
1151
|
+
] }),
|
|
1152
|
+
onAction && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: onAction, style: { width: "100%" }, children: actionLabel })
|
|
1153
|
+
] });
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
// src/components/Avatar/Avatar.tsx
|
|
1157
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1031
1158
|
function Avatar({ src, alt, size = "md", className }) {
|
|
1032
|
-
return /* @__PURE__ */ (0,
|
|
1159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src, alt, className: cx("snacky-avatar", `snacky-avatar--${size}`, className) });
|
|
1033
1160
|
}
|
|
1034
1161
|
|
|
1035
1162
|
// src/components/Illustration/Illustration.tsx
|
|
1036
|
-
var
|
|
1163
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1037
1164
|
var SIZE = {
|
|
1038
1165
|
empty: { width: 268, height: 200 },
|
|
1039
1166
|
createAccount: { width: 360, height: 240 },
|
|
@@ -1043,54 +1170,54 @@ var SIZE = {
|
|
|
1043
1170
|
};
|
|
1044
1171
|
function Illustration({ variant, src, alt, className }) {
|
|
1045
1172
|
const { width, height } = SIZE[variant];
|
|
1046
|
-
return /* @__PURE__ */ (0,
|
|
1173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt, width, height, className: cx("snacky-illustration", className) });
|
|
1047
1174
|
}
|
|
1048
1175
|
|
|
1049
1176
|
// src/components/ProductImage/ProductImage.tsx
|
|
1050
|
-
var
|
|
1177
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1051
1178
|
function ProductImage({ src, alt, usage, sold = false, className }) {
|
|
1052
|
-
return /* @__PURE__ */ (0,
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1054
|
-
sold && /* @__PURE__ */ (0,
|
|
1179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("snacky-product-image-wrap", `snacky-product-image-wrap--${usage}`, className), children: [
|
|
1180
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt, className: cx("snacky-product-image", `snacky-product-image--${usage}`) }),
|
|
1181
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "snacky-product-image-sold-label", children: "Sold Out" }) })
|
|
1055
1182
|
] });
|
|
1056
1183
|
}
|
|
1057
1184
|
|
|
1058
1185
|
// src/components/ProductCard/ProductCard.tsx
|
|
1059
|
-
var
|
|
1186
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1060
1187
|
function ProductCard(props) {
|
|
1061
1188
|
if (props.variant === "details") {
|
|
1062
1189
|
const { productName: productName2, imageUrl: imageUrl2, price: price2, rating: rating2, originalPrice: originalPrice2, discountLabel: discountLabel2, ratingCount, favorited, onFavoriteClick, onShareClick, onChatClick, sold, ratingIcon: ratingIcon2, favoriteIcon, shareIcon, chatIcon, onClick: onClick2, className: className2 } = props;
|
|
1063
|
-
return /* @__PURE__ */ (0,
|
|
1064
|
-
/* @__PURE__ */ (0,
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
sold && /* @__PURE__ */ (0,
|
|
1190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("snacky-product-card", "snacky-product-card--details", className2), children: [
|
|
1191
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "snacky-product-card__image-block", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", onClick: onClick2, children: [
|
|
1192
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl2, alt: productName2 }),
|
|
1193
|
+
sold && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__sold-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SoldOutBadge, {}) })
|
|
1067
1194
|
] }) }),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
originalPrice2 && /* @__PURE__ */ (0,
|
|
1073
|
-
discountLabel2 && /* @__PURE__ */ (0,
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__details-body", children: [
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName2 }),
|
|
1197
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1198
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price2 }),
|
|
1199
|
+
originalPrice2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice2 }),
|
|
1200
|
+
discountLabel2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel2 })
|
|
1074
1201
|
] }),
|
|
1075
|
-
/* @__PURE__ */ (0,
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1204
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon2 ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
|
|
1078
1205
|
rating2,
|
|
1079
1206
|
" (",
|
|
1080
1207
|
ratingCount,
|
|
1081
1208
|
")"
|
|
1082
1209
|
] }),
|
|
1083
|
-
/* @__PURE__ */ (0,
|
|
1084
|
-
/* @__PURE__ */ (0,
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1086
|
-
/* @__PURE__ */ (0,
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__actions snacky-product-card__actions--details", children: [
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: favoriteIcon ?? (favorited ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart2, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(heart, { width: 20, height: 20 })), selected: favorited, onClick: onFavoriteClick, ariaLabel: "Favorite" }),
|
|
1212
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: shareIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(share, { width: 20, height: 20 }), onClick: onShareClick, ariaLabel: "Share" }),
|
|
1213
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { variant: "secondary", icon: chatIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(chat, { width: 20, height: 20 }), onClick: onChatClick, ariaLabel: "Chat with seller" })
|
|
1087
1214
|
] })
|
|
1088
1215
|
] })
|
|
1089
1216
|
] })
|
|
1090
1217
|
] });
|
|
1091
1218
|
}
|
|
1092
1219
|
const { productName, imageUrl, price, rating, originalPrice, discountLabel, onAddToCart, cartIcon, ratingIcon, onClick, className } = props;
|
|
1093
|
-
return /* @__PURE__ */ (0,
|
|
1220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1094
1221
|
"div",
|
|
1095
1222
|
{
|
|
1096
1223
|
className: cx("snacky-product-card", "snacky-product-card--list", className),
|
|
@@ -1099,25 +1226,25 @@ function ProductCard(props) {
|
|
|
1099
1226
|
onClick,
|
|
1100
1227
|
onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && onClick?.(),
|
|
1101
1228
|
children: [
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
/* @__PURE__ */ (0,
|
|
1104
|
-
discountLabel && /* @__PURE__ */ (0,
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__image-wrap", children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "snacky-product-card__image", src: imageUrl, alt: productName }),
|
|
1231
|
+
discountLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__discount", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscountTag, { label: discountLabel }) })
|
|
1105
1232
|
] }),
|
|
1106
|
-
/* @__PURE__ */ (0,
|
|
1107
|
-
/* @__PURE__ */ (0,
|
|
1108
|
-
/* @__PURE__ */ (0,
|
|
1109
|
-
originalPrice && /* @__PURE__ */ (0,
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "snacky-product-card__name", children: productName }),
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__price-row", children: [
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__price", children: price }),
|
|
1236
|
+
originalPrice && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__original-price", children: originalPrice })
|
|
1110
1237
|
] }),
|
|
1111
|
-
/* @__PURE__ */ (0,
|
|
1112
|
-
/* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1238
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "snacky-product-card__footer-row", children: [
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "snacky-product-card__rating", children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "snacky-product-card__rating-icon", children: ratingIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(star, { width: 16, height: 16 }) }),
|
|
1114
1241
|
rating
|
|
1115
1242
|
] }),
|
|
1116
|
-
/* @__PURE__ */ (0,
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1117
1244
|
IconButton,
|
|
1118
1245
|
{
|
|
1119
1246
|
variant: "primary",
|
|
1120
|
-
icon: cartIcon ?? /* @__PURE__ */ (0,
|
|
1247
|
+
icon: cartIcon ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(cartAdd, { width: 16, height: 16 }),
|
|
1121
1248
|
onClick: (e) => {
|
|
1122
1249
|
e.stopPropagation();
|
|
1123
1250
|
onAddToCart();
|
|
@@ -1138,6 +1265,7 @@ function ProductCard(props) {
|
|
|
1138
1265
|
Avatar,
|
|
1139
1266
|
BottomSheet,
|
|
1140
1267
|
Button,
|
|
1268
|
+
Calendar,
|
|
1141
1269
|
Callout,
|
|
1142
1270
|
ChatInput,
|
|
1143
1271
|
Checkbox,
|
|
@@ -1164,6 +1292,7 @@ function ProductCard(props) {
|
|
|
1164
1292
|
SnackyIcons,
|
|
1165
1293
|
SoldOutBadge,
|
|
1166
1294
|
SquareBanner,
|
|
1295
|
+
Stepper,
|
|
1167
1296
|
TabRow,
|
|
1168
1297
|
TextField,
|
|
1169
1298
|
Toggle,
|