@xsolla/xui-tag 0.128.0 → 0.129.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/native/index.d.mts +16 -6
- package/native/index.d.ts +16 -6
- package/native/index.js +45 -87
- package/native/index.js.map +1 -1
- package/native/index.mjs +46 -88
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.d.mts +16 -6
- package/web/index.d.ts +16 -6
- package/web/index.js +38 -86
- package/web/index.js.map +1 -1
- package/web/index.mjs +39 -87
- package/web/index.mjs.map +1 -1
package/web/index.mjs
CHANGED
|
@@ -36,6 +36,8 @@ var StyledBox = styled.div`
|
|
|
36
36
|
width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
|
|
37
37
|
min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
|
|
38
38
|
min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
|
|
39
|
+
max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
|
|
40
|
+
max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
|
|
39
41
|
|
|
40
42
|
padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
|
|
41
43
|
${(props) => props.paddingHorizontal && `
|
|
@@ -223,7 +225,7 @@ var Icon = ({ children, ...props }) => {
|
|
|
223
225
|
};
|
|
224
226
|
|
|
225
227
|
// src/Tag.tsx
|
|
226
|
-
import {
|
|
228
|
+
import { useResolvedTheme } from "@xsolla/xui-core";
|
|
227
229
|
import { X } from "@xsolla/xui-icons";
|
|
228
230
|
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
229
231
|
var SELECTABLE_BORDER_RADIUS = 8;
|
|
@@ -235,12 +237,13 @@ var Tag = ({
|
|
|
235
237
|
selected = false,
|
|
236
238
|
onPress,
|
|
237
239
|
children,
|
|
238
|
-
icon,
|
|
239
240
|
iconLeft,
|
|
240
241
|
iconRight,
|
|
241
|
-
onRemove
|
|
242
|
+
onRemove,
|
|
243
|
+
themeMode,
|
|
244
|
+
themeProductContext
|
|
242
245
|
}) => {
|
|
243
|
-
const { theme } =
|
|
246
|
+
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
244
247
|
const sizeStyles = theme.sizing.tag(size);
|
|
245
248
|
const resolveColors = () => {
|
|
246
249
|
if (variant === "selectable") {
|
|
@@ -257,115 +260,62 @@ var Tag = ({
|
|
|
257
260
|
border: theme.colors.border.secondary
|
|
258
261
|
};
|
|
259
262
|
}
|
|
260
|
-
|
|
261
|
-
switch (tone) {
|
|
262
|
-
case "primary":
|
|
263
|
-
return {
|
|
264
|
-
bg: theme.colors.background.primary,
|
|
265
|
-
text: theme.colors.content.primary,
|
|
266
|
-
border: theme.colors.border.secondary
|
|
267
|
-
};
|
|
268
|
-
case "brand":
|
|
269
|
-
return {
|
|
270
|
-
bg: theme.colors.background.brand.secondary,
|
|
271
|
-
text: theme.colors.content.brand.primary,
|
|
272
|
-
border: theme.colors.border.brand
|
|
273
|
-
};
|
|
274
|
-
case "brandExtra":
|
|
275
|
-
return {
|
|
276
|
-
bg: theme.colors.background.brandExtra.secondary,
|
|
277
|
-
text: theme.colors.content.brandExtra.primary,
|
|
278
|
-
border: theme.colors.border.brandExtra
|
|
279
|
-
};
|
|
280
|
-
case "success":
|
|
281
|
-
return {
|
|
282
|
-
bg: theme.colors.background.success.secondary,
|
|
283
|
-
text: theme.colors.content.success.primary,
|
|
284
|
-
border: theme.colors.border.success
|
|
285
|
-
};
|
|
286
|
-
case "warning":
|
|
287
|
-
return {
|
|
288
|
-
bg: theme.colors.background.warning.secondary,
|
|
289
|
-
text: theme.colors.content.warning.primary,
|
|
290
|
-
border: theme.colors.border.warning
|
|
291
|
-
};
|
|
292
|
-
case "alert":
|
|
293
|
-
return {
|
|
294
|
-
bg: theme.colors.background.alert.secondary,
|
|
295
|
-
text: theme.colors.content.alert.primary,
|
|
296
|
-
border: theme.colors.border.alert
|
|
297
|
-
};
|
|
298
|
-
case "neutral":
|
|
299
|
-
return {
|
|
300
|
-
bg: theme.colors.background.neutral.secondary,
|
|
301
|
-
text: theme.colors.content.neutral.primary,
|
|
302
|
-
border: theme.colors.border.neutral
|
|
303
|
-
};
|
|
304
|
-
default:
|
|
305
|
-
return {
|
|
306
|
-
bg: theme.colors.background.primary,
|
|
307
|
-
text: theme.colors.content.primary,
|
|
308
|
-
border: theme.colors.border.secondary
|
|
309
|
-
};
|
|
310
|
-
}
|
|
311
|
-
}
|
|
263
|
+
const isOutlined = type === "outlined";
|
|
312
264
|
switch (tone) {
|
|
313
265
|
case "primary":
|
|
314
266
|
return {
|
|
315
|
-
bg: theme.colors.background.primary,
|
|
267
|
+
bg: isOutlined ? "transparent" : theme.colors.background.primary,
|
|
316
268
|
text: theme.colors.content.primary,
|
|
317
|
-
border:
|
|
269
|
+
border: theme.colors.border.secondary
|
|
318
270
|
};
|
|
319
271
|
case "brand":
|
|
320
272
|
return {
|
|
321
|
-
bg: theme.colors.background.brand.primary,
|
|
322
|
-
text: theme.colors.content.on.brand,
|
|
323
|
-
border:
|
|
273
|
+
bg: isOutlined ? "transparent" : theme.colors.background.brand.primary,
|
|
274
|
+
text: isOutlined ? theme.colors.content.brand.primary : theme.colors.content.on.brand,
|
|
275
|
+
border: theme.colors.border.brand
|
|
324
276
|
};
|
|
325
277
|
case "brandExtra":
|
|
326
278
|
return {
|
|
327
|
-
bg: theme.colors.background.brandExtra.primary,
|
|
328
|
-
text: theme.colors.content.on.brandExtra,
|
|
329
|
-
border:
|
|
279
|
+
bg: isOutlined ? "transparent" : theme.colors.background.brandExtra.primary,
|
|
280
|
+
text: isOutlined ? theme.colors.content.brandExtra.primary : theme.colors.content.on.brandExtra,
|
|
281
|
+
border: theme.colors.border.brandExtra
|
|
330
282
|
};
|
|
331
283
|
case "success":
|
|
332
284
|
return {
|
|
333
|
-
bg: theme.colors.background.success.primary,
|
|
334
|
-
text: theme.colors.content.on.success,
|
|
335
|
-
border:
|
|
285
|
+
bg: isOutlined ? "transparent" : theme.colors.background.success.primary,
|
|
286
|
+
text: isOutlined ? theme.colors.content.success.primary : theme.colors.content.on.success,
|
|
287
|
+
border: theme.colors.border.success
|
|
336
288
|
};
|
|
337
289
|
case "warning":
|
|
338
290
|
return {
|
|
339
|
-
bg: theme.colors.background.warning.primary,
|
|
340
|
-
text: theme.colors.content.on.warning,
|
|
341
|
-
border:
|
|
291
|
+
bg: isOutlined ? "transparent" : theme.colors.background.warning.primary,
|
|
292
|
+
text: isOutlined ? theme.colors.content.warning.primary : theme.colors.content.on.warning,
|
|
293
|
+
border: theme.colors.border.warning
|
|
342
294
|
};
|
|
343
295
|
case "alert":
|
|
344
296
|
return {
|
|
345
|
-
bg: theme.colors.background.alert.primary,
|
|
346
|
-
text: theme.colors.content.on.alert,
|
|
347
|
-
border:
|
|
297
|
+
bg: isOutlined ? "transparent" : theme.colors.background.alert.primary,
|
|
298
|
+
text: isOutlined ? theme.colors.content.alert.primary : theme.colors.content.on.alert,
|
|
299
|
+
border: theme.colors.border.alert
|
|
348
300
|
};
|
|
349
301
|
case "neutral":
|
|
350
302
|
return {
|
|
351
|
-
bg: theme.colors.background.neutral.primary,
|
|
352
|
-
text: theme.colors.content.on.neutral,
|
|
353
|
-
border:
|
|
303
|
+
bg: isOutlined ? "transparent" : theme.colors.background.neutral.primary,
|
|
304
|
+
text: isOutlined ? theme.colors.content.neutral.primary : theme.colors.content.on.neutral,
|
|
305
|
+
border: theme.colors.border.neutral
|
|
354
306
|
};
|
|
355
307
|
default:
|
|
356
308
|
return {
|
|
357
|
-
bg: theme.colors.background.primary,
|
|
309
|
+
bg: isOutlined ? "transparent" : theme.colors.background.primary,
|
|
358
310
|
text: theme.colors.content.primary,
|
|
359
|
-
border:
|
|
311
|
+
border: theme.colors.border.secondary
|
|
360
312
|
};
|
|
361
313
|
}
|
|
362
314
|
};
|
|
363
315
|
const { bg, text, border } = resolveColors();
|
|
364
316
|
const isSelectable = variant === "selectable";
|
|
365
|
-
const isOutlined = type === "outlined";
|
|
366
|
-
const hasBorder = isSelectable || isOutlined;
|
|
367
317
|
const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
|
|
368
|
-
const
|
|
318
|
+
const isIconOnly = !children && (!!iconLeft || !!iconRight);
|
|
369
319
|
return /* @__PURE__ */ jsxs(
|
|
370
320
|
Box,
|
|
371
321
|
{
|
|
@@ -374,15 +324,16 @@ var Tag = ({
|
|
|
374
324
|
backgroundColor: bg,
|
|
375
325
|
borderRadius,
|
|
376
326
|
height: sizeStyles.height,
|
|
377
|
-
|
|
327
|
+
width: isIconOnly ? sizeStyles.height : void 0,
|
|
328
|
+
paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
|
|
378
329
|
flexDirection: "row",
|
|
379
330
|
alignItems: "center",
|
|
380
331
|
justifyContent: "center",
|
|
381
332
|
gap: sizeStyles.gap,
|
|
382
|
-
borderWidth:
|
|
333
|
+
borderWidth: sizeStyles.borderWidth,
|
|
383
334
|
borderColor: border,
|
|
384
|
-
borderStyle:
|
|
385
|
-
cursor: isSelectable ? "pointer" :
|
|
335
|
+
borderStyle: "solid",
|
|
336
|
+
cursor: isSelectable ? "pointer" : "default",
|
|
386
337
|
hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
|
|
387
338
|
style: {
|
|
388
339
|
overflow: "hidden",
|
|
@@ -390,7 +341,7 @@ var Tag = ({
|
|
|
390
341
|
whiteSpace: "nowrap"
|
|
391
342
|
},
|
|
392
343
|
children: [
|
|
393
|
-
|
|
344
|
+
iconLeft && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
|
|
394
345
|
children && /* @__PURE__ */ jsx4(
|
|
395
346
|
Text,
|
|
396
347
|
{
|
|
@@ -405,7 +356,8 @@ var Tag = ({
|
|
|
405
356
|
children
|
|
406
357
|
}
|
|
407
358
|
),
|
|
408
|
-
|
|
359
|
+
iconRight && /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: text, children: iconRight }),
|
|
360
|
+
onRemove && /* @__PURE__ */ jsx4(Box, { onPress: onRemove, children: /* @__PURE__ */ jsx4(X, { size: sizeStyles.iconSize, color: text }) })
|
|
409
361
|
]
|
|
410
362
|
}
|
|
411
363
|
);
|
package/web/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps {\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n tone?:\n | \"primary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n type?: \"solid\" | \"outlined\";\n variant?: \"default\" | \"selectable\";\n selected?: boolean;\n onPress?: () => void;\n children?: React.ReactNode;\n icon?: React.ReactNode;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n onRemove?: () => void;\n}\n\nconst SELECTABLE_BORDER_RADIUS = 8;\n\nexport const Tag: React.FC<TagProps> = ({\n size = \"md\",\n tone = \"primary\",\n type = \"solid\",\n variant = \"default\",\n selected = false,\n onPress,\n children,\n icon,\n iconLeft,\n iconRight,\n onRemove,\n}) => {\n const { theme } = useDesignSystem();\n const sizeStyles = theme.sizing.tag(size);\n\n const resolveColors = () => {\n if (variant === \"selectable\") {\n if (selected) {\n return {\n bg: theme.colors.control.brand.secondary.bg,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.secondary,\n };\n }\n return {\n bg: theme.colors.overlay.mono,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n\n if (type === \"outlined\") {\n switch (tone) {\n case \"primary\":\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n case \"brand\":\n return {\n bg: theme.colors.background.brand.secondary,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.brand,\n };\n case \"brandExtra\":\n return {\n bg: theme.colors.background.brandExtra.secondary,\n text: theme.colors.content.brandExtra.primary,\n border: theme.colors.border.brandExtra,\n };\n case \"success\":\n return {\n bg: theme.colors.background.success.secondary,\n text: theme.colors.content.success.primary,\n border: theme.colors.border.success,\n };\n case \"warning\":\n return {\n bg: theme.colors.background.warning.secondary,\n text: theme.colors.content.warning.primary,\n border: theme.colors.border.warning,\n };\n case \"alert\":\n return {\n bg: theme.colors.background.alert.secondary,\n text: theme.colors.content.alert.primary,\n border: theme.colors.border.alert,\n };\n case \"neutral\":\n return {\n bg: theme.colors.background.neutral.secondary,\n text: theme.colors.content.neutral.primary,\n border: theme.colors.border.neutral,\n };\n default:\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n }\n\n switch (tone) {\n case \"primary\":\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: undefined,\n };\n case \"brand\":\n return {\n bg: theme.colors.background.brand.primary,\n text: theme.colors.content.on.brand,\n border: undefined,\n };\n case \"brandExtra\":\n return {\n bg: theme.colors.background.brandExtra.primary,\n text: theme.colors.content.on.brandExtra,\n border: undefined,\n };\n case \"success\":\n return {\n bg: theme.colors.background.success.primary,\n text: theme.colors.content.on.success,\n border: undefined,\n };\n case \"warning\":\n return {\n bg: theme.colors.background.warning.primary,\n text: theme.colors.content.on.warning,\n border: undefined,\n };\n case \"alert\":\n return {\n bg: theme.colors.background.alert.primary,\n text: theme.colors.content.on.alert,\n border: undefined,\n };\n case \"neutral\":\n return {\n bg: theme.colors.background.neutral.primary,\n text: theme.colors.content.on.neutral,\n border: undefined,\n };\n default:\n return {\n bg: theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: undefined,\n };\n }\n };\n\n const { bg, text, border } = resolveColors();\n const isSelectable = variant === \"selectable\";\n const isOutlined = type === \"outlined\";\n const hasBorder = isSelectable || isOutlined;\n const borderRadius = isSelectable\n ? SELECTABLE_BORDER_RADIUS\n : sizeStyles.radius;\n const resolvedIconLeft = icon || iconLeft;\n\n return (\n <Box\n as={isSelectable ? \"button\" : undefined}\n onPress={isSelectable ? onPress : undefined}\n backgroundColor={bg}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingHorizontal={sizeStyles.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={sizeStyles.gap}\n borderWidth={hasBorder ? 1 : 0}\n borderColor={border}\n borderStyle={hasBorder ? \"solid\" : undefined}\n cursor={isSelectable ? \"pointer\" : undefined}\n hoverStyle={\n isSelectable && !selected\n ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover }\n : undefined\n }\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {resolvedIconLeft && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {resolvedIconLeft}\n </Icon>\n )}\n\n {children && (\n <Text\n color={text}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"500\"\n whiteSpace=\"nowrap\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {children}\n </Text>\n )}\n\n {onRemove ? (\n <Box onPress={onRemove}>\n <X size={sizeStyles.iconSize} color={text} />\n </Box>\n ) : (\n iconRight && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconRight}\n </Icon>\n )\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["styled","jsx","styled","jsx","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/Tag.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport { X } from \"@xsolla/xui-icons\";\n\nexport interface TagProps extends ThemeOverrideProps {\n /** Size of the tag */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /** Colour tone of the tag */\n tone?:\n | \"primary\"\n | \"brand\"\n | \"brandExtra\"\n | \"success\"\n | \"warning\"\n | \"alert\"\n | \"neutral\";\n /** Visual style: solid (filled background) or outlined (border only) */\n type?: \"solid\" | \"outlined\";\n /** Interaction variant: default (display only) or selectable (interactive toggle) */\n variant?: \"default\" | \"selectable\";\n /** Whether the tag is selected. Only applies to the selectable variant. */\n selected?: boolean;\n /** Click handler for selectable tags */\n onPress?: () => void;\n /** Label text. When omitted with an icon, the tag collapses to a square. */\n children?: ReactNode;\n /** Icon displayed on the left side of the label */\n iconLeft?: ReactNode;\n /** Icon displayed on the right side of the label */\n iconRight?: ReactNode;\n /** Callback when the remove (X) icon is clicked */\n onRemove?: () => void;\n}\n\nconst SELECTABLE_BORDER_RADIUS = 8;\n\nexport const Tag: React.FC<TagProps> = ({\n size = \"md\",\n tone = \"primary\",\n type = \"solid\",\n variant = \"default\",\n selected = false,\n onPress,\n children,\n iconLeft,\n iconRight,\n onRemove,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizeStyles = theme.sizing.tag(size);\n\n const resolveColors = () => {\n if (variant === \"selectable\") {\n if (selected) {\n return {\n bg: theme.colors.control.brand.secondary.bg,\n text: theme.colors.content.brand.primary,\n border: theme.colors.border.secondary,\n };\n }\n return {\n bg: theme.colors.overlay.mono,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n\n const isOutlined = type === \"outlined\";\n\n switch (tone) {\n case \"primary\":\n return {\n bg: isOutlined ? \"transparent\" : theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n case \"brand\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.brand.primary,\n text: isOutlined\n ? theme.colors.content.brand.primary\n : theme.colors.content.on.brand,\n border: theme.colors.border.brand,\n };\n case \"brandExtra\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.brandExtra.primary,\n text: isOutlined\n ? theme.colors.content.brandExtra.primary\n : theme.colors.content.on.brandExtra,\n border: theme.colors.border.brandExtra,\n };\n case \"success\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.success.primary,\n text: isOutlined\n ? theme.colors.content.success.primary\n : theme.colors.content.on.success,\n border: theme.colors.border.success,\n };\n case \"warning\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.warning.primary,\n text: isOutlined\n ? theme.colors.content.warning.primary\n : theme.colors.content.on.warning,\n border: theme.colors.border.warning,\n };\n case \"alert\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.alert.primary,\n text: isOutlined\n ? theme.colors.content.alert.primary\n : theme.colors.content.on.alert,\n border: theme.colors.border.alert,\n };\n case \"neutral\":\n return {\n bg: isOutlined\n ? \"transparent\"\n : theme.colors.background.neutral.primary,\n text: isOutlined\n ? theme.colors.content.neutral.primary\n : theme.colors.content.on.neutral,\n border: theme.colors.border.neutral,\n };\n default:\n return {\n bg: isOutlined ? \"transparent\" : theme.colors.background.primary,\n text: theme.colors.content.primary,\n border: theme.colors.border.secondary,\n };\n }\n };\n\n const { bg, text, border } = resolveColors();\n const isSelectable = variant === \"selectable\";\n const borderRadius = isSelectable\n ? SELECTABLE_BORDER_RADIUS\n : sizeStyles.radius;\n const isIconOnly = !children && (!!iconLeft || !!iconRight);\n\n return (\n <Box\n as={isSelectable ? \"button\" : undefined}\n onPress={isSelectable ? onPress : undefined}\n backgroundColor={bg}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n width={isIconOnly ? sizeStyles.height : undefined}\n paddingHorizontal={isIconOnly ? 0 : sizeStyles.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={sizeStyles.gap}\n borderWidth={sizeStyles.borderWidth}\n borderColor={border}\n borderStyle=\"solid\"\n cursor={isSelectable ? \"pointer\" : \"default\"}\n hoverStyle={\n isSelectable && !selected\n ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover }\n : undefined\n }\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {iconLeft && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconLeft}\n </Icon>\n )}\n\n {children && (\n <Text\n color={text}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"500\"\n whiteSpace=\"nowrap\"\n style={{\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {children}\n </Text>\n )}\n\n {iconRight && (\n <Icon size={sizeStyles.iconSize} color={text}>\n {iconRight}\n </Icon>\n )}\n\n {onRemove && (\n <Box onPress={onRemove}>\n <X size={sizeStyles.iconSize} color={text} />\n </Box>\n )}\n </Box>\n );\n};\n"],"mappings":"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","names":["styled","jsx","styled","jsx","jsx"]}
|