@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.js CHANGED
@@ -376,50 +376,160 @@ var componentTokens = {
376
376
  button: {
377
377
  labelFontLineHeight: coreTokens_default.type_leading_normal,
378
378
  labelLetterSpacing: coreTokens_default.type_spacing_wide_01,
379
- paddingLeft: coreTokens_default.spacing_8,
380
- paddingRight: coreTokens_default.spacing_8,
381
- paddingTop: coreTokens_default.spacing_8,
382
- paddingBottom: coreTokens_default.spacing_8,
383
- focusBorderColor: coreTokens_default.color_blue_600,
384
- primaryBackgroundColor: coreTokens_default.color_purple_700,
385
- primaryFontColor: coreTokens_default.color_white,
386
- primaryHoverBackgroundColor: coreTokens_default.color_purple_800,
387
- primaryActiveBackgroundColor: coreTokens_default.color_purple_900,
388
- primaryDisabledBackgroundColor: coreTokens_default.color_grey_100,
389
- primaryDisabledFontColor: coreTokens_default.color_grey_500,
379
+ paddingSmallTop: coreTokens_default.spacing_0,
380
+ paddingSmallLeft: coreTokens_default.spacing_8,
381
+ paddingSmallBottom: coreTokens_default.spacing_0,
382
+ paddingSmallRight: coreTokens_default.spacing_8,
383
+ paddingSmallOnlyIconTop: coreTokens_default.spacing_0,
384
+ paddingSmallOnlyIconLeft: coreTokens_default.spacing_4,
385
+ paddingSmallOnlyIconBottom: coreTokens_default.spacing_0,
386
+ paddingSmallOnlyIconRight: coreTokens_default.spacing_4,
387
+ paddingMediumTop: coreTokens_default.spacing_0,
388
+ paddingMediumLeft: coreTokens_default.spacing_8,
389
+ paddingMediumBottom: coreTokens_default.spacing_0,
390
+ paddingMediumRight: coreTokens_default.spacing_8,
391
+ paddingMediumOnlyIconTop: coreTokens_default.spacing_0,
392
+ paddingMediumOnlyIconLeft: coreTokens_default.spacing_8,
393
+ paddingMediumOnlyIconBottom: coreTokens_default.spacing_0,
394
+ paddingMediumOnlyIconRight: coreTokens_default.spacing_8,
395
+ paddingLargeTop: coreTokens_default.spacing_0,
396
+ paddingLargeLeft: coreTokens_default.spacing_16,
397
+ paddingLargeBottom: coreTokens_default.spacing_0,
398
+ paddingLargeRight: coreTokens_default.spacing_16,
399
+ paddingLargeOnlyIconTop: coreTokens_default.spacing_0,
400
+ paddingLargeOnlyIconLeft: coreTokens_default.spacing_8,
401
+ paddingLargeOnlyIconBottom: coreTokens_default.spacing_0,
402
+ paddingLargeOnlyIconRight: coreTokens_default.spacing_8,
403
+ focusBorderColor: coreTokens_default.color_blue_500,
404
+ primaryDefaultBackgroundColor: coreTokens_default.color_purple_700,
405
+ primaryErrorBackgroundColor: coreTokens_default.color_red_700,
406
+ primaryWarningBackgroundColor: coreTokens_default.color_orange_700,
407
+ primarySuccessBackgroundColor: coreTokens_default.color_green_700,
408
+ primaryInfoBackgroundColor: coreTokens_default.color_blue_700,
409
+ primaryDefaultFontColor: coreTokens_default.color_white,
410
+ primaryErrorFontColor: coreTokens_default.color_white,
411
+ primaryWarningFontColor: coreTokens_default.color_white,
412
+ primarySuccessFontColor: coreTokens_default.color_white,
413
+ primaryInfoFontColor: coreTokens_default.color_white,
414
+ primaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_800,
415
+ primaryHoverErrorBackgroundColor: coreTokens_default.color_red_800,
416
+ primaryHoverWarningBackgroundColor: coreTokens_default.color_orange_800,
417
+ primaryHoverSuccessBackgroundColor: coreTokens_default.color_green_800,
418
+ primaryHoverInfoBackgroundColor: coreTokens_default.color_blue_800,
419
+ primaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_900,
420
+ primaryActiveErrorBackgroundColor: coreTokens_default.color_red_900,
421
+ primaryActiveWarningBackgroundColor: coreTokens_default.color_orange_900,
422
+ primaryActiveSuccessBackgroundColor: coreTokens_default.color_green_900,
423
+ primaryActiveInfoBackgroundColor: coreTokens_default.color_blue_900,
424
+ primaryDisabledDefaultBackgroundColor: coreTokens_default.color_purple_100,
425
+ primaryDisabledErrorBackgroundColor: coreTokens_default.color_red_100,
426
+ primaryDisabledWarningBackgroundColor: coreTokens_default.color_orange_100,
427
+ primaryDisabledSuccessBackgroundColor: coreTokens_default.color_green_100,
428
+ primaryDisabledInfoBackgroundColor: coreTokens_default.color_blue_100,
429
+ primaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
430
+ primaryDisabledErrorFontColor: coreTokens_default.color_red_300,
431
+ primaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
432
+ primaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
433
+ primaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
390
434
  primaryBorderThickness: coreTokens_default.border_width_0,
391
435
  primaryBorderStyle: coreTokens_default.border_none,
392
436
  primaryBorderRadius: coreTokens_default.border_radius_medium,
393
437
  primaryFontFamily: coreTokens_default.type_sans,
394
- primaryFontSize: coreTokens_default.type_scale_03,
395
- primaryFontWeight: coreTokens_default.type_regular,
396
- secondaryBackgroundColor: coreTokens_default.color_transparent,
397
- secondaryFontColor: coreTokens_default.color_purple_700,
398
- secondaryHoverFontColor: coreTokens_default.color_white,
399
- secondaryBorderColor: coreTokens_default.color_purple_700,
400
- secondaryHoverBackgroundColor: coreTokens_default.color_purple_700,
401
- secondaryActiveBackgroundColor: coreTokens_default.color_purple_900,
402
- secondaryDisabledBackgroundColor: coreTokens_default.color_transparent,
403
- secondaryDisabledFontColor: coreTokens_default.color_grey_500,
404
- secondaryDisabledBorderColor: coreTokens_default.color_grey_500,
438
+ primarySmallFontSize: coreTokens_default.type_scale_02,
439
+ primaryMediumFontSize: coreTokens_default.type_scale_02,
440
+ primaryLargeFontSize: coreTokens_default.type_scale_03,
441
+ primaryFontWeight: coreTokens_default.type_semibold,
442
+ secondaryDefaultBackgroundColor: coreTokens_default.color_transparent,
443
+ secondaryErrorBackgroundColor: coreTokens_default.color_transparent,
444
+ secondaryWarningBackgroundColor: coreTokens_default.color_transparent,
445
+ secondarySuccessBackgroundColor: coreTokens_default.color_transparent,
446
+ secondaryInfoBackgroundColor: coreTokens_default.color_transparent,
447
+ secondaryDefaultFontColor: coreTokens_default.color_purple_700,
448
+ secondaryErrorFontColor: coreTokens_default.color_red_700,
449
+ secondaryWarningFontColor: coreTokens_default.color_orange_700,
450
+ secondarySuccessFontColor: coreTokens_default.color_green_700,
451
+ secondaryInfoFontColor: coreTokens_default.color_blue_700,
452
+ secondaryDefaultBorderColor: coreTokens_default.color_purple_700,
453
+ secondaryErrorBorderColor: coreTokens_default.color_red_700,
454
+ secondaryWarningBorderColor: coreTokens_default.color_orange_700,
455
+ secondarySuccessBorderColor: coreTokens_default.color_green_700,
456
+ secondaryInfoBorderColor: coreTokens_default.color_blue_700,
457
+ secondaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_700,
458
+ secondaryHoverErrorBackgroundColor: coreTokens_default.color_red_700,
459
+ secondaryHoverWarningBackgroundColor: coreTokens_default.color_orange_700,
460
+ secondaryHoverSuccessBackgroundColor: coreTokens_default.color_green_700,
461
+ secondaryHoverInfoBackgroundColor: coreTokens_default.color_blue_700,
462
+ secondaryHoverDefaultFontColor: coreTokens_default.color_white,
463
+ secondaryHoverErrorFontColor: coreTokens_default.color_white,
464
+ secondaryHoverWarningFontColor: coreTokens_default.color_white,
465
+ secondaryHoverSuccessFontColor: coreTokens_default.color_white,
466
+ secondaryHoverInfoFontColor: coreTokens_default.color_white,
467
+ secondaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_800,
468
+ secondaryActiveErrorBackgroundColor: coreTokens_default.color_red_800,
469
+ secondaryActiveWarningBackgroundColor: coreTokens_default.color_orange_800,
470
+ secondaryActiveSuccessBackgroundColor: coreTokens_default.color_green_800,
471
+ secondaryActiveInfoBackgroundColor: coreTokens_default.color_blue_800,
472
+ secondaryDisabledDefaultBackgroundColor: coreTokens_default.color_transparent,
473
+ secondaryDisabledErrorBackgroundColor: coreTokens_default.color_transparent,
474
+ secondaryDisabledWarningBackgroundColor: coreTokens_default.color_transparent,
475
+ secondaryDisabledSuccessBackgroundColor: coreTokens_default.color_transparent,
476
+ secondaryDisabledInfoBackgroundColor: coreTokens_default.color_transparent,
477
+ secondaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
478
+ secondaryDisabledErrorFontColor: coreTokens_default.color_red_300,
479
+ secondaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
480
+ secondaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
481
+ secondaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
482
+ secondaryDisabledDefaultBorderColor: coreTokens_default.color_purple_300,
483
+ secondaryDisabledErrorBorderColor: coreTokens_default.color_red_300,
484
+ secondaryDisabledWarningBorderColor: coreTokens_default.color_orange_300,
485
+ secondaryDisabledSuccessBorderColor: coreTokens_default.color_green_300,
486
+ secondaryDisabledInfoBorderColor: coreTokens_default.color_blue_300,
405
487
  secondaryBorderThickness: coreTokens_default.border_width_1,
406
488
  secondaryBorderStyle: coreTokens_default.border_solid,
407
489
  secondaryBorderRadius: coreTokens_default.border_radius_medium,
408
490
  secondaryFontFamily: coreTokens_default.type_sans,
409
- secondaryFontSize: coreTokens_default.type_scale_03,
410
- secondaryFontWeight: coreTokens_default.type_regular,
411
- textBackgroundColor: coreTokens_default.color_transparent,
412
- textFontColor: coreTokens_default.color_purple_700,
413
- textHoverBackgroundColor: coreTokens_default.color_purple_100,
414
- textActiveBackgroundColor: coreTokens_default.color_purple_200,
415
- textDisabledBackgroundColor: coreTokens_default.color_transparent,
416
- textDisabledFontColor: coreTokens_default.color_grey_500,
417
- textBorderThickness: coreTokens_default.border_width_0,
418
- textBorderStyle: coreTokens_default.border_none,
419
- textBorderRadius: coreTokens_default.border_radius_medium,
420
- textFontFamily: coreTokens_default.type_sans,
421
- textFontSize: coreTokens_default.type_scale_03,
422
- textFontWeight: coreTokens_default.type_regular
491
+ secondarySmallFontSize: coreTokens_default.type_scale_02,
492
+ secondaryMediumFontSize: coreTokens_default.type_scale_02,
493
+ secondaryLargeFontSize: coreTokens_default.type_scale_03,
494
+ secondaryFontWeight: coreTokens_default.type_semibold,
495
+ tertiaryDefaultBackgroundColor: coreTokens_default.color_transparent,
496
+ tertiaryErrorBackgroundColor: coreTokens_default.color_transparent,
497
+ tertiaryWarningBackgroundColor: coreTokens_default.color_transparent,
498
+ tertiarySuccessBackgroundColor: coreTokens_default.color_transparent,
499
+ tertiaryInfoBackgroundColor: coreTokens_default.color_transparent,
500
+ tertiaryDefaultFontColor: coreTokens_default.color_purple_700,
501
+ tertiaryErrorFontColor: coreTokens_default.color_red_700,
502
+ tertiaryWarningFontColor: coreTokens_default.color_orange_700,
503
+ tertiarySuccessFontColor: coreTokens_default.color_green_700,
504
+ tertiaryInfoFontColor: coreTokens_default.color_blue_700,
505
+ tertiaryHoverDefaultBackgroundColor: coreTokens_default.color_purple_100,
506
+ tertiaryHoverErrorBackgroundColor: coreTokens_default.color_red_100,
507
+ tertiaryHoverWarningBackgroundColor: coreTokens_default.color_orange_100,
508
+ tertiaryHoverSuccessBackgroundColor: coreTokens_default.color_green_100,
509
+ tertiaryHoverInfoBackgroundColor: coreTokens_default.color_blue_100,
510
+ tertiaryActiveDefaultBackgroundColor: coreTokens_default.color_purple_200,
511
+ tertiaryActiveErrorBackgroundColor: coreTokens_default.color_red_200,
512
+ tertiaryActiveWarningBackgroundColor: coreTokens_default.color_orange_200,
513
+ tertiaryActiveSuccessBackgroundColor: coreTokens_default.color_green_200,
514
+ tertiaryActiveInfoBackgroundColor: coreTokens_default.color_blue_200,
515
+ tertiaryDisabledDefaultBackgroundColor: coreTokens_default.color_transparent,
516
+ tertiaryDisabledErrorBackgroundColor: coreTokens_default.color_transparent,
517
+ tertiaryDisabledWarningBackgroundColor: coreTokens_default.color_transparent,
518
+ tertiaryDisabledSuccessBackgroundColor: coreTokens_default.color_transparent,
519
+ tertiaryDisabledInfoBackgroundColor: coreTokens_default.color_transparent,
520
+ tertiaryDisabledDefaultFontColor: coreTokens_default.color_purple_300,
521
+ tertiaryDisabledErrorFontColor: coreTokens_default.color_red_300,
522
+ tertiaryDisabledWarningFontColor: coreTokens_default.color_orange_300,
523
+ tertiaryDisabledSuccessFontColor: coreTokens_default.color_green_300,
524
+ tertiaryDisabledInfoFontColor: coreTokens_default.color_blue_300,
525
+ tertiaryBorderThickness: coreTokens_default.border_width_0,
526
+ tertiaryBorderStyle: coreTokens_default.border_none,
527
+ tertiaryBorderRadius: coreTokens_default.border_radius_medium,
528
+ tertiaryFontFamily: coreTokens_default.type_sans,
529
+ tertiarySmallFontSize: coreTokens_default.type_scale_02,
530
+ tertiaryMediumFontSize: coreTokens_default.type_scale_02,
531
+ tertiaryLargeFontSize: coreTokens_default.type_scale_03,
532
+ tertiaryFontWeight: coreTokens_default.type_semibold
423
533
  },
424
534
  card: {
425
535
  height: "220px",
@@ -1626,18 +1736,23 @@ var parseTheme = (theme) => {
1626
1736
  const boxTokens = componentTokensCopy.box;
1627
1737
  boxTokens.backgroundColor = theme?.box?.baseColor ?? boxTokens.backgroundColor;
1628
1738
  const buttonTokens = componentTokensCopy.button;
1629
- buttonTokens.primaryFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryFontColor;
1630
- buttonTokens.primaryBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryBackgroundColor;
1631
- buttonTokens.secondaryFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryFontColor;
1632
- buttonTokens.secondaryHoverFontColor = theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverFontColor;
1633
- buttonTokens.secondaryBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryBorderColor;
1634
- buttonTokens.secondaryHoverBackgroundColor = theme?.button?.baseColor ?? buttonTokens.secondaryHoverBackgroundColor;
1635
- buttonTokens.textFontColor = theme?.button?.baseColor ?? buttonTokens.textFontColor;
1636
- buttonTokens.primaryHoverBackgroundColor = subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverBackgroundColor;
1637
- buttonTokens.primaryActiveBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveBackgroundColor;
1638
- buttonTokens.secondaryActiveBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveBackgroundColor;
1639
- buttonTokens.textHoverBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.textHoverBackgroundColor;
1640
- buttonTokens.textActiveBackgroundColor = addLightness(52, theme?.button?.baseColor) ?? buttonTokens.textActiveBackgroundColor;
1739
+ buttonTokens.primaryDefaultFontColor = theme?.button?.primaryFontColor ?? buttonTokens.primaryDefaultFontColor;
1740
+ buttonTokens.primaryDefaultBackgroundColor = theme?.button?.baseColor ?? buttonTokens.primaryDefaultBackgroundColor;
1741
+ buttonTokens.secondaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultFontColor;
1742
+ buttonTokens.secondaryHoverDefaultFontColor = theme?.button?.secondaryHoverFontColor ?? buttonTokens.secondaryHoverDefaultFontColor;
1743
+ buttonTokens.secondaryDefaultBorderColor = theme?.button?.baseColor ?? buttonTokens.secondaryDefaultBorderColor;
1744
+ buttonTokens.secondaryHoverDefaultBackgroundColor = theme?.button?.baseColor ?? buttonTokens.secondaryHoverDefaultBackgroundColor;
1745
+ buttonTokens.tertiaryDefaultFontColor = theme?.button?.baseColor ?? buttonTokens.tertiaryDefaultFontColor;
1746
+ buttonTokens.primaryHoverDefaultBackgroundColor = subLightness(8, theme?.button?.baseColor) ?? buttonTokens.primaryHoverDefaultBackgroundColor;
1747
+ buttonTokens.primaryActiveDefaultBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.primaryActiveDefaultBackgroundColor;
1748
+ buttonTokens.secondaryActiveDefaultBackgroundColor = subLightness(18, theme?.button?.baseColor) ?? buttonTokens.secondaryActiveDefaultBackgroundColor;
1749
+ buttonTokens.tertiaryHoverDefaultBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.tertiaryHoverDefaultBackgroundColor;
1750
+ buttonTokens.tertiaryActiveDefaultBackgroundColor = addLightness(52, theme?.button?.baseColor) ?? buttonTokens.tertiaryActiveDefaultBackgroundColor;
1751
+ buttonTokens.primaryDisabledDefaultBackgroundColor = addLightness(57, theme?.button?.baseColor) ?? buttonTokens.primaryDisabledDefaultBackgroundColor;
1752
+ buttonTokens.primaryDisabledDefaultFontColor = addLightness(42, theme?.button?.primaryFontColor) ?? buttonTokens.primaryDisabledDefaultFontColor;
1753
+ buttonTokens.secondaryDisabledDefaultBorderColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultBorderColor;
1754
+ buttonTokens.secondaryDisabledDefaultFontColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.secondaryDisabledDefaultFontColor;
1755
+ buttonTokens.tertiaryDisabledDefaultFontColor = addLightness(42, theme?.button?.baseColor) ?? buttonTokens.tertiaryDisabledDefaultFontColor;
1641
1756
  const checkboxTokens = componentTokensCopy.checkbox;
1642
1757
  checkboxTokens.backgroundColorChecked = theme?.checkbox?.baseColor ?? checkboxTokens.backgroundColorChecked;
1643
1758
  checkboxTokens.borderColor = theme?.checkbox?.baseColor ?? checkboxTokens.borderColor;
@@ -2473,6 +2588,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
2473
2588
  var DxcButton = ({
2474
2589
  label = "",
2475
2590
  mode = "primary",
2591
+ semantic = "default",
2476
2592
  disabled = false,
2477
2593
  iconPosition = "before",
2478
2594
  title,
@@ -2481,7 +2597,7 @@ var DxcButton = ({
2481
2597
  onClick = () => {
2482
2598
  },
2483
2599
  margin,
2484
- size = "fitContent",
2600
+ size = { height: "large", width: "fitContent" },
2485
2601
  tabIndex = 0
2486
2602
  }) => {
2487
2603
  const colorsTheme = useTheme_default();
@@ -2495,77 +2611,357 @@ var DxcButton = ({
2495
2611
  },
2496
2612
  tabIndex: disabled ? -1 : tabIndex,
2497
2613
  type,
2498
- $mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
2614
+ $mode: mode === "primary" || mode === "secondary" || mode === "tertiary" ? mode : "primary",
2499
2615
  hasLabel: label ? true : false,
2500
2616
  hasIcon: icon ? true : false,
2501
2617
  iconPosition,
2502
2618
  size,
2503
2619
  margin,
2620
+ semantic,
2504
2621
  children: [
2505
2622
  label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LabelContainer, { children: label }),
2506
- icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconContainer3, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { icon }) : icon })
2623
+ icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconContainer3, { size, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { icon }) : icon })
2507
2624
  ]
2508
2625
  }
2509
2626
  ) }) });
2510
2627
  };
2511
- var sizes2 = {
2628
+ var widths = {
2512
2629
  small: "42px",
2513
2630
  medium: "120px",
2514
2631
  large: "240px",
2515
2632
  fillParent: "100%",
2516
2633
  fitContent: "fit-content"
2517
2634
  };
2518
- var calculateWidth3 = (margin, size) => size === "fillParent" ? `calc(${sizes2[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes2[size];
2519
- var getButtonStyles = ($mode, theme) => `
2520
- border-color: ${$mode === "secondary" ? theme.secondaryBorderColor : ""};
2521
- border-radius: ${$mode === "primary" ? theme.primaryBorderRadius : $mode === "secondary" ? theme.secondaryBorderRadius : theme.textBorderRadius};
2522
- border-width: ${$mode === "primary" ? theme.primaryBorderThickness : $mode === "secondary" ? theme.secondaryBorderThickness : theme.textBorderThickness};
2523
- border-style: ${$mode === "primary" ? theme.primaryBorderStyle : $mode === "secondary" ? theme.secondaryBorderStyle : theme.textBorderStyle};
2524
- font-family: ${$mode === "primary" ? theme.primaryFontFamily : $mode === "secondary" ? theme.secondaryFontFamily : theme.textFontFamily};
2525
- font-size: ${$mode === "primary" ? theme.primaryFontSize : $mode === "secondary" ? theme.secondaryFontSize : theme.textFontSize};
2526
- font-weight: ${$mode === "primary" ? theme.primaryFontWeight : $mode === "secondary" ? theme.secondaryFontWeight : theme.textFontWeight};
2527
- background-color: ${$mode === "primary" ? theme.primaryBackgroundColor : $mode === "secondary" ? theme.secondaryBackgroundColor : theme.textBackgroundColor};
2528
- color: ${$mode === "primary" ? theme.primaryFontColor : $mode === "secondary" ? theme.secondaryFontColor : theme.textFontColor};
2529
- `;
2530
- var getButtonStates = (disabled, $mode, theme) => `
2531
- &:hover {
2532
- background-color: ${$mode === "primary" ? theme.primaryHoverBackgroundColor : $mode === "secondary" ? theme.secondaryHoverBackgroundColor : theme.textHoverBackgroundColor};
2533
- color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""};
2534
- }
2535
- &:focus {
2536
- border-color: ${$mode === "secondary" ? "transparent" : ""};
2537
- }
2538
- &:active {
2539
- background-color: ${$mode === "primary" ? theme.primaryActiveBackgroundColor : $mode === "secondary" ? theme.secondaryActiveBackgroundColor : theme.textActiveBackgroundColor};
2540
- color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""};
2541
- border-color: ${$mode === "secondary" ? "transparent" : ""};
2542
- outline: none;
2543
- box-shadow: ${!disabled ? `0 0 0 2px ${theme.focusBorderColor}` : ""};
2544
- }
2545
- &:disabled {
2546
- cursor: not-allowed;
2547
- background-color: ${$mode === "primary" ? theme.primaryDisabledBackgroundColor : $mode === "secondary" ? theme.secondaryDisabledBackgroundColor : theme.textDisabledBackgroundColor};
2548
- color: ${$mode === "primary" ? theme.primaryDisabledFontColor : $mode === "secondary" ? theme.secondaryDisabledFontColor : theme.textDisabledFontColor};
2549
- border-color: ${$mode === "secondary" ? theme.secondaryDisabledBorderColor : ""};
2635
+ var calculateWidth3 = (margin, size) => size?.width === "fillParent" ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : widths[size?.width];
2636
+ var getHeight = (height) => {
2637
+ switch (height) {
2638
+ case "small":
2639
+ return 1.5;
2640
+ case "medium":
2641
+ return 2;
2642
+ case "large":
2643
+ return 2.5;
2644
+ default:
2645
+ return 2.5;
2646
+ }
2647
+ };
2648
+ var getButtonStyles = ($mode, semantic, theme, size) => {
2649
+ let enabled = "";
2650
+ let hover = "";
2651
+ let active = "";
2652
+ let focus = "";
2653
+ let disabled = "";
2654
+ let commonPrimaryStyles = `
2655
+ font-weight: ${theme.primaryFontWeight};
2656
+ font-size: ${size?.height === "small" ? theme.primarySmallFontSize : size?.height === "medium" ? theme.primaryMediumFontSize : theme.primaryLargeFontSize};
2657
+ font-family: ${theme.primaryFontFamily};
2658
+ border-radius: ${theme.primaryBorderRadius};
2659
+ border-width ${theme.primaryBorderThickness};
2660
+ border-style: ${theme.primaryBorderStyle};`;
2661
+ let commonSecondaryStyles = `
2662
+ font-weight: ${theme.secondaryFontWeight};
2663
+ font-size: ${size?.height === "small" ? theme.secondarySmallFontSize : size?.height === "medium" ? theme.secondaryMediumFontSize : theme.secondaryLargeFontSize};
2664
+ font-family: ${theme.secondaryFontFamily};
2665
+ border-radius: ${theme.secondaryBorderRadius};
2666
+ border-width ${theme.secondaryBorderThickness};
2667
+ border-style: ${theme.secondaryBorderStyle};`;
2668
+ let commonTertiaryStyles = `
2669
+ font-weight: ${theme.tertiaryFontWeight};
2670
+ font-size: ${size?.height === "small" ? theme.tertiarySmallFontSize : size?.height === "medium" ? theme.tertiaryMediumFontSize : theme.tertiaryLargeFontSize};
2671
+ font-family: ${theme.tertiaryFontFamily};
2672
+ border-radius: ${theme.tertiaryBorderRadius};
2673
+ border-width ${theme.tertiaryBorderThickness};
2674
+ border-style: ${theme.tertiaryBorderStyle};`;
2675
+ switch ($mode) {
2676
+ case "primary":
2677
+ switch (semantic) {
2678
+ case "default":
2679
+ enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
2680
+ color: ${theme.primaryDefaultFontColor};`;
2681
+ hover = `background-color: ${theme.primaryHoverDefaultBackgroundColor};`;
2682
+ active = `background-color: ${theme.primaryActiveDefaultBackgroundColor};
2683
+ border-color: transparent;
2684
+ outline: none;
2685
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2686
+ disabled = `cursor: not-allowed;
2687
+ background-color: ${theme.primaryDisabledDefaultBackgroundColor};
2688
+ color: ${theme.primaryDisabledDefaultFontColor};`;
2689
+ break;
2690
+ case "error":
2691
+ enabled = `background-color: ${theme.primaryErrorBackgroundColor};
2692
+ color: ${theme.primaryErrorFontColor};`;
2693
+ hover = `background-color: ${theme.primaryHoverErrorBackgroundColor};`;
2694
+ active = `background-color: ${theme.primaryActiveErrorBackgroundColor};
2695
+ border-color: transparent;
2696
+ outline: none;
2697
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2698
+ disabled = `cursor: not-allowed;
2699
+ background-color: ${theme.primaryDisabledErrorBackgroundColor};
2700
+ color: ${theme.primaryDisabledErrorFontColor};`;
2701
+ break;
2702
+ case "warning":
2703
+ enabled = `background-color: ${theme.primaryWarningBackgroundColor};
2704
+ color: ${theme.primaryWarningFontColor};`;
2705
+ hover = `background-color: ${theme.primaryHoverWarningBackgroundColor};`;
2706
+ active = `background-color: ${theme.primaryActiveWarningBackgroundColor};
2707
+ border-color: transparent;
2708
+ outline: none;
2709
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2710
+ disabled = `cursor: not-allowed;
2711
+ background-color: ${theme.primaryDisabledWarningBackgroundColor};
2712
+ color: ${theme.primaryDisabledWarningFontColor};`;
2713
+ break;
2714
+ case "success":
2715
+ enabled = `background-color: ${theme.primarySuccessBackgroundColor};
2716
+ color: ${theme.primarySuccessFontColor};`;
2717
+ hover = `background-color: ${theme.primaryHoverSuccessBackgroundColor};`;
2718
+ active = `background-color: ${theme.primaryActiveSuccessBackgroundColor};
2719
+ border-color: transparent;
2720
+ outline: none;
2721
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2722
+ disabled = `cursor: not-allowed;
2723
+ background-color: ${theme.primaryDisabledSuccessBackgroundColor};
2724
+ color: ${theme.primaryDisabledSuccessFontColor};`;
2725
+ break;
2726
+ case "info":
2727
+ enabled = `background-color: ${theme.primaryInfoBackgroundColor};
2728
+ color: ${theme.primaryInfoFontColor};`;
2729
+ hover = `background-color: ${theme.primaryHoverInfoBackgroundColor};`;
2730
+ active = `background-color: ${theme.primaryActiveInfoBackgroundColor};
2731
+ border-color: transparent;
2732
+ outline: none;
2733
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2734
+ disabled = `cursor: not-allowed;
2735
+ background-color: ${theme.primaryDisabledInfoBackgroundColor};
2736
+ color: ${theme.primaryDisabledInfoFontColor};`;
2737
+ break;
2738
+ default:
2739
+ enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
2740
+ color: ${theme.primaryDefaultFontColor};`;
2741
+ break;
2742
+ }
2743
+ return `${commonPrimaryStyles}
2744
+ ${enabled}
2745
+ &:hover {
2746
+ ${hover}
2747
+ }
2748
+ &:active {
2749
+ ${active}
2750
+ }
2751
+ &:focus {
2752
+ ${focus}
2753
+ }
2754
+ &:disabled {
2755
+ ${disabled}
2756
+ }`;
2757
+ case "secondary":
2758
+ switch (semantic) {
2759
+ case "default":
2760
+ enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
2761
+ color: ${theme.secondaryDefaultFontColor};
2762
+ border-color ${theme.secondaryDefaultBorderColor};`;
2763
+ hover = `background-color: ${theme.secondaryHoverDefaultBackgroundColor};
2764
+ color: ${theme.secondaryHoverDefaultFontColor};`;
2765
+ active = `background-color: ${theme.secondaryActiveDefaultBackgroundColor};
2766
+ color: ${theme.secondaryHoverDefaultFontColor};
2767
+ border-color: transparent;
2768
+ outline: none;
2769
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2770
+ focus = `border-color: transparent;`;
2771
+ disabled = `cursor: not-allowed;
2772
+ background-color: ${theme.secondaryDisabledDefaultBackgroundColor};
2773
+ color: ${theme.secondaryDisabledDefaultFontColor};
2774
+ border-color: ${theme.secondaryDisabledDefaultBorderColor};`;
2775
+ break;
2776
+ case "error":
2777
+ enabled = `background-color: ${theme.secondaryErrorBackgroundColor};
2778
+ color: ${theme.secondaryErrorFontColor};
2779
+ border-color ${theme.secondaryErrorBorderColor};`;
2780
+ hover = `background-color: ${theme.secondaryHoverErrorBackgroundColor};
2781
+ color: ${theme.secondaryHoverErrorFontColor};`;
2782
+ active = `background-color: ${theme.secondaryActiveErrorBackgroundColor};
2783
+ color: ${theme.secondaryHoverErrorFontColor};
2784
+ border-color: transparent;
2785
+ outline: none;
2786
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2787
+ focus = `border-color: transparent;`;
2788
+ disabled = `cursor: not-allowed;
2789
+ background-color: ${theme.secondaryDisabledErrorBackgroundColor};
2790
+ color: ${theme.secondaryDisabledErrorFontColor};
2791
+ border-color: ${theme.secondaryDisabledErrorBorderColor};`;
2792
+ break;
2793
+ case "warning":
2794
+ enabled = `background-color: ${theme.secondaryWarningBackgroundColor};
2795
+ color: ${theme.secondaryWarningFontColor};
2796
+ border-color ${theme.secondaryWarningBorderColor};`;
2797
+ hover = `background-color: ${theme.secondaryHoverWarningBackgroundColor};
2798
+ color: ${theme.secondaryHoverWarningFontColor};`;
2799
+ active = `background-color: ${theme.secondaryActiveWarningBackgroundColor};
2800
+ color: ${theme.secondaryHoverWarningFontColor};
2801
+ border-color: transparent;
2802
+ outline: none;
2803
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2804
+ focus = `border-color: transparent;`;
2805
+ disabled = `cursor: not-allowed;
2806
+ background-color: ${theme.secondaryDisabledWarningBackgroundColor};
2807
+ color: ${theme.secondaryDisabledWarningFontColor};
2808
+ border-color: ${theme.secondaryDisabledWarningBorderColor};`;
2809
+ break;
2810
+ case "success":
2811
+ enabled = `background-color: ${theme.secondarySuccessBackgroundColor};
2812
+ color: ${theme.secondarySuccessFontColor};
2813
+ border-color ${theme.secondarySuccessBorderColor};`;
2814
+ hover = `background-color: ${theme.secondaryHoverSuccessBackgroundColor};
2815
+ color: ${theme.secondaryHoverSuccessFontColor};`;
2816
+ active = `background-color: ${theme.secondaryActiveSuccessBackgroundColor};
2817
+ color: ${theme.secondaryHoverSuccessFontColor};
2818
+ border-color: transparent;
2819
+ outline: none;
2820
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2821
+ focus = `border-color: transparent;`;
2822
+ disabled = `cursor: not-allowed;
2823
+ background-color: ${theme.secondaryDisabledSuccessBackgroundColor};
2824
+ color: ${theme.secondaryDisabledSuccessFontColor};
2825
+ border-color: ${theme.secondaryDisabledSuccessBorderColor};`;
2826
+ break;
2827
+ case "info":
2828
+ enabled = `background-color: ${theme.secondaryInfoBackgroundColor};
2829
+ color: ${theme.secondaryInfoFontColor};
2830
+ border-color ${theme.secondaryInfoBorderColor};`;
2831
+ hover = `background-color: ${theme.secondaryHoverInfoBackgroundColor};
2832
+ color: ${theme.secondaryHoverInfoFontColor};`;
2833
+ active = `background-color: ${theme.secondaryActiveInfoBackgroundColor};
2834
+ color: ${theme.secondaryHoverInfoFontColor};
2835
+ border-color: transparent;
2836
+ outline: none;
2837
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2838
+ focus = `border-color: transparent;`;
2839
+ disabled = `cursor: not-allowed;
2840
+ background-color: ${theme.secondaryDisabledInfoBackgroundColor};
2841
+ color: ${theme.secondaryDisabledInfoFontColor};
2842
+ border-color: ${theme.secondaryDisabledInfoBorderColor};`;
2843
+ break;
2844
+ default:
2845
+ enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
2846
+ color: ${theme.secondaryDefaultFontColor};
2847
+ border-color ${theme.secondaryDefaultBorderColor};`;
2848
+ break;
2849
+ }
2850
+ return `${commonSecondaryStyles}
2851
+ ${enabled}
2852
+ &:hover {
2853
+ ${hover}
2854
+ }
2855
+ &:active {
2856
+ ${active}
2857
+ }
2858
+ &:focus {
2859
+ ${focus}
2860
+ }
2861
+ &:disabled {
2862
+ ${disabled}
2863
+ }`;
2864
+ case "tertiary":
2865
+ switch (semantic) {
2866
+ case "default":
2867
+ enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
2868
+ color: ${theme.tertiaryDefaultFontColor};`;
2869
+ hover = `background-color: ${theme.tertiaryHoverDefaultBackgroundColor};`;
2870
+ active = `background-color: ${theme.tertiaryActiveDefaultBackgroundColor};
2871
+ border-color: transparent;
2872
+ outline: none;
2873
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2874
+ disabled = `cursor: not-allowed;
2875
+ background-color: ${theme.tertiaryDisabledDefaultBackgroundColor};
2876
+ color: ${theme.tertiaryDisabledDefaultFontColor};`;
2877
+ break;
2878
+ case "error":
2879
+ enabled = `background-color: ${theme.tertiaryErrorBackgroundColor};
2880
+ color: ${theme.tertiaryErrorFontColor};`;
2881
+ hover = `background-color: ${theme.tertiaryHoverErrorBackgroundColor};`;
2882
+ active = `background-color: ${theme.tertiaryActiveErrorBackgroundColor};
2883
+ border-color: transparent;
2884
+ outline: none;
2885
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2886
+ disabled = `cursor: not-allowed;
2887
+ background-color: ${theme.tertiaryDisabledErrorBackgroundColor};
2888
+ color: ${theme.tertiaryDisabledErrorFontColor};`;
2889
+ break;
2890
+ case "warning":
2891
+ enabled = `background-color: ${theme.tertiaryWarningBackgroundColor};
2892
+ color: ${theme.tertiaryWarningFontColor};`;
2893
+ hover = `background-color: ${theme.tertiaryHoverWarningBackgroundColor};`;
2894
+ active = `background-color: ${theme.tertiaryActiveWarningBackgroundColor};
2895
+ border-color: transparent;
2896
+ outline: none;
2897
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2898
+ disabled = `cursor: not-allowed;
2899
+ background-color: ${theme.tertiaryDisabledWarningBackgroundColor};
2900
+ color: ${theme.tertiaryDisabledWarningFontColor};`;
2901
+ break;
2902
+ case "success":
2903
+ enabled = `background-color: ${theme.tertiarySuccessBackgroundColor};
2904
+ color: ${theme.tertiarySuccessFontColor};`;
2905
+ hover = `background-color: ${theme.tertiaryHoverSuccessBackgroundColor};`;
2906
+ active = `background-color: ${theme.tertiaryActiveSuccessBackgroundColor};
2907
+ border-color: transparent;
2908
+ outline: none;
2909
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2910
+ disabled = `cursor: not-allowed;
2911
+ background-color: ${theme.tertiaryDisabledSuccessBackgroundColor};
2912
+ color: ${theme.tertiaryDisabledSuccessFontColor};`;
2913
+ break;
2914
+ case "info":
2915
+ enabled = `background-color: ${theme.tertiaryInfoBackgroundColor};
2916
+ color: ${theme.tertiaryInfoFontColor};`;
2917
+ hover = `background-color: ${theme.tertiaryHoverInfoBackgroundColor};`;
2918
+ active = `background-color: ${theme.tertiaryActiveInfoBackgroundColor};
2919
+ border-color: transparent;
2920
+ outline: none;
2921
+ box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
2922
+ disabled = `cursor: not-allowed;
2923
+ background-color: ${theme.tertiaryDisabledInfoBackgroundColor};
2924
+ color: ${theme.tertiaryDisabledInfoFontColor};`;
2925
+ break;
2926
+ default:
2927
+ enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
2928
+ color: ${theme.tertiaryDefaultFontColor};`;
2929
+ break;
2930
+ }
2931
+ return `${commonTertiaryStyles}
2932
+ ${enabled}
2933
+ &:active {
2934
+ ${active}
2935
+ }
2936
+ &:hover {
2937
+ ${hover}
2938
+ }
2939
+ &:focus {
2940
+ ${focus}
2941
+ }
2942
+ &:disabled {
2943
+ ${disabled}
2944
+ }`;
2550
2945
  }
2551
- `;
2946
+ };
2552
2947
  var Button = import_styled_components7.default.button`
2553
2948
  display: inline-flex;
2554
2949
  flex-direction: ${(props) => props.iconPosition === "after" ? "row" : "row-reverse"};
2555
2950
  gap: 0.5rem;
2556
2951
  align-items: center;
2557
2952
  justify-content: center;
2953
+ height: ${(props) => getHeight(props.size?.height && props.size?.height) + "rem"};
2558
2954
  width: ${(props) => calculateWidth3(props.margin, props.size)};
2559
- height: 40px;
2560
2955
  margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
2561
2956
  margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
2562
2957
  margin-right: ${(props) => props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
2563
2958
  margin-bottom: ${(props) => props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
2564
2959
  margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
2565
- padding-top: ${(props) => props.theme.paddingTop};
2566
- padding-bottom: ${(props) => props.theme.paddingBottom};
2567
- padding-left: ${(props) => props.hasIcon && !props.hasLabel ? props.theme.paddingLeft : `calc(${props.theme.paddingLeft} + 8px)`};
2568
- padding-right: ${(props) => props.hasIcon && !props.hasLabel ? props.theme.paddingRight : `calc(${props.theme.paddingRight} + 8px)`};
2960
+ 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};
2961
+ 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};
2962
+ 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};
2963
+ 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};
2964
+
2569
2965
  box-shadow: 0 0 0 2px transparent;
2570
2966
  font-family: ${(props) => props.theme.fontFamily};
2571
2967
  font-size: ${(props) => props.theme.fontSize};
@@ -2578,8 +2974,7 @@ var Button = import_styled_components7.default.button`
2578
2974
  box-shadow: 0 0 0 2px ${(props) => props.theme.focusBorderColor};
2579
2975
  }
2580
2976
 
2581
- ${(props) => getButtonStyles(props.$mode, props.theme)}
2582
- ${(props) => getButtonStates(props.disabled, props.$mode, props.theme)}
2977
+ ${(props) => getButtonStyles(props.$mode, props.semantic, props.theme, props.size)};
2583
2978
  `;
2584
2979
  var LabelContainer = import_styled_components7.default.span`
2585
2980
  line-height: ${(props) => props.theme.labelFontLineHeight};
@@ -2591,11 +2986,10 @@ var LabelContainer = import_styled_components7.default.span`
2591
2986
  `;
2592
2987
  var IconContainer3 = import_styled_components7.default.div`
2593
2988
  display: flex;
2594
- font-size: 24px;
2595
-
2989
+ font-size: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2596
2990
  svg {
2597
- height: 24px;
2598
- width: 24px;
2991
+ height: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2992
+ width: ${(props) => props.size.height === "small" ? "16" : props.size.height === "medium" ? "16" : "24"}px;
2599
2993
  }
2600
2994
  `;
2601
2995
  var Button_default = DxcButton;
@@ -2617,14 +3011,14 @@ var DxcBox = ({
2617
3011
  const colorsTheme = useTheme_default();
2618
3012
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_styled_components8.ThemeProvider, { theme: colorsTheme.box, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { shadowDepth, display, margin, size, children }) });
2619
3013
  };
2620
- var sizes3 = {
3014
+ var sizes2 = {
2621
3015
  small: "48px",
2622
3016
  medium: "240px",
2623
3017
  large: "480px",
2624
3018
  fillParent: "100%",
2625
3019
  fitContent: "fit-content"
2626
3020
  };
2627
- var calculateWidth4 = (margin, size) => size === "fillParent" ? `calc(${sizes3[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes3[size];
3021
+ var calculateWidth4 = (margin, size) => size === "fillParent" ? `calc(${sizes2[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes2[size];
2628
3022
  var Box = import_styled_components8.default.div`
2629
3023
  display: ${(props) => props.display};
2630
3024
  border-radius: ${(props) => props.theme.borderRadius};
@@ -2820,14 +3214,14 @@ var DxcCheckbox = (0, import_react7.forwardRef)(
2820
3214
  ) });
2821
3215
  }
2822
3216
  );
2823
- var sizes4 = {
3217
+ var sizes3 = {
2824
3218
  small: "120px",
2825
3219
  medium: "240px",
2826
3220
  large: "480px",
2827
3221
  fillParent: "100%",
2828
3222
  fitContent: "fit-content"
2829
3223
  };
2830
- var calculateWidth5 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes4[size];
3224
+ var calculateWidth5 = (margin, size) => size === "fillParent" ? `calc(${sizes3[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes3[size];
2831
3225
  var getDisabledColor = (theme, element) => {
2832
3226
  switch (element) {
2833
3227
  case "check":
@@ -3502,14 +3896,14 @@ var DxcDropdown = ({
3502
3896
  }
3503
3897
  ) });
3504
3898
  };
3505
- var sizes5 = {
3899
+ var sizes4 = {
3506
3900
  small: "60px",
3507
3901
  medium: "240px",
3508
3902
  large: "480px",
3509
3903
  fillParent: "100%",
3510
3904
  fitContent: "fit-content"
3511
3905
  };
3512
- var calculateWidth6 = (margin, size) => size === "fillParent" ? `calc(${sizes5[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes5[size];
3906
+ var calculateWidth6 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes4[size];
3513
3907
  var DropdownContainer = import_styled_components14.default.div`
3514
3908
  width: ${(props) => calculateWidth6(props.margin, props.size)};
3515
3909
  margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -3894,14 +4288,14 @@ var Suggestions_default = (0, import_react17.memo)(Suggestions);
3894
4288
 
3895
4289
  // src/text-input/TextInput.tsx
3896
4290
  var import_jsx_runtime20 = require("react/jsx-runtime");
3897
- var sizes6 = {
4291
+ var sizes5 = {
3898
4292
  small: "240px",
3899
4293
  medium: "360px",
3900
4294
  large: "480px",
3901
4295
  fillParent: "100%"
3902
4296
  };
3903
4297
  var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: condition ? wrapper(children) : children });
3904
- var calculateWidth7 = (margin, size) => size === "fillParent" ? `calc(${sizes6[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes6[size];
4298
+ var calculateWidth7 = (margin, size) => size === "fillParent" ? `calc(${sizes5[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes5[size];
3905
4299
  var makeCancelable = (promise) => {
3906
4300
  let hasCanceled_ = false;
3907
4301
  const wrappedPromise = new Promise((resolve, reject) => {
@@ -4569,12 +4963,12 @@ var DxcSlider = (0, import_react19.forwardRef)(
4569
4963
  ] }) });
4570
4964
  }
4571
4965
  );
4572
- var sizes7 = {
4966
+ var sizes6 = {
4573
4967
  medium: "360px",
4574
4968
  large: "480px",
4575
4969
  fillParent: "100%"
4576
4970
  };
4577
- var calculateWidth8 = (margin, size) => size === "fillParent" ? `calc(${sizes7[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes7[size];
4971
+ var calculateWidth8 = (margin, size) => size === "fillParent" ? `calc(${sizes6[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes6[size];
4578
4972
  var getChromeStyles = () => `
4579
4973
  width: 100%;
4580
4974
  margin-right: 4px;`;
@@ -4841,14 +5235,14 @@ var DxcSwitch = (0, import_react20.forwardRef)(
4841
5235
  ) });
4842
5236
  }
4843
5237
  );
4844
- var sizes8 = {
5238
+ var sizes7 = {
4845
5239
  small: "60px",
4846
5240
  medium: "240px",
4847
5241
  large: "480px",
4848
5242
  fillParent: "100%",
4849
5243
  fitContent: "fit-content"
4850
5244
  };
4851
- var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes8[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes8[size];
5245
+ var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes7[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes7[size];
4852
5246
  var getDisabledColor2 = (theme, element, subElement) => {
4853
5247
  switch (element) {
4854
5248
  case "track":
@@ -6195,14 +6589,14 @@ var DxcTag = ({
6195
6589
  }
6196
6590
  ) });
6197
6591
  };
6198
- var sizes9 = {
6592
+ var sizes8 = {
6199
6593
  small: "42px",
6200
6594
  medium: "240px",
6201
6595
  large: "480px",
6202
6596
  fillParent: "100%",
6203
6597
  fitContent: "fit-content"
6204
6598
  };
6205
- var calculateWidth11 = (margin, size) => size === "fillParent" ? `calc(${sizes9[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes9[size];
6599
+ var calculateWidth11 = (margin, size) => size === "fillParent" ? `calc(${sizes8[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes8[size];
6206
6600
  var StyledDxcTag = import_styled_components28.default.div`
6207
6601
  display: inline-flex;
6208
6602
  cursor: ${({ hasAction }) => hasAction && "pointer" || "unset"};
@@ -6939,13 +7333,13 @@ var DxcSelect = (0, import_react27.forwardRef)(
6939
7333
  ] }) });
6940
7334
  }
6941
7335
  );
6942
- var sizes10 = {
7336
+ var sizes9 = {
6943
7337
  small: "240px",
6944
7338
  medium: "360px",
6945
7339
  large: "480px",
6946
7340
  fillParent: "100%"
6947
7341
  };
6948
- var calculateWidth12 = (margin, size) => size === "fillParent" ? `calc(${sizes10[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes10[size];
7342
+ var calculateWidth12 = (margin, size) => size === "fillParent" ? `calc(${sizes9[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes9[size];
6949
7343
  var SelectContainer = import_styled_components31.default.div`
6950
7344
  box-sizing: border-box;
6951
7345
  display: flex;
@@ -10154,13 +10548,13 @@ var DxcDateInput = (0, import_react45.forwardRef)(
10154
10548
  ] }) });
10155
10549
  }
10156
10550
  );
10157
- var sizes11 = {
10551
+ var sizes10 = {
10158
10552
  small: "240px",
10159
10553
  medium: "360px",
10160
10554
  large: "480px",
10161
10555
  fillParent: "100%"
10162
10556
  };
10163
- var calculateWidth16 = (margin, size) => size === "fillParent" ? `calc(${sizes11[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes11[size];
10557
+ var calculateWidth16 = (margin, size) => size === "fillParent" ? `calc(${sizes10[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes10[size];
10164
10558
  var DateInputContainer = import_styled_components49.default.div`
10165
10559
  ${(props) => props.size == "fillParent" && "width: 100%;"}
10166
10560
  display: flex;
@@ -10390,13 +10784,13 @@ var DxcTextarea = (0, import_react47.forwardRef)(
10390
10784
  ] }) });
10391
10785
  }
10392
10786
  );
10393
- var sizes12 = {
10787
+ var sizes11 = {
10394
10788
  small: "240px",
10395
10789
  medium: "360px",
10396
10790
  large: "480px",
10397
10791
  fillParent: "100%"
10398
10792
  };
10399
- var calculateWidth17 = (margin, size) => size === "fillParent" ? `calc(${sizes12[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes12[size];
10793
+ var calculateWidth17 = (margin, size) => size === "fillParent" ? `calc(${sizes11[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : sizes11[size];
10400
10794
  var TextareaContainer = import_styled_components51.default.div`
10401
10795
  display: flex;
10402
10796
  flex-direction: column;
@@ -10750,7 +11144,7 @@ var DxcFileInput = (0, import_react49.forwardRef)(
10750
11144
  label: buttonLabel ?? (multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault),
10751
11145
  onClick: handleClick,
10752
11146
  disabled,
10753
- size: "fitContent",
11147
+ size: { width: "fitContent" },
10754
11148
  tabIndex
10755
11149
  }
10756
11150
  ),
@@ -10799,7 +11193,7 @@ var DxcFileInput = (0, import_react49.forwardRef)(
10799
11193
  label: buttonLabel ?? translatedLabels.fileInput.dropAreaButtonLabelDefault,
10800
11194
  onClick: handleClick,
10801
11195
  disabled,
10802
- size: "fitContent"
11196
+ size: { width: "fitContent" }
10803
11197
  }
10804
11198
  ),
10805
11199
  mode === "dropzone" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
@@ -11727,7 +12121,7 @@ var DxcImage = ({
11727
12121
  lazyLoading = false,
11728
12122
  src,
11729
12123
  srcSet,
11730
- sizes: sizes13,
12124
+ sizes: sizes12,
11731
12125
  width,
11732
12126
  height,
11733
12127
  objectFit,
@@ -11765,7 +12159,7 @@ var DxcImage = ({
11765
12159
  onError,
11766
12160
  src,
11767
12161
  srcSet,
11768
- sizes: sizes13,
12162
+ sizes: sizes12,
11769
12163
  style: {
11770
12164
  objectFit,
11771
12165
  objectPosition,