@dxc-technology/halstack-react 0.0.0-73e48b1 → 0.0.0-743759c

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 (5) hide show
  1. package/dist/index.d.mts +300 -69
  2. package/dist/index.d.ts +300 -69
  3. package/dist/index.js +514 -120
  4. package/dist/index.mjs +514 -120
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -289,50 +289,160 @@ var componentTokens = {
289
289
  button: {
290
290
  labelFontLineHeight: coreTokens_default.type_leading_normal,
291
291
  labelLetterSpacing: coreTokens_default.type_spacing_wide_01,
292
- paddingLeft: coreTokens_default.spacing_8,
293
- paddingRight: coreTokens_default.spacing_8,
294
- paddingTop: coreTokens_default.spacing_8,
295
- paddingBottom: coreTokens_default.spacing_8,
296
- focusBorderColor: coreTokens_default.color_blue_600,
297
- primaryBackgroundColor: coreTokens_default.color_purple_700,
298
- primaryFontColor: coreTokens_default.color_white,
299
- primaryHoverBackgroundColor: coreTokens_default.color_purple_800,
300
- primaryActiveBackgroundColor: coreTokens_default.color_purple_900,
301
- primaryDisabledBackgroundColor: coreTokens_default.color_grey_100,
302
- primaryDisabledFontColor: coreTokens_default.color_grey_500,
292
+ paddingSmallTop: coreTokens_default.spacing_0,
293
+ paddingSmallLeft: coreTokens_default.spacing_8,
294
+ paddingSmallBottom: coreTokens_default.spacing_0,
295
+ paddingSmallRight: coreTokens_default.spacing_8,
296
+ paddingSmallOnlyIconTop: coreTokens_default.spacing_0,
297
+ paddingSmallOnlyIconLeft: coreTokens_default.spacing_4,
298
+ paddingSmallOnlyIconBottom: coreTokens_default.spacing_0,
299
+ paddingSmallOnlyIconRight: coreTokens_default.spacing_4,
300
+ paddingMediumTop: coreTokens_default.spacing_0,
301
+ paddingMediumLeft: coreTokens_default.spacing_8,
302
+ paddingMediumBottom: coreTokens_default.spacing_0,
303
+ paddingMediumRight: coreTokens_default.spacing_8,
304
+ paddingMediumOnlyIconTop: coreTokens_default.spacing_0,
305
+ paddingMediumOnlyIconLeft: coreTokens_default.spacing_8,
306
+ paddingMediumOnlyIconBottom: coreTokens_default.spacing_0,
307
+ paddingMediumOnlyIconRight: coreTokens_default.spacing_8,
308
+ paddingLargeTop: coreTokens_default.spacing_0,
309
+ paddingLargeLeft: coreTokens_default.spacing_16,
310
+ paddingLargeBottom: coreTokens_default.spacing_0,
311
+ paddingLargeRight: coreTokens_default.spacing_16,
312
+ paddingLargeOnlyIconTop: coreTokens_default.spacing_0,
313
+ paddingLargeOnlyIconLeft: coreTokens_default.spacing_8,
314
+ paddingLargeOnlyIconBottom: coreTokens_default.spacing_0,
315
+ paddingLargeOnlyIconRight: coreTokens_default.spacing_8,
316
+ focusBorderColor: coreTokens_default.color_blue_500,
317
+ primaryDefaultBackgroundColor: coreTokens_default.color_purple_700,
318
+ primaryErrorBackgroundColor: coreTokens_default.color_red_700,
319
+ primaryWarningBackgroundColor: coreTokens_default.color_orange_700,
320
+ primarySuccessBackgroundColor: coreTokens_default.color_green_700,
321
+ primaryInfoBackgroundColor: coreTokens_default.color_blue_700,
322
+ primaryDefaultFontColor: coreTokens_default.color_white,
323
+ primaryErrorFontColor: coreTokens_default.color_white,
324
+ primaryWarningFontColor: coreTokens_default.color_white,
325
+ primarySuccessFontColor: coreTokens_default.color_white,
326
+ primaryInfoFontColor: coreTokens_default.color_white,
327
+ primaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_800,
328
+ primaryHoverErrorBackgroundColor: coreTokens_default.color_red_800,
329
+ primaryHoverWarningBackgroundColor: coreTokens_default.color_orange_800,
330
+ primaryHoverSuccessBackgroundColor: coreTokens_default.color_green_800,
331
+ primaryHoverInfoBackgroundColor: coreTokens_default.color_blue_800,
332
+ primaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_900,
333
+ primaryActiveErrorBackgroundColor: coreTokens_default.color_red_900,
334
+ primaryActiveWarningBackgroundColor: coreTokens_default.color_orange_900,
335
+ primaryActiveSuccessBackgroundColor: coreTokens_default.color_green_900,
336
+ primaryActiveInfoBackgroundColor: coreTokens_default.color_blue_900,
337
+ primaryDisabledDefaultBackgroundColor: coreTokens_default.color_purple_100,
338
+ primaryDisabledErrorBackgroundColor: coreTokens_default.color_red_100,
339
+ primaryDisabledWarningBackgroundColor: coreTokens_default.color_orange_100,
340
+ primaryDisabledSuccessBackgroundColor: coreTokens_default.color_green_100,
341
+ primaryDisabledInfoBackgroundColor: coreTokens_default.color_blue_100,
342
+ primaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
343
+ primaryDisabledErrorFontColor: coreTokens_default.color_red_300,
344
+ primaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
345
+ primaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
346
+ primaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
303
347
  primaryBorderThickness: coreTokens_default.border_width_0,
304
348
  primaryBorderStyle: coreTokens_default.border_none,
305
349
  primaryBorderRadius: coreTokens_default.border_radius_medium,
306
350
  primaryFontFamily: coreTokens_default.type_sans,
307
- primaryFontSize: coreTokens_default.type_scale_03,
308
- primaryFontWeight: coreTokens_default.type_regular,
309
- secondaryBackgroundColor: coreTokens_default.color_transparent,
310
- secondaryFontColor: coreTokens_default.color_purple_700,
311
- secondaryHoverFontColor: coreTokens_default.color_white,
312
- secondaryBorderColor: coreTokens_default.color_purple_700,
313
- secondaryHoverBackgroundColor: coreTokens_default.color_purple_700,
314
- secondaryActiveBackgroundColor: coreTokens_default.color_purple_900,
315
- secondaryDisabledBackgroundColor: coreTokens_default.color_transparent,
316
- secondaryDisabledFontColor: coreTokens_default.color_grey_500,
317
- secondaryDisabledBorderColor: coreTokens_default.color_grey_500,
351
+ primarySmallFontSize: coreTokens_default.type_scale_02,
352
+ primaryMediumFontSize: coreTokens_default.type_scale_02,
353
+ primaryLargeFontSize: coreTokens_default.type_scale_03,
354
+ primaryFontWeight: coreTokens_default.type_semibold,
355
+ secondaryDefaultBackgroundColor: coreTokens_default.color_transparent,
356
+ secondaryErrorBackgroundColor: coreTokens_default.color_transparent,
357
+ secondaryWarningBackgroundColor: coreTokens_default.color_transparent,
358
+ secondarySuccessBackgroundColor: coreTokens_default.color_transparent,
359
+ secondaryInfoBackgroundColor: coreTokens_default.color_transparent,
360
+ secondaryDefaultFontColor: coreTokens_default.color_purple_700,
361
+ secondaryErrorFontColor: coreTokens_default.color_red_700,
362
+ secondaryWarningFontColor: coreTokens_default.color_orange_700,
363
+ secondarySuccessFontColor: coreTokens_default.color_green_700,
364
+ secondaryInfoFontColor: coreTokens_default.color_blue_700,
365
+ secondaryDefaultBorderColor: coreTokens_default.color_purple_700,
366
+ secondaryErrorBorderColor: coreTokens_default.color_red_700,
367
+ secondaryWarningBorderColor: coreTokens_default.color_orange_700,
368
+ secondarySuccessBorderColor: coreTokens_default.color_green_700,
369
+ secondaryInfoBorderColor: coreTokens_default.color_blue_700,
370
+ secondaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_700,
371
+ secondaryHoverErrorBackgroundColor: coreTokens_default.color_red_700,
372
+ secondaryHoverWarningBackgroundColor: coreTokens_default.color_orange_700,
373
+ secondaryHoverSuccessBackgroundColor: coreTokens_default.color_green_700,
374
+ secondaryHoverInfoBackgroundColor: coreTokens_default.color_blue_700,
375
+ secondaryHoverDefaultFontColor: coreTokens_default.color_white,
376
+ secondaryHoverErrorFontColor: coreTokens_default.color_white,
377
+ secondaryHoverWarningFontColor: coreTokens_default.color_white,
378
+ secondaryHoverSuccessFontColor: coreTokens_default.color_white,
379
+ secondaryHoverInfoFontColor: coreTokens_default.color_white,
380
+ secondaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_800,
381
+ secondaryActiveErrorBackgroundColor: coreTokens_default.color_red_800,
382
+ secondaryActiveWarningBackgroundColor: coreTokens_default.color_orange_800,
383
+ secondaryActiveSuccessBackgroundColor: coreTokens_default.color_green_800,
384
+ secondaryActiveInfoBackgroundColor: coreTokens_default.color_blue_800,
385
+ secondaryDisabledDefaultBackgroundColor: coreTokens_default.color_transparent,
386
+ secondaryDisabledErrorBackgroundColor: coreTokens_default.color_transparent,
387
+ secondaryDisabledWarningBackgroundColor: coreTokens_default.color_transparent,
388
+ secondaryDisabledSuccessBackgroundColor: coreTokens_default.color_transparent,
389
+ secondaryDisabledInfoBackgroundColor: coreTokens_default.color_transparent,
390
+ secondaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
391
+ secondaryDisabledErrorFontColor: coreTokens_default.color_red_300,
392
+ secondaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
393
+ secondaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
394
+ secondaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
395
+ secondaryDisabledDefaultBorderColor: coreTokens_default.color_purple_300,
396
+ secondaryDisabledErrorBorderColor: coreTokens_default.color_red_300,
397
+ secondaryDisabledWarningBorderColor: coreTokens_default.color_orange_300,
398
+ secondaryDisabledSuccessBorderColor: coreTokens_default.color_green_300,
399
+ secondaryDisabledInfoBorderColor: coreTokens_default.color_blue_300,
318
400
  secondaryBorderThickness: coreTokens_default.border_width_1,
319
401
  secondaryBorderStyle: coreTokens_default.border_solid,
320
402
  secondaryBorderRadius: coreTokens_default.border_radius_medium,
321
403
  secondaryFontFamily: coreTokens_default.type_sans,
322
- secondaryFontSize: coreTokens_default.type_scale_03,
323
- secondaryFontWeight: coreTokens_default.type_regular,
324
- textBackgroundColor: coreTokens_default.color_transparent,
325
- textFontColor: coreTokens_default.color_purple_700,
326
- textHoverBackgroundColor: coreTokens_default.color_purple_100,
327
- textActiveBackgroundColor: coreTokens_default.color_purple_200,
328
- textDisabledBackgroundColor: coreTokens_default.color_transparent,
329
- textDisabledFontColor: coreTokens_default.color_grey_500,
330
- textBorderThickness: coreTokens_default.border_width_0,
331
- textBorderStyle: coreTokens_default.border_none,
332
- textBorderRadius: coreTokens_default.border_radius_medium,
333
- textFontFamily: coreTokens_default.type_sans,
334
- textFontSize: coreTokens_default.type_scale_03,
335
- textFontWeight: coreTokens_default.type_regular
404
+ secondarySmallFontSize: coreTokens_default.type_scale_02,
405
+ secondaryMediumFontSize: coreTokens_default.type_scale_02,
406
+ secondaryLargeFontSize: coreTokens_default.type_scale_03,
407
+ secondaryFontWeight: coreTokens_default.type_semibold,
408
+ tertiaryDefaultBackgroundColor: coreTokens_default.color_transparent,
409
+ tertiaryErrorBackgroundColor: coreTokens_default.color_transparent,
410
+ tertiaryWarningBackgroundColor: coreTokens_default.color_transparent,
411
+ tertiarySuccessBackgroundColor: coreTokens_default.color_transparent,
412
+ tertiaryInfoBackgroundColor: coreTokens_default.color_transparent,
413
+ tertiaryDefaultFontColor: coreTokens_default.color_purple_700,
414
+ tertiaryErrorFontColor: coreTokens_default.color_red_700,
415
+ tertiaryWarningFontColor: coreTokens_default.color_orange_700,
416
+ tertiarySuccessFontColor: coreTokens_default.color_green_700,
417
+ tertiaryInfoFontColor: coreTokens_default.color_blue_700,
418
+ tertiaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_100,
419
+ tertiaryHoverErrorBackgroundColor: coreTokens_default.color_red_100,
420
+ tertiaryHoverWarningBackgroundColor: coreTokens_default.color_orange_100,
421
+ tertiaryHoverSuccessBackgroundColor: coreTokens_default.color_green_100,
422
+ tertiaryHoverInfoBackgroundColor: coreTokens_default.color_blue_100,
423
+ tertiaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_200,
424
+ tertiaryActiveErrorBackgroundColor: coreTokens_default.color_red_200,
425
+ tertiaryActiveWarningBackgroundColor: coreTokens_default.color_orange_200,
426
+ tertiaryActiveSuccessBackgroundColor: coreTokens_default.color_green_200,
427
+ tertiaryActiveInfoBackgroundColor: coreTokens_default.color_blue_200,
428
+ tertiaryDisabledDefaultBackgroundColor: coreTokens_default.color_transparent,
429
+ tertiaryDisabledErrorBackgroundColor: coreTokens_default.color_transparent,
430
+ tertiaryDisabledWarningBackgroundColor: coreTokens_default.color_transparent,
431
+ tertiaryDisabledSuccessBackgroundColor: coreTokens_default.color_transparent,
432
+ tertiaryDisabledInfoBackgroundColor: coreTokens_default.color_transparent,
433
+ tertiaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
434
+ tertiaryDisabledErrorFontColor: coreTokens_default.color_red_300,
435
+ tertiaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
436
+ tertiaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
437
+ tertiaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
438
+ tertiaryBorderThickness: coreTokens_default.border_width_0,
439
+ tertiaryBorderStyle: coreTokens_default.border_none,
440
+ tertiaryBorderRadius: coreTokens_default.border_radius_medium,
441
+ tertiaryFontFamily: coreTokens_default.type_sans,
442
+ tertiarySmallFontSize: coreTokens_default.type_scale_02,
443
+ tertiaryMediumFontSize: coreTokens_default.type_scale_02,
444
+ tertiaryLargeFontSize: coreTokens_default.type_scale_03,
445
+ tertiaryFontWeight: coreTokens_default.type_semibold
336
446
  },
337
447
  card: {
338
448
  height: "220px",
@@ -1539,18 +1649,23 @@ var parseTheme = (theme) => {
1539
1649
  const boxTokens = componentTokensCopy.box;
1540
1650
  boxTokens.backgroundColor = theme?.box?.baseColor ?? boxTokens.backgroundColor;
1541
1651
  const buttonTokens = componentTokensCopy.button;
1542
- buttonTokens.primaryFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryFontColor;
1543
- buttonTokens.primaryBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryBackgroundColor;
1544
- buttonTokens.secondaryFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryFontColor;
1545
- buttonTokens.secondaryHoverFontColor = theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverFontColor;
1546
- buttonTokens.secondaryBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryBorderColor;
1547
- buttonTokens.secondaryHoverBackgroundColor = theme?.button?.baseColor ?? buttonTokens.secondaryHoverBackgroundColor;
1548
- buttonTokens.textFontColor = theme?.button?.baseColor ?? buttonTokens.textFontColor;
1549
- buttonTokens.primaryHoverBackgroundColor = subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverBackgroundColor;
1550
- buttonTokens.primaryActiveBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveBackgroundColor;
1551
- buttonTokens.secondaryActiveBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveBackgroundColor;
1552
- buttonTokens.textHoverBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.textHoverBackgroundColor;
1553
- buttonTokens.textActiveBackgroundColor = addLightness(52, theme?.button?.baseColor) ?? buttonTokens.textActiveBackgroundColor;
1652
+ buttonTokens.primaryDefaultFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryDefaultFontColor;
1653
+ buttonTokens.primaryDefaultBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryDefaultBackgroundColor;
1654
+ buttonTokens.secondaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultFontColor;
1655
+ buttonTokens.secondaryHoverDefaultFontColor = theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverDefaultFontColor;
1656
+ buttonTokens.secondaryDefaultBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultBorderColor;
1657
+ buttonTokens.secondaryHoverDefaultBackgroundColor = theme?.button?.baseColor ?? buttonTokens.secondaryHoverDefaultBackgroundColor;
1658
+ buttonTokens.tertiaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.tertiaryDefaultFontColor;
1659
+ buttonTokens.primaryHoverDefaultBackgroundColor = subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverDefaultBackgroundColor;
1660
+ buttonTokens.primaryActiveDefaultBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveDefaultBackgroundColor;
1661
+ buttonTokens.secondaryActiveDefaultBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveDefaultBackgroundColor;
1662
+ buttonTokens.tertiaryHoverDefaultBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.tertiaryHoverDefaultBackgroundColor;
1663
+ buttonTokens.tertiaryActiveDefaultBackgroundColor = addLightness(52, theme?.button?.baseColor) ?? buttonTokens.tertiaryActiveDefaultBackgroundColor;
1664
+ buttonTokens.primaryDisabledDefaultBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.primaryDisabledDefaultBackgroundColor;
1665
+ buttonTokens.primaryDisabledDefaultFontColor = addLightness(42, theme?.button?.primaryFontColor) ?? buttonTokens.primaryDisabledDefaultFontColor;
1666
+ buttonTokens.secondaryDisabledDefaultBorderColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultBorderColor;
1667
+ buttonTokens.secondaryDisabledDefaultFontColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultFontColor;
1668
+ buttonTokens.tertiaryDisabledDefaultFontColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.tertiaryDisabledDefaultFontColor;
1554
1669
  const checkboxTokens = componentTokensCopy.checkbox;
1555
1670
  checkboxTokens.backgroundColorChecked = theme?.checkbox?.baseColor ?? checkboxTokens.backgroundColorChecked;
1556
1671
  checkboxTokens.borderColor = theme?.checkbox?.baseColor ?? checkboxTokens.borderColor;
@@ -2386,6 +2501,7 @@ import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
2386
2501
  var DxcButton = ({
2387
2502
  label = "",
2388
2503
  mode = "primary",
2504
+ semantic = "default",
2389
2505
  disabled = false,
2390
2506
  iconPosition = "before",
2391
2507
  title,
@@ -2394,7 +2510,7 @@ var DxcButton = ({
2394
2510
  onClick = () => {
2395
2511
  },
2396
2512
  margin,
2397
- size = "fitContent",
2513
+ size = { height: "large", width: "fitContent" },
2398
2514
  tabIndex = 0
2399
2515
  }) => {
2400
2516
  const colorsTheme = useTheme_default();
@@ -2408,77 +2524,357 @@ var DxcButton = ({
2408
2524
  },
2409
2525
  tabIndex: disabled ? -1 : tabIndex,
2410
2526
  type,
2411
- $mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
2527
+ $mode: mode === "primary" || mode === "secondary" || mode === "tertiary" ? mode : "primary",
2412
2528
  hasLabel: label ? true : false,
2413
2529
  hasIcon: icon ? true : false,
2414
2530
  iconPosition,
2415
2531
  size,
2416
2532
  margin,
2533
+ semantic,
2417
2534
  children: [
2418
2535
  label && /* @__PURE__ */ jsx7(LabelContainer, { children: label }),
2419
- icon && /* @__PURE__ */ jsx7(IconContainer3, { children: typeof icon === "string" ? /* @__PURE__ */ jsx7(Icon_default, { icon }) : icon })
2536
+ icon && /* @__PURE__ */ jsx7(IconContainer3, { size, children: typeof icon === "string" ? /* @__PURE__ */ jsx7(Icon_default, { icon }) : icon })
2420
2537
  ]
2421
2538
  }
2422
2539
  ) }) });
2423
2540
  };
2424
- var sizes2 = {
2541
+ var widths = {
2425
2542
  small: "42px",
2426
2543
  medium: "120px",
2427
2544
  large: "240px",
2428
2545
  fillParent: "100%",
2429
2546
  fitContent: "fit-content"
2430
2547
  };
2431
- var calculateWidth3 = (margin, size) => size === "fillParent" ? `calc(${sizes2[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes2[size];
2432
- var getButtonStyles = ($mode, theme) => `
2433
- border-color: ${$mode === "secondary" ? theme.secondaryBorderColor : ""};
2434
- border-radius: ${$mode === "primary" ? theme.primaryBorderRadius : $mode === "secondary" ? theme.secondaryBorderRadius : theme.textBorderRadius};
2435
- border-width: ${$mode === "primary" ? theme.primaryBorderThickness : $mode === "secondary" ? theme.secondaryBorderThickness : theme.textBorderThickness};
2436
- border-style: ${$mode === "primary" ? theme.primaryBorderStyle : $mode === "secondary" ? theme.secondaryBorderStyle : theme.textBorderStyle};
2437
- font-family: ${$mode === "primary" ? theme.primaryFontFamily : $mode === "secondary" ? theme.secondaryFontFamily : theme.textFontFamily};
2438
- font-size: ${$mode === "primary" ? theme.primaryFontSize : $mode === "secondary" ? theme.secondaryFontSize : theme.textFontSize};
2439
- font-weight: ${$mode === "primary" ? theme.primaryFontWeight : $mode === "secondary" ? theme.secondaryFontWeight : theme.textFontWeight};
2440
- background-color: ${$mode === "primary" ? theme.primaryBackgroundColor : $mode === "secondary" ? theme.secondaryBackgroundColor : theme.textBackgroundColor};
2441
- color: ${$mode === "primary" ? theme.primaryFontColor : $mode === "secondary" ? theme.secondaryFontColor : theme.textFontColor};
2442
- `;
2443
- var getButtonStates = (disabled, $mode, theme) => `
2444
- &:hover {
2445
- background-color: ${$mode === "primary" ? theme.primaryHoverBackgroundColor : $mode === "secondary" ? theme.secondaryHoverBackgroundColor : theme.textHoverBackgroundColor};
2446
- color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""};
2447
- }
2448
- &:focus {
2449
- border-color: ${$mode === "secondary" ? "transparent" : ""};
2450
- }
2451
- &:active {
2452
- background-color: ${$mode === "primary" ? theme.primaryActiveBackgroundColor : $mode === "secondary" ? theme.secondaryActiveBackgroundColor : theme.textActiveBackgroundColor};
2453
- color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""};
2454
- border-color: ${$mode === "secondary" ? "transparent" : ""};
2455
- outline: none;
2456
- box-shadow: ${!disabled ? `0 0 0 2px ${theme.focusBorderColor}` : ""};
2457
- }
2458
- &:disabled {
2459
- cursor: not-allowed;
2460
- background-color: ${$mode === "primary" ? theme.primaryDisabledBackgroundColor : $mode === "secondary" ? theme.secondaryDisabledBackgroundColor : theme.textDisabledBackgroundColor};
2461
- color: ${$mode === "primary" ? theme.primaryDisabledFontColor : $mode === "secondary" ? theme.secondaryDisabledFontColor : theme.textDisabledFontColor};
2462
- border-color: ${$mode === "secondary" ? theme.secondaryDisabledBorderColor : ""};
2548
+ var calculateWidth3 = (margin, size) => size?.width === "fillParent" ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : widths[size?.width];
2549
+ var getHeight = (height) => {
2550
+ switch (height) {
2551
+ case "small":
2552
+ return 1.5;
2553
+ case "medium":
2554
+ return 2;
2555
+ case "large":
2556
+ return 2.5;
2557
+ default:
2558
+ return 2.5;
2559
+ }
2560
+ };
2561
+ var getButtonStyles = ($mode, semantic, theme, size) => {
2562
+ let enabled = "";
2563
+ let hover = "";
2564
+ let active = "";
2565
+ let focus = "";
2566
+ let disabled = "";
2567
+ let commonPrimaryStyles = `
2568
+ font-weight: ${theme.primaryFontWeight};
2569
+ font-size: ${size?.height === "small" ? theme.primarySmallFontSize : size?.height === "medium" ? theme.primaryMediumFontSize : theme.primaryLargeFontSize};
2570
+ font-family: ${theme.primaryFontFamily};
2571
+ border-radius: ${theme.primaryBorderRadius};
2572
+ border-width ${theme.primaryBorderThickness};
2573
+ border-style: ${theme.primaryBorderStyle};`;
2574
+ let commonSecondaryStyles = `
2575
+ font-weight: ${theme.secondaryFontWeight};
2576
+ font-size: ${size?.height === "small" ? theme.secondarySmallFontSize : size?.height === "medium" ? theme.secondaryMediumFontSize : theme.secondaryLargeFontSize};
2577
+ font-family: ${theme.secondaryFontFamily};
2578
+ border-radius: ${theme.secondaryBorderRadius};
2579
+ border-width ${theme.secondaryBorderThickness};
2580
+ border-style: ${theme.secondaryBorderStyle};`;
2581
+ let commonTertiaryStyles = `
2582
+ font-weight: ${theme.tertiaryFontWeight};
2583
+ font-size: ${size?.height === "small" ? theme.tertiarySmallFontSize : size?.height === "medium" ? theme.tertiaryMediumFontSize : theme.tertiaryLargeFontSize};
2584
+ font-family: ${theme.tertiaryFontFamily};
2585
+ border-radius: ${theme.tertiaryBorderRadius};
2586
+ border-width ${theme.tertiaryBorderThickness};
2587
+ border-style: ${theme.tertiaryBorderStyle};`;
2588
+ switch ($mode) {
2589
+ case "primary":
2590
+ switch (semantic) {
2591
+ case "default":
2592
+ enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
2593
+ color: ${theme.primaryDefaultFontColor};`;
2594
+ hover = `background-color: ${theme.primaryHoverDefaultBackgroundColor};`;
2595
+ active = `background-color: ${theme.primaryActiveDefaultBackgroundColor};
2596
+ border-color: transparent;
2597
+ outline: none;
2598
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2599
+ disabled = `cursor: not-allowed;
2600
+ background-color: ${theme.primaryDisabledDefaultBackgroundColor};
2601
+ color: ${theme.primaryDisabledDefaultFontColor};`;
2602
+ break;
2603
+ case "error":
2604
+ enabled = `background-color: ${theme.primaryErrorBackgroundColor};
2605
+ color: ${theme.primaryErrorFontColor};`;
2606
+ hover = `background-color: ${theme.primaryHoverErrorBackgroundColor};`;
2607
+ active = `background-color: ${theme.primaryActiveErrorBackgroundColor};
2608
+ border-color: transparent;
2609
+ outline: none;
2610
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2611
+ disabled = `cursor: not-allowed;
2612
+ background-color: ${theme.primaryDisabledErrorBackgroundColor};
2613
+ color: ${theme.primaryDisabledErrorFontColor};`;
2614
+ break;
2615
+ case "warning":
2616
+ enabled = `background-color: ${theme.primaryWarningBackgroundColor};
2617
+ color: ${theme.primaryWarningFontColor};`;
2618
+ hover = `background-color: ${theme.primaryHoverWarningBackgroundColor};`;
2619
+ active = `background-color: ${theme.primaryActiveWarningBackgroundColor};
2620
+ border-color: transparent;
2621
+ outline: none;
2622
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2623
+ disabled = `cursor: not-allowed;
2624
+ background-color: ${theme.primaryDisabledWarningBackgroundColor};
2625
+ color: ${theme.primaryDisabledWarningFontColor};`;
2626
+ break;
2627
+ case "success":
2628
+ enabled = `background-color: ${theme.primarySuccessBackgroundColor};
2629
+ color: ${theme.primarySuccessFontColor};`;
2630
+ hover = `background-color: ${theme.primaryHoverSuccessBackgroundColor};`;
2631
+ active = `background-color: ${theme.primaryActiveSuccessBackgroundColor};
2632
+ border-color: transparent;
2633
+ outline: none;
2634
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2635
+ disabled = `cursor: not-allowed;
2636
+ background-color: ${theme.primaryDisabledSuccessBackgroundColor};
2637
+ color: ${theme.primaryDisabledSuccessFontColor};`;
2638
+ break;
2639
+ case "info":
2640
+ enabled = `background-color: ${theme.primaryInfoBackgroundColor};
2641
+ color: ${theme.primaryInfoFontColor};`;
2642
+ hover = `background-color: ${theme.primaryHoverInfoBackgroundColor};`;
2643
+ active = `background-color: ${theme.primaryActiveInfoBackgroundColor};
2644
+ border-color: transparent;
2645
+ outline: none;
2646
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2647
+ disabled = `cursor: not-allowed;
2648
+ background-color: ${theme.primaryDisabledInfoBackgroundColor};
2649
+ color: ${theme.primaryDisabledInfoFontColor};`;
2650
+ break;
2651
+ default:
2652
+ enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
2653
+ color: ${theme.primaryDefaultFontColor};`;
2654
+ break;
2655
+ }
2656
+ return `${commonPrimaryStyles}
2657
+ ${enabled}
2658
+ &:hover {
2659
+ ${hover}
2660
+ }
2661
+ &:active {
2662
+ ${active}
2663
+ }
2664
+ &:focus {
2665
+ ${focus}
2666
+ }
2667
+ &:disabled {
2668
+ ${disabled}
2669
+ }`;
2670
+ case "secondary":
2671
+ switch (semantic) {
2672
+ case "default":
2673
+ enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
2674
+ color: ${theme.secondaryDefaultFontColor};
2675
+ border-color ${theme.secondaryDefaultBorderColor};`;
2676
+ hover = `background-color: ${theme.secondaryHoverDefaultBackgroundColor};
2677
+ color: ${theme.secondaryHoverDefaultFontColor};`;
2678
+ active = `background-color: ${theme.secondaryActiveDefaultBackgroundColor};
2679
+ color: ${theme.secondaryHoverDefaultFontColor};
2680
+ border-color: transparent;
2681
+ outline: none;
2682
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2683
+ focus = `border-color: transparent;`;
2684
+ disabled = `cursor: not-allowed;
2685
+ background-color: ${theme.secondaryDisabledDefaultBackgroundColor};
2686
+ color: ${theme.secondaryDisabledDefaultFontColor};
2687
+ border-color: ${theme.secondaryDisabledDefaultBorderColor};`;
2688
+ break;
2689
+ case "error":
2690
+ enabled = `background-color: ${theme.secondaryErrorBackgroundColor};
2691
+ color: ${theme.secondaryErrorFontColor};
2692
+ border-color ${theme.secondaryErrorBorderColor};`;
2693
+ hover = `background-color: ${theme.secondaryHoverErrorBackgroundColor};
2694
+ color: ${theme.secondaryHoverErrorFontColor};`;
2695
+ active = `background-color: ${theme.secondaryActiveErrorBackgroundColor};
2696
+ color: ${theme.secondaryHoverErrorFontColor};
2697
+ border-color: transparent;
2698
+ outline: none;
2699
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2700
+ focus = `border-color: transparent;`;
2701
+ disabled = `cursor: not-allowed;
2702
+ background-color: ${theme.secondaryDisabledErrorBackgroundColor};
2703
+ color: ${theme.secondaryDisabledErrorFontColor};
2704
+ border-color: ${theme.secondaryDisabledErrorBorderColor};`;
2705
+ break;
2706
+ case "warning":
2707
+ enabled = `background-color: ${theme.secondaryWarningBackgroundColor};
2708
+ color: ${theme.secondaryWarningFontColor};
2709
+ border-color ${theme.secondaryWarningBorderColor};`;
2710
+ hover = `background-color: ${theme.secondaryHoverWarningBackgroundColor};
2711
+ color: ${theme.secondaryHoverWarningFontColor};`;
2712
+ active = `background-color: ${theme.secondaryActiveWarningBackgroundColor};
2713
+ color: ${theme.secondaryHoverWarningFontColor};
2714
+ border-color: transparent;
2715
+ outline: none;
2716
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2717
+ focus = `border-color: transparent;`;
2718
+ disabled = `cursor: not-allowed;
2719
+ background-color: ${theme.secondaryDisabledWarningBackgroundColor};
2720
+ color: ${theme.secondaryDisabledWarningFontColor};
2721
+ border-color: ${theme.secondaryDisabledWarningBorderColor};`;
2722
+ break;
2723
+ case "success":
2724
+ enabled = `background-color: ${theme.secondarySuccessBackgroundColor};
2725
+ color: ${theme.secondarySuccessFontColor};
2726
+ border-color ${theme.secondarySuccessBorderColor};`;
2727
+ hover = `background-color: ${theme.secondaryHoverSuccessBackgroundColor};
2728
+ color: ${theme.secondaryHoverSuccessFontColor};`;
2729
+ active = `background-color: ${theme.secondaryActiveSuccessBackgroundColor};
2730
+ color: ${theme.secondaryHoverSuccessFontColor};
2731
+ border-color: transparent;
2732
+ outline: none;
2733
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2734
+ focus = `border-color: transparent;`;
2735
+ disabled = `cursor: not-allowed;
2736
+ background-color: ${theme.secondaryDisabledSuccessBackgroundColor};
2737
+ color: ${theme.secondaryDisabledSuccessFontColor};
2738
+ border-color: ${theme.secondaryDisabledSuccessBorderColor};`;
2739
+ break;
2740
+ case "info":
2741
+ enabled = `background-color: ${theme.secondaryInfoBackgroundColor};
2742
+ color: ${theme.secondaryInfoFontColor};
2743
+ border-color ${theme.secondaryInfoBorderColor};`;
2744
+ hover = `background-color: ${theme.secondaryHoverInfoBackgroundColor};
2745
+ color: ${theme.secondaryHoverInfoFontColor};`;
2746
+ active = `background-color: ${theme.secondaryActiveInfoBackgroundColor};
2747
+ color: ${theme.secondaryHoverInfoFontColor};
2748
+ border-color: transparent;
2749
+ outline: none;
2750
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2751
+ focus = `border-color: transparent;`;
2752
+ disabled = `cursor: not-allowed;
2753
+ background-color: ${theme.secondaryDisabledInfoBackgroundColor};
2754
+ color: ${theme.secondaryDisabledInfoFontColor};
2755
+ border-color: ${theme.secondaryDisabledInfoBorderColor};`;
2756
+ break;
2757
+ default:
2758
+ enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
2759
+ color: ${theme.secondaryDefaultFontColor};
2760
+ border-color ${theme.secondaryDefaultBorderColor};`;
2761
+ break;
2762
+ }
2763
+ return `${commonSecondaryStyles}
2764
+ ${enabled}
2765
+ &:hover {
2766
+ ${hover}
2767
+ }
2768
+ &:active {
2769
+ ${active}
2770
+ }
2771
+ &:focus {
2772
+ ${focus}
2773
+ }
2774
+ &:disabled {
2775
+ ${disabled}
2776
+ }`;
2777
+ case "tertiary":
2778
+ switch (semantic) {
2779
+ case "default":
2780
+ enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
2781
+ color: ${theme.tertiaryDefaultFontColor};`;
2782
+ hover = `background-color: ${theme.tertiaryHoverDefaultBackgroundColor};`;
2783
+ active = `background-color: ${theme.tertiaryActiveDefaultBackgroundColor};
2784
+ border-color: transparent;
2785
+ outline: none;
2786
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2787
+ disabled = `cursor: not-allowed;
2788
+ background-color: ${theme.tertiaryDisabledDefaultBackgroundColor};
2789
+ color: ${theme.tertiaryDisabledDefaultFontColor};`;
2790
+ break;
2791
+ case "error":
2792
+ enabled = `background-color: ${theme.tertiaryErrorBackgroundColor};
2793
+ color: ${theme.tertiaryErrorFontColor};`;
2794
+ hover = `background-color: ${theme.tertiaryHoverErrorBackgroundColor};`;
2795
+ active = `background-color: ${theme.tertiaryActiveErrorBackgroundColor};
2796
+ border-color: transparent;
2797
+ outline: none;
2798
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2799
+ disabled = `cursor: not-allowed;
2800
+ background-color: ${theme.tertiaryDisabledErrorBackgroundColor};
2801
+ color: ${theme.tertiaryDisabledErrorFontColor};`;
2802
+ break;
2803
+ case "warning":
2804
+ enabled = `background-color: ${theme.tertiaryWarningBackgroundColor};
2805
+ color: ${theme.tertiaryWarningFontColor};`;
2806
+ hover = `background-color: ${theme.tertiaryHoverWarningBackgroundColor};`;
2807
+ active = `background-color: ${theme.tertiaryActiveWarningBackgroundColor};
2808
+ border-color: transparent;
2809
+ outline: none;
2810
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2811
+ disabled = `cursor: not-allowed;
2812
+ background-color: ${theme.tertiaryDisabledWarningBackgroundColor};
2813
+ color: ${theme.tertiaryDisabledWarningFontColor};`;
2814
+ break;
2815
+ case "success":
2816
+ enabled = `background-color: ${theme.tertiarySuccessBackgroundColor};
2817
+ color: ${theme.tertiarySuccessFontColor};`;
2818
+ hover = `background-color: ${theme.tertiaryHoverSuccessBackgroundColor};`;
2819
+ active = `background-color: ${theme.tertiaryActiveSuccessBackgroundColor};
2820
+ border-color: transparent;
2821
+ outline: none;
2822
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2823
+ disabled = `cursor: not-allowed;
2824
+ background-color: ${theme.tertiaryDisabledSuccessBackgroundColor};
2825
+ color: ${theme.tertiaryDisabledSuccessFontColor};`;
2826
+ break;
2827
+ case "info":
2828
+ enabled = `background-color: ${theme.tertiaryInfoBackgroundColor};
2829
+ color: ${theme.tertiaryInfoFontColor};`;
2830
+ hover = `background-color: ${theme.tertiaryHoverInfoBackgroundColor};`;
2831
+ active = `background-color: ${theme.tertiaryActiveInfoBackgroundColor};
2832
+ border-color: transparent;
2833
+ outline: none;
2834
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2835
+ disabled = `cursor: not-allowed;
2836
+ background-color: ${theme.tertiaryDisabledInfoBackgroundColor};
2837
+ color: ${theme.tertiaryDisabledInfoFontColor};`;
2838
+ break;
2839
+ default:
2840
+ enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
2841
+ color: ${theme.tertiaryDefaultFontColor};`;
2842
+ break;
2843
+ }
2844
+ return `${commonTertiaryStyles}
2845
+ ${enabled}
2846
+ &:active {
2847
+ ${active}
2848
+ }
2849
+ &:hover {
2850
+ ${hover}
2851
+ }
2852
+ &:focus {
2853
+ ${focus}
2854
+ }
2855
+ &:disabled {
2856
+ ${disabled}
2857
+ }`;
2463
2858
  }
2464
- `;
2859
+ };
2465
2860
  var Button = styled7.button`
2466
2861
  display: inline-flex;
2467
2862
  flex-direction: ${(props) => props.iconPosition === "after" ? "row" : "row-reverse"};
2468
2863
  gap: 0.5rem;
2469
2864
  align-items: center;
2470
2865
  justify-content: center;
2866
+ height: ${(props) => getHeight(props.size?.height && props.size?.height) + "rem"};
2471
2867
  width: ${(props) => calculateWidth3(props.margin, props.size)};
2472
- height: 40px;
2473
2868
  margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
2474
2869
  margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
2475
2870
  margin-right: ${(props) => props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
2476
2871
  margin-bottom: ${(props) => props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
2477
2872
  margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
2478
- padding-top: ${(props) => props.theme.paddingTop};
2479
- padding-bottom: ${(props) => props.theme.paddingBottom};
2480
- padding-left: ${(props) => props.hasIcon && !props.hasLabel ? props.theme.paddingLeft : `calc(${props.theme.paddingLeft} + 8px)`};
2481
- padding-right: ${(props) => props.hasIcon && !props.hasLabel ? props.theme.paddingRight : `calc(${props.theme.paddingRight} + 8px)`};
2873
+ padding-top: ${(props) => props.hasIcon && !props.hasLabel ? props.size.height === "small" ? props.theme.paddingSmallOnlyIconTop : props.size.height === "medium" ? props.theme.paddingMediumOnlyIconTop : props.theme.paddingLargeOnlyIconTop : props.size.height === "small" ? props.theme.paddingSmallTop : props.size.height === "medium" ? props.theme.paddingMediumTop : props.theme.paddingLargeTop};
2874
+ padding-bottom: ${(props) => props.hasIcon && !props.hasLabel ? props.size.height === "small" ? props.theme.paddingSmallOnlyIconBottom : props.size.height === "medium" ? props.theme.paddingMediumOnlyIconBottom : props.theme.paddingLargeOnlyIconBottom : props.size.height === "small" ? props.theme.paddingSmallBottom : props.size.height === "medium" ? props.theme.paddingMediumBottom : props.theme.paddingLargeBottom};
2875
+ padding-left: ${(props) => props.hasIcon && !props.hasLabel ? props.size.height === "small" ? props.theme.paddingSmallOnlyIconLeft : props.size.height === "medium" ? props.theme.paddingMediumOnlyIconLeft : props.theme.paddingLargeOnlyIconLeft : props.size.height === "small" ? props.theme.paddingSmallLeft : props.size.height === "medium" ? props.theme.paddingMediumLeft : props.theme.paddingLargeLeft};
2876
+ padding-right: ${(props) => props.hasIcon && !props.hasLabel ? props.size.height === "small" ? props.theme.paddingSmallOnlyIconRight : props.size.height === "medium" ? props.theme.paddingMediumOnlyIconRight : props.theme.paddingLargeOnlyIconRight : props.size.height === "small" ? props.theme.paddingSmallRight : props.size.height === "medium" ? props.theme.paddingMediumRight : props.theme.paddingLargeRight};
2877
+
2482
2878
  box-shadow: 0 0 0 2px transparent;
2483
2879
  font-family: ${(props) => props.theme.fontFamily};
2484
2880
  font-size: ${(props) => props.theme.fontSize};
@@ -2491,8 +2887,7 @@ var Button = styled7.button`
2491
2887
  box-shadow: 0 0 0 2px ${(props) => props.theme.focusBorderColor};
2492
2888
  }
2493
2889
 
2494
- ${(props) => getButtonStyles(props.$mode, props.theme)}
2495
- ${(props) => getButtonStates(props.disabled, props.$mode, props.theme)}
2890
+ ${(props) => getButtonStyles(props.$mode, props.semantic, props.theme, props.size)};
2496
2891
  `;
2497
2892
  var LabelContainer = styled7.span`
2498
2893
  line-height: ${(props) => props.theme.labelFontLineHeight};
@@ -2504,11 +2899,10 @@ var LabelContainer = styled7.span`
2504
2899
  `;
2505
2900
  var IconContainer3 = styled7.div`
2506
2901
  display: flex;
2507
- font-size: 24px;
2508
-
2902
+ font-size: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2509
2903
  svg {
2510
- height: 24px;
2511
- width: 24px;
2904
+ height: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2905
+ width: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2512
2906
  }
2513
2907
  `;
2514
2908
  var Button_default = DxcButton;
@@ -2530,14 +2924,14 @@ var DxcBox = ({
2530
2924
  const colorsTheme = useTheme_default();
2531
2925
  return /* @__PURE__ */ jsx8(ThemeProvider4, { theme: colorsTheme.box, children: /* @__PURE__ */ jsx8(Box, { shadowDepth, display, margin, size, children }) });
2532
2926
  };
2533
- var sizes3 = {
2927
+ var sizes2 = {
2534
2928
  small: "48px",
2535
2929
  medium: "240px",
2536
2930
  large: "480px",
2537
2931
  fillParent: "100%",
2538
2932
  fitContent: "fit-content"
2539
2933
  };
2540
- var calculateWidth4 = (margin, size) => size === "fillParent" ? `calc(${sizes3[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes3[size];
2934
+ var calculateWidth4 = (margin, size) => size === "fillParent" ? `calc(${sizes2[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes2[size];
2541
2935
  var Box = styled8.div`
2542
2936
  display: ${(props) => props.display};
2543
2937
  border-radius: ${(props) => props.theme.borderRadius};
@@ -2733,14 +3127,14 @@ var DxcCheckbox = forwardRef(
2733
3127
  ) });
2734
3128
  }
2735
3129
  );
2736
- var sizes4 = {
3130
+ var sizes3 = {
2737
3131
  small: "120px",
2738
3132
  medium: "240px",
2739
3133
  large: "480px",
2740
3134
  fillParent: "100%",
2741
3135
  fitContent: "fit-content"
2742
3136
  };
2743
- var calculateWidth5 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes4[size];
3137
+ var calculateWidth5 = (margin, size) => size === "fillParent" ? `calc(${sizes3[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes3[size];
2744
3138
  var getDisabledColor = (theme, element) => {
2745
3139
  switch (element) {
2746
3140
  case "check":
@@ -3415,14 +3809,14 @@ var DxcDropdown = ({
3415
3809
  }
3416
3810
  ) });
3417
3811
  };
3418
- var sizes5 = {
3812
+ var sizes4 = {
3419
3813
  small: "60px",
3420
3814
  medium: "240px",
3421
3815
  large: "480px",
3422
3816
  fillParent: "100%",
3423
3817
  fitContent: "fit-content"
3424
3818
  };
3425
- var calculateWidth6 = (margin, size) => size === "fillParent" ? `calc(${sizes5[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes5[size];
3819
+ var calculateWidth6 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes4[size];
3426
3820
  var DropdownContainer = styled14.div`
3427
3821
  width: ${(props) => calculateWidth6(props.margin, props.size)};
3428
3822
  margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -3807,14 +4201,14 @@ var Suggestions_default = memo4(Suggestions);
3807
4201
 
3808
4202
  // src/text-input/TextInput.tsx
3809
4203
  import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
3810
- var sizes6 = {
4204
+ var sizes5 = {
3811
4205
  small: "240px",
3812
4206
  medium: "360px",
3813
4207
  large: "480px",
3814
4208
  fillParent: "100%"
3815
4209
  };
3816
4210
  var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx20(Fragment4, { children: condition ? wrapper(children) : children });
3817
- var calculateWidth7 = (margin, size) => size === "fillParent" ? `calc(${sizes6[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes6[size];
4211
+ var calculateWidth7 = (margin, size) => size === "fillParent" ? `calc(${sizes5[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes5[size];
3818
4212
  var makeCancelable = (promise) => {
3819
4213
  let hasCanceled_ = false;
3820
4214
  const wrappedPromise = new Promise((resolve, reject) => {
@@ -4482,12 +4876,12 @@ var DxcSlider = forwardRef5(
4482
4876
  ] }) });
4483
4877
  }
4484
4878
  );
4485
- var sizes7 = {
4879
+ var sizes6 = {
4486
4880
  medium: "360px",
4487
4881
  large: "480px",
4488
4882
  fillParent: "100%"
4489
4883
  };
4490
- var calculateWidth8 = (margin, size) => size === "fillParent" ? `calc(${sizes7[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes7[size];
4884
+ var calculateWidth8 = (margin, size) => size === "fillParent" ? `calc(${sizes6[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes6[size];
4491
4885
  var getChromeStyles = () => `
4492
4886
  width: 100%;
4493
4887
  margin-right: 4px;`;
@@ -4754,14 +5148,14 @@ var DxcSwitch = forwardRef6(
4754
5148
  ) });
4755
5149
  }
4756
5150
  );
4757
- var sizes8 = {
5151
+ var sizes7 = {
4758
5152
  small: "60px",
4759
5153
  medium: "240px",
4760
5154
  large: "480px",
4761
5155
  fillParent: "100%",
4762
5156
  fitContent: "fit-content"
4763
5157
  };
4764
- var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes8[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes8[size];
5158
+ var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes7[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes7[size];
4765
5159
  var getDisabledColor2 = (theme, element, subElement) => {
4766
5160
  switch (element) {
4767
5161
  case "track":
@@ -6108,14 +6502,14 @@ var DxcTag = ({
6108
6502
  }
6109
6503
  ) });
6110
6504
  };
6111
- var sizes9 = {
6505
+ var sizes8 = {
6112
6506
  small: "42px",
6113
6507
  medium: "240px",
6114
6508
  large: "480px",
6115
6509
  fillParent: "100%",
6116
6510
  fitContent: "fit-content"
6117
6511
  };
6118
- var calculateWidth11 = (margin, size) => size === "fillParent" ? `calc(${sizes9[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes9[size];
6512
+ var calculateWidth11 = (margin, size) => size === "fillParent" ? `calc(${sizes8[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes8[size];
6119
6513
  var StyledDxcTag = styled28.div`
6120
6514
  display: inline-flex;
6121
6515
  cursor: ${({ hasAction }) => hasAction && "pointer" || "unset"};
@@ -6852,13 +7246,13 @@ var DxcSelect = forwardRef8(
6852
7246
  ] }) });
6853
7247
  }
6854
7248
  );
6855
- var sizes10 = {
7249
+ var sizes9 = {
6856
7250
  small: "240px",
6857
7251
  medium: "360px",
6858
7252
  large: "480px",
6859
7253
  fillParent: "100%"
6860
7254
  };
6861
- var calculateWidth12 = (margin, size) => size === "fillParent" ? `calc(${sizes10[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes10[size];
7255
+ var calculateWidth12 = (margin, size) => size === "fillParent" ? `calc(${sizes9[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes9[size];
6862
7256
  var SelectContainer = styled31.div`
6863
7257
  box-sizing: border-box;
6864
7258
  display: flex;
@@ -10067,13 +10461,13 @@ var DxcDateInput = forwardRef12(
10067
10461
  ] }) });
10068
10462
  }
10069
10463
  );
10070
- var sizes11 = {
10464
+ var sizes10 = {
10071
10465
  small: "240px",
10072
10466
  medium: "360px",
10073
10467
  large: "480px",
10074
10468
  fillParent: "100%"
10075
10469
  };
10076
- var calculateWidth16 = (margin, size) => size === "fillParent" ? `calc(${sizes11[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes11[size];
10470
+ var calculateWidth16 = (margin, size) => size === "fillParent" ? `calc(${sizes10[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes10[size];
10077
10471
  var DateInputContainer = styled49.div`
10078
10472
  ${(props) => props.size == "fillParent" && "width: 100%;"}
10079
10473
  display: flex;
@@ -10303,13 +10697,13 @@ var DxcTextarea = forwardRef14(
10303
10697
  ] }) });
10304
10698
  }
10305
10699
  );
10306
- var sizes12 = {
10700
+ var sizes11 = {
10307
10701
  small: "240px",
10308
10702
  medium: "360px",
10309
10703
  large: "480px",
10310
10704
  fillParent: "100%"
10311
10705
  };
10312
- var calculateWidth17 = (margin, size) => size === "fillParent" ? `calc(${sizes12[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes12[size];
10706
+ var calculateWidth17 = (margin, size) => size === "fillParent" ? `calc(${sizes11[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes11[size];
10313
10707
  var TextareaContainer = styled51.div`
10314
10708
  display: flex;
10315
10709
  flex-direction: column;
@@ -10663,7 +11057,7 @@ var DxcFileInput = forwardRef15(
10663
11057
  label: buttonLabel ?? (multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault),
10664
11058
  onClick: handleClick,
10665
11059
  disabled,
10666
- size: "fitContent",
11060
+ size: { width: "fitContent" },
10667
11061
  tabIndex
10668
11062
  }
10669
11063
  ),
@@ -10712,7 +11106,7 @@ var DxcFileInput = forwardRef15(
10712
11106
  label: buttonLabel ?? translatedLabels.fileInput.dropAreaButtonLabelDefault,
10713
11107
  onClick: handleClick,
10714
11108
  disabled,
10715
- size: "fitContent"
11109
+ size: { width: "fitContent" }
10716
11110
  }
10717
11111
  ),
10718
11112
  mode === "dropzone" ? /* @__PURE__ */ jsx58(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ jsx58(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
@@ -11640,7 +12034,7 @@ var DxcImage = ({
11640
12034
  lazyLoading = false,
11641
12035
  src,
11642
12036
  srcSet,
11643
- sizes: sizes13,
12037
+ sizes: sizes12,
11644
12038
  width,
11645
12039
  height,
11646
12040
  objectFit,
@@ -11678,7 +12072,7 @@ var DxcImage = ({
11678
12072
  onError,
11679
12073
  src,
11680
12074
  srcSet,
11681
- sizes: sizes13,
12075
+ sizes: sizes12,
11682
12076
  style: {
11683
12077
  objectFit,
11684
12078
  objectPosition,