@alto-avios/alto-ui 5.0.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/assets/Icon.css +1 -1
  2. package/dist/components/Eyebrow/Eyebrow.d.ts +1 -7
  3. package/dist/components/Eyebrow/Eyebrow.js +3 -7
  4. package/dist/components/Eyebrow/Eyebrow.js.map +1 -1
  5. package/dist/components/Heading/Heading.d.ts +1 -7
  6. package/dist/components/Heading/Heading.js +2 -8
  7. package/dist/components/Heading/Heading.js.map +1 -1
  8. package/dist/components/Icon/Icon.js +594 -27
  9. package/dist/components/Icon/Icon.js.map +1 -1
  10. package/dist/components/Label/Label.d.ts +1 -7
  11. package/dist/components/Label/Label.js +2 -5
  12. package/dist/components/Label/Label.js.map +1 -1
  13. package/dist/components/Paragraph/Paragraph.d.ts +2 -8
  14. package/dist/components/Paragraph/Paragraph.js +2 -7
  15. package/dist/components/Paragraph/Paragraph.js.map +1 -1
  16. package/dist/components/Spacer/Spacer.d.ts +2 -2
  17. package/dist/components/SubHeading/SubHeading.d.ts +1 -7
  18. package/dist/components/SubHeading/SubHeading.js +2 -6
  19. package/dist/components/SubHeading/SubHeading.js.map +1 -1
  20. package/dist/utils/border/border.d.ts +2 -2
  21. package/dist/utils/padding/padding.d.ts +7 -7
  22. package/dist/utils/stories/DraggableContainer.js +1 -2
  23. package/dist/utils/stories/DraggableContainer.js.map +1 -1
  24. package/package.json +1 -1
  25. package/dist/assets/truncate.css +0 -1
package/dist/assets/Icon.css CHANGED
@@ -1 +1 @@
1
- ._icon-wrapper_dnu8o_1{align-items:center;display:inline-flex;justify-content:center}._iconSize0_5x_dnu8o_8{font-size:.5rem}._iconSize0_75x_dnu8o_12{font-size:.75rem}._iconSize1x_dnu8o_16{font-size:1rem}._iconSize1_25x_dnu8o_20{font-size:1.25rem}._iconSize1_5x_dnu8o_24{font-size:1.5rem}._iconSize2x_dnu8o_28{font-size:2rem}._iconSize2_5x_dnu8o_32{font-size:2.5rem}._iconSize3x_dnu8o_36{font-size:3rem}._iconSize4x_dnu8o_40{font-size:4rem}._iconSize5x_dnu8o_44{font-size:5rem}._iconSize6x_dnu8o_48{font-size:6rem}._iconSize7x_dnu8o_52{font-size:7rem}._iconSize8x_dnu8o_56{font-size:8rem}._iconSize9x_dnu8o_60{font-size:9rem}._iconSize10x_dnu8o_64{font-size:10rem}._iconSize0_5x_dnu8o_8{height:.75rem;width:.75rem}._iconSize0_5x_dnu8o_8 svg{height:.5rem;width:.5rem!important}._iconSize0_75x_dnu8o_12{height:1.125rem;width:1.125rem}._iconSize0_75x_dnu8o_12 svg{height:.75rem;width:.75rem!important}._iconSize1x_dnu8o_16{height:1.5rem;width:1.5rem}._iconSize1x_dnu8o_16 svg{height:1rem;width:1rem!important}._iconSize1_25x_dnu8o_20{height:1.875rem;width:1.875rem}._iconSize1_25x_dnu8o_20 svg{height:1.25rem;width:1.25rem!important}._iconSize1_5x_dnu8o_24{height:2.25rem;width:2.25rem}._iconSize1_5x_dnu8o_24 svg{height:1.5rem;width:1.5rem!important}._iconSize2x_dnu8o_28{height:3rem;width:3rem}._iconSize2x_dnu8o_28 svg{height:2rem;width:2rem!important}._iconSize2_5x_dnu8o_32{height:3.75rem;width:3.75rem}._iconSize2_5x_dnu8o_32 svg{height:2.5rem;width:2.5rem!important}._iconSize3x_dnu8o_36{height:4.5rem;width:4.5rem}._iconSize3x_dnu8o_36 svg{height:3rem;width:3rem!important}._iconSize4x_dnu8o_40{height:6rem;width:6rem}._iconSize4x_dnu8o_40 svg{height:4rem;width:4rem!important}._iconSize5x_dnu8o_44{height:7.5rem;width:7.5rem}._iconSize5x_dnu8o_44 svg{height:5rem;width:5rem!important}._iconSize6x_dnu8o_48{height:9rem;width:9rem}._iconSize6x_dnu8o_48 svg{height:6rem;width:6rem!important}._iconSize7x_dnu8o_52{height:10.5rem;width:10.5rem}._iconSize7x_dnu8o_52 svg{height:7rem;width:7rem!important}._iconSize8x_dnu8o_56{height:12rem;width:12rem}._iconSize8x_dnu8o_56 svg{height:8rem;width:8rem!important}._iconSize9x_dnu8o_60{height:13.5rem;width:13.5rem}._iconSize9x_dnu8o_60 svg{height:9rem;width:9rem!important}._iconSize10x_dnu8o_64{height:15rem;width:15rem}._iconSize10x_dnu8o_64 svg{height:10rem;width:10rem!important}._icon_dnu8o_1._fixedWidth_dnu8o_219{padding:0 .125em}._icon_dnu8o_1._square_dnu8o_223{padding:.125em}._icon_dnu8o_1._roomy_dnu8o_227{padding:.25em}
1
+ ._icon-wrapper_1henv_1{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center}._iconSize0_5x_1henv_9{font-size:.5rem}._iconSize0_75x_1henv_13{font-size:.75rem}._iconSize1x_1henv_17{font-size:1rem}._iconSize1_25x_1henv_21{font-size:1.25rem}._iconSize1_5x_1henv_25{font-size:1.5rem}._iconSize2x_1henv_29{font-size:2rem}._iconSize2_5x_1henv_33{font-size:2.5rem}._iconSize3x_1henv_37{font-size:3rem}._iconSize4x_1henv_41{font-size:4rem}._iconSize5x_1henv_45{font-size:5rem}._iconSize6x_1henv_49{font-size:6rem}._iconSize7x_1henv_53{font-size:7rem}._iconSize8x_1henv_57{font-size:8rem}._iconSize9x_1henv_61{font-size:9rem}._iconSize10x_1henv_65{font-size:10rem}._icon-wrapper--0_5--none_1henv_70{height:.5rem;width:.5rem}._icon-wrapper--0_5--fixedwidth_1henv_75{height:.5rem;width:.625rem}._icon-wrapper--0_5--square_1henv_80{height:.625rem;width:.625rem}._icon-wrapper--0_5--roomy_1henv_85,._icon-wrapper--0_75--none_1henv_90{height:.75rem;width:.75rem}._icon-wrapper--0_75--fixedwidth_1henv_95{height:.75rem;width:.9375rem}._icon-wrapper--0_75--square_1henv_100{height:.9375rem;width:.9375rem}._icon-wrapper--0_75--roomy_1henv_105{height:1.125rem;width:1.125rem}._icon-wrapper--1--none_1henv_111{height:1rem;width:1rem}._icon-wrapper--1--fixedwidth_1henv_116{height:1rem;width:1.25rem}._icon-wrapper--1--square_1henv_121{height:1.25rem;width:1.25rem}._icon-wrapper--1--roomy_1henv_126{height:1.5rem;width:1.5rem}._icon-wrapper--1_25--none_1henv_132{height:1.25rem;width:1.25rem}._icon-wrapper--1_25--fixedwidth_1henv_137{height:1.25rem;width:1.5625rem}._icon-wrapper--1_25--square_1henv_142{height:1.5625rem;width:1.5625rem}._icon-wrapper--1_25--roomy_1henv_147{height:1.875rem;width:1.875rem}._icon-wrapper--1_5--none_1henv_153{height:1.5rem;width:1.5rem}._icon-wrapper--1_5--fixedwidth_1henv_158{height:1.5rem;width:1.875rem}._icon-wrapper--1_5--square_1henv_163{height:1.875rem;width:1.875rem}._icon-wrapper--1_5--roomy_1henv_168{height:2.25rem;width:2.25rem}._icon-wrapper--2--none_1henv_174{height:2rem;width:2rem}._icon-wrapper--2--fixedwidth_1henv_179{height:2rem;width:2.5rem}._icon-wrapper--2--square_1henv_184{height:2.5rem;width:2.5rem}._icon-wrapper--2--roomy_1henv_189{height:3rem;width:3rem}._icon-wrapper--2_5--none_1henv_195{height:2.5rem;width:2.5rem}._icon-wrapper--2_5--fixedwidth_1henv_200{height:2.5rem;width:3.125rem}._icon-wrapper--2_5--square_1henv_205{height:3.125rem;width:3.125rem}._icon-wrapper--2_5--roomy_1henv_210{height:3.75rem;width:3.75rem}._icon-wrapper--3--none_1henv_216{height:3rem;width:3rem}._icon-wrapper--3--fixedwidth_1henv_221{height:3rem;width:3.75rem}._icon-wrapper--3--square_1henv_226{height:3.75rem;width:3.75rem}._icon-wrapper--3--roomy_1henv_231{height:4.5rem;width:4.5rem}._icon-wrapper--4--none_1henv_237{height:4rem;width:4rem}._icon-wrapper--4--fixedwidth_1henv_242{height:4rem;width:5rem}._icon-wrapper--4--square_1henv_247{height:5rem;width:5rem}._icon-wrapper--4--roomy_1henv_252{height:6rem;width:6rem}._icon-wrapper--5--none_1henv_258{height:5rem;width:5rem}._icon-wrapper--5--fixedwidth_1henv_263{height:5rem;width:6.25rem}._icon-wrapper--5--square_1henv_268{height:6.25rem;width:6.25rem}._icon-wrapper--5--roomy_1henv_273{height:7.5rem;width:7.5rem}._icon-wrapper--6--none_1henv_279{height:6rem;width:6rem}._icon-wrapper--6--fixedwidth_1henv_284{height:6rem;width:7.5rem}._icon-wrapper--6--square_1henv_289{height:7.5rem;width:7.5rem}._icon-wrapper--6--roomy_1henv_294{height:9rem;width:9rem}._icon-wrapper--7--none_1henv_300{height:7rem;width:7rem}._icon-wrapper--7--fixedwidth_1henv_305{height:7rem;width:8.75rem}._icon-wrapper--7--square_1henv_310{height:8.75rem;width:8.75rem}._icon-wrapper--7--roomy_1henv_315{height:10.5rem;width:10.5rem}._icon-wrapper--8--none_1henv_321{height:8rem;width:8rem}._icon-wrapper--8--fixedwidth_1henv_326{height:8rem;width:10rem}._icon-wrapper--8--square_1henv_331{height:10rem;width:10rem}._icon-wrapper--8--roomy_1henv_336{height:12rem;width:12rem}._icon-wrapper--9--none_1henv_342{height:9rem;width:9rem}._icon-wrapper--9--fixedwidth_1henv_347{height:9rem;width:11.25rem}._icon-wrapper--9--square_1henv_352{height:11.25rem;width:11.25rem}._icon-wrapper--9--roomy_1henv_357{height:13.5rem;width:13.5rem}._icon-wrapper--10--none_1henv_363{height:10rem;width:10rem}._icon-wrapper--10--fixedwidth_1henv_368{height:10rem;width:12.5rem}._icon-wrapper--10--square_1henv_373{height:12.5rem;width:12.5rem}._icon-wrapper--10--roomy_1henv_378{height:15rem;width:15rem}._icon-wrapper--size-0_5x_1henv_384 svg{height:.5rem!important;width:.5rem!important}._icon-wrapper--size-0_75x_1henv_389 svg{height:.75rem!important;width:.75rem!important}._icon-wrapper--size-1x_1henv_394 svg{height:1rem!important;width:1rem!important}._icon-wrapper--size-1_25x_1henv_399 svg{height:1.25rem!important;width:1.25rem!important}._icon-wrapper--size-1_5x_1henv_404 svg{height:1.5rem!important;width:1.5rem!important}._icon-wrapper--size-2x_1henv_409 svg{height:2rem!important;width:2rem!important}._icon-wrapper--size-2_5x_1henv_414 svg{height:2.5rem!important;width:2.5rem!important}._icon-wrapper--size-3x_1henv_419 svg{height:3rem!important;width:3rem!important}._icon-wrapper--size-4x_1henv_424 svg{height:4rem!important;width:4rem!important}._icon-wrapper--size-5x_1henv_429 svg{height:5rem!important;width:5rem!important}._icon-wrapper--size-6x_1henv_434 svg{height:6rem!important;width:6rem!important}._icon-wrapper--size-7x_1henv_439 svg{height:7rem!important;width:7rem!important}._icon-wrapper--size-8x_1henv_444 svg{height:8rem!important;width:8rem!important}._icon-wrapper--size-9x_1henv_449 svg{height:9rem!important;width:9rem!important}._icon-wrapper--size-10x_1henv_454 svg{height:10rem!important;width:10rem!important}._icon_1henv_1._fixedWidth_1henv_460{padding:0 .125em}._icon_1henv_1._square_1henv_464{padding:.125em}._icon_1henv_1._roomy_1henv_468{padding:.25em}
package/dist/components/Eyebrow/Eyebrow.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { default as React } from 'react';
2
- import { ResponsiveProp } from '../../utils/breakpoint/responsive';
3
2
  export interface EyebrowProps {
4
3
  /**
5
4
  * The text content of the Eyebrow component.
@@ -18,11 +17,6 @@ export interface EyebrowProps {
18
17
  * @default 'inspiration'
19
18
  */
20
19
  styleVariant?: 'inspiration' | 'collect' | 'spend' | 'activate';
21
- /**
22
- * Truncate text with ellipsis
23
- * @default false
24
- */
25
- truncate?: ResponsiveProp<boolean>;
26
20
  }
27
- export declare const Eyebrow: ({ children, as: Component, styleVariant, truncate, ...props }: EyebrowProps) => import("react/jsx-runtime").JSX.Element;
21
+ export declare const Eyebrow: ({ children, as: Component, styleVariant, ...props }: EyebrowProps) => import("react/jsx-runtime").JSX.Element;
28
22
  export default Eyebrow;
package/dist/components/Eyebrow/Eyebrow.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../index-DdUYounA.js";
3
- import { useTruncate } from "../../utils/truncate/truncate.js";
4
- import '../../assets/truncate.css';import '../../assets/Eyebrow.css';/* empty css */
5
- const eyebrow$1 = "_eyebrow_ie5k8_1";
3
+ import '../../assets/Eyebrow.css';const eyebrow$1 = "_eyebrow_ie5k8_1";
6
4
  const inspiration = "_inspiration_ie5k8_14";
7
5
  const collect = "_collect_ie5k8_19";
8
6
  const spend = "_spend_ie5k8_24";
@@ -31,13 +29,11 @@ const Eyebrow = ({
31
29
  children,
32
30
  as: Component = "span",
33
31
  styleVariant = "inspiration",
34
- truncate = false,
35
32
  ...props
36
33
  }) => {
37
- const truncateClass = useTruncate(truncate);
38
- return /* @__PURE__ */ jsx(Component, { className: [eyebrow({
34
+ return /* @__PURE__ */ jsx(Component, { className: `${eyebrow({
39
35
  styleVariant
40
- }), truncateClass].join(" "), ...props, children });
36
+ })} ''}`, ...props, children });
41
37
  };
42
38
  export {
43
39
  Eyebrow,
package/dist/components/Eyebrow/Eyebrow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Eyebrow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Eyebrow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/Heading/Heading.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
4
- import { ResponsiveProp } from '../../utils/breakpoint/responsive';
5
4
  declare const heading: (props?: ({
6
5
  size?: "lg" | "sm" | "xs" | "xl" | "md" | "xxs" | null | undefined;
7
6
  textAlign?: "center" | "end" | "start" | null | undefined;
@@ -31,11 +30,6 @@ export interface HeadingProps extends HeadingVariants {
31
30
  * The text alignment of the heading
32
31
  */
33
32
  textAlign?: 'start' | 'center' | 'end';
34
- /**
35
- * Truncate text with ellipsis
36
- * @default false
37
- */
38
- truncate?: ResponsiveProp<boolean>;
39
33
  }
40
- export declare const Heading: ({ children, as: Component, size, foregroundColor, textAlign, truncate, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
34
+ export declare const Heading: ({ children, as: Component, size, foregroundColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
41
35
  export default Heading;
package/dist/components/Heading/Heading.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../index-DdUYounA.js";
3
3
  import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
4
- import { useTruncate } from "../../utils/truncate/truncate.js";
5
- import '../../assets/truncate.css';import '../../assets/Heading.css';/* empty css */
6
- const heading$1 = "_heading_15puj_1";
4
+ import '../../assets/Heading.css';const heading$1 = "_heading_15puj_1";
7
5
  const xxs = "_xxs_15puj_8";
8
6
  const xs = "_xs_15puj_15";
9
7
  const sm = "_sm_15puj_22";
@@ -64,19 +62,15 @@ const Heading = ({
64
62
  size,
65
63
  foregroundColor = "accentSecondary",
66
64
  textAlign = "start",
67
- truncate = false,
68
65
  ...props
69
66
  }) => {
70
67
  const effectiveSize = size || DEFAULT_HEADING_SIZE_MAP[Component];
71
- const truncateClass = useTruncate(truncate);
72
68
  return /* @__PURE__ */ jsx(Component, { className: [heading({
73
69
  size: effectiveSize,
74
70
  textAlign
75
71
  }), foregroundColorVariants({
76
72
  foregroundColor
77
- }), truncateClass].join(" "), ...truncateClass ? {
78
- "data-truncate": "true"
79
- } : {}, ...props, children });
73
+ })].join(" "), ...props, children });
80
74
  };
81
75
  export {
82
76
  DEFAULT_HEADING_SIZE_MAP,
package/dist/components/Heading/Heading.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Heading.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Heading.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/Icon/Icon.js CHANGED
@@ -3,27 +3,27 @@ import { c as cva } from "../../index-DdUYounA.js";
3
3
  import { useState, useEffect } from "react";
4
4
  import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
5
5
  import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
6
- import '../../assets/Icon.css';const iconSize0_5x = "_iconSize0_5x_dnu8o_8";
7
- const iconSize0_75x = "_iconSize0_75x_dnu8o_12";
8
- const iconSize1x = "_iconSize1x_dnu8o_16";
9
- const iconSize1_25x = "_iconSize1_25x_dnu8o_20";
10
- const iconSize1_5x = "_iconSize1_5x_dnu8o_24";
11
- const iconSize2x = "_iconSize2x_dnu8o_28";
12
- const iconSize2_5x = "_iconSize2_5x_dnu8o_32";
13
- const iconSize3x = "_iconSize3x_dnu8o_36";
14
- const iconSize4x = "_iconSize4x_dnu8o_40";
15
- const iconSize5x = "_iconSize5x_dnu8o_44";
16
- const iconSize6x = "_iconSize6x_dnu8o_48";
17
- const iconSize7x = "_iconSize7x_dnu8o_52";
18
- const iconSize8x = "_iconSize8x_dnu8o_56";
19
- const iconSize9x = "_iconSize9x_dnu8o_60";
20
- const iconSize10x = "_iconSize10x_dnu8o_64";
21
- const icon$1 = "_icon_dnu8o_1";
22
- const fixedWidth = "_fixedWidth_dnu8o_219";
23
- const square = "_square_dnu8o_223";
24
- const roomy = "_roomy_dnu8o_227";
6
+ import '../../assets/Icon.css';const iconSize0_5x = "_iconSize0_5x_1henv_9";
7
+ const iconSize0_75x = "_iconSize0_75x_1henv_13";
8
+ const iconSize1x = "_iconSize1x_1henv_17";
9
+ const iconSize1_25x = "_iconSize1_25x_1henv_21";
10
+ const iconSize1_5x = "_iconSize1_5x_1henv_25";
11
+ const iconSize2x = "_iconSize2x_1henv_29";
12
+ const iconSize2_5x = "_iconSize2_5x_1henv_33";
13
+ const iconSize3x = "_iconSize3x_1henv_37";
14
+ const iconSize4x = "_iconSize4x_1henv_41";
15
+ const iconSize5x = "_iconSize5x_1henv_45";
16
+ const iconSize6x = "_iconSize6x_1henv_49";
17
+ const iconSize7x = "_iconSize7x_1henv_53";
18
+ const iconSize8x = "_iconSize8x_1henv_57";
19
+ const iconSize9x = "_iconSize9x_1henv_61";
20
+ const iconSize10x = "_iconSize10x_1henv_65";
21
+ const icon$1 = "_icon_1henv_1";
22
+ const fixedWidth = "_fixedWidth_1henv_460";
23
+ const square = "_square_1henv_464";
24
+ const roomy = "_roomy_1henv_468";
25
25
  const styles = {
26
- "icon-wrapper": "_icon-wrapper_dnu8o_1",
26
+ "icon-wrapper": "_icon-wrapper_1henv_1",
27
27
  iconSize0_5x,
28
28
  iconSize0_75x,
29
29
  iconSize1x,
@@ -39,11 +39,578 @@ const styles = {
39
39
  iconSize8x,
40
40
  iconSize9x,
41
41
  iconSize10x,
42
+ "icon-wrapper--0_5--none": "_icon-wrapper--0_5--none_1henv_70",
43
+ "icon-wrapper--0_5--fixedwidth": "_icon-wrapper--0_5--fixedwidth_1henv_75",
44
+ "icon-wrapper--0_5--square": "_icon-wrapper--0_5--square_1henv_80",
45
+ "icon-wrapper--0_5--roomy": "_icon-wrapper--0_5--roomy_1henv_85",
46
+ "icon-wrapper--0_75--none": "_icon-wrapper--0_75--none_1henv_90",
47
+ "icon-wrapper--0_75--fixedwidth": "_icon-wrapper--0_75--fixedwidth_1henv_95",
48
+ "icon-wrapper--0_75--square": "_icon-wrapper--0_75--square_1henv_100",
49
+ "icon-wrapper--0_75--roomy": "_icon-wrapper--0_75--roomy_1henv_105",
50
+ "icon-wrapper--1--none": "_icon-wrapper--1--none_1henv_111",
51
+ "icon-wrapper--1--fixedwidth": "_icon-wrapper--1--fixedwidth_1henv_116",
52
+ "icon-wrapper--1--square": "_icon-wrapper--1--square_1henv_121",
53
+ "icon-wrapper--1--roomy": "_icon-wrapper--1--roomy_1henv_126",
54
+ "icon-wrapper--1_25--none": "_icon-wrapper--1_25--none_1henv_132",
55
+ "icon-wrapper--1_25--fixedwidth": "_icon-wrapper--1_25--fixedwidth_1henv_137",
56
+ "icon-wrapper--1_25--square": "_icon-wrapper--1_25--square_1henv_142",
57
+ "icon-wrapper--1_25--roomy": "_icon-wrapper--1_25--roomy_1henv_147",
58
+ "icon-wrapper--1_5--none": "_icon-wrapper--1_5--none_1henv_153",
59
+ "icon-wrapper--1_5--fixedwidth": "_icon-wrapper--1_5--fixedwidth_1henv_158",
60
+ "icon-wrapper--1_5--square": "_icon-wrapper--1_5--square_1henv_163",
61
+ "icon-wrapper--1_5--roomy": "_icon-wrapper--1_5--roomy_1henv_168",
62
+ "icon-wrapper--2--none": "_icon-wrapper--2--none_1henv_174",
63
+ "icon-wrapper--2--fixedwidth": "_icon-wrapper--2--fixedwidth_1henv_179",
64
+ "icon-wrapper--2--square": "_icon-wrapper--2--square_1henv_184",
65
+ "icon-wrapper--2--roomy": "_icon-wrapper--2--roomy_1henv_189",
66
+ "icon-wrapper--2_5--none": "_icon-wrapper--2_5--none_1henv_195",
67
+ "icon-wrapper--2_5--fixedwidth": "_icon-wrapper--2_5--fixedwidth_1henv_200",
68
+ "icon-wrapper--2_5--square": "_icon-wrapper--2_5--square_1henv_205",
69
+ "icon-wrapper--2_5--roomy": "_icon-wrapper--2_5--roomy_1henv_210",
70
+ "icon-wrapper--3--none": "_icon-wrapper--3--none_1henv_216",
71
+ "icon-wrapper--3--fixedwidth": "_icon-wrapper--3--fixedwidth_1henv_221",
72
+ "icon-wrapper--3--square": "_icon-wrapper--3--square_1henv_226",
73
+ "icon-wrapper--3--roomy": "_icon-wrapper--3--roomy_1henv_231",
74
+ "icon-wrapper--4--none": "_icon-wrapper--4--none_1henv_237",
75
+ "icon-wrapper--4--fixedwidth": "_icon-wrapper--4--fixedwidth_1henv_242",
76
+ "icon-wrapper--4--square": "_icon-wrapper--4--square_1henv_247",
77
+ "icon-wrapper--4--roomy": "_icon-wrapper--4--roomy_1henv_252",
78
+ "icon-wrapper--5--none": "_icon-wrapper--5--none_1henv_258",
79
+ "icon-wrapper--5--fixedwidth": "_icon-wrapper--5--fixedwidth_1henv_263",
80
+ "icon-wrapper--5--square": "_icon-wrapper--5--square_1henv_268",
81
+ "icon-wrapper--5--roomy": "_icon-wrapper--5--roomy_1henv_273",
82
+ "icon-wrapper--6--none": "_icon-wrapper--6--none_1henv_279",
83
+ "icon-wrapper--6--fixedwidth": "_icon-wrapper--6--fixedwidth_1henv_284",
84
+ "icon-wrapper--6--square": "_icon-wrapper--6--square_1henv_289",
85
+ "icon-wrapper--6--roomy": "_icon-wrapper--6--roomy_1henv_294",
86
+ "icon-wrapper--7--none": "_icon-wrapper--7--none_1henv_300",
87
+ "icon-wrapper--7--fixedwidth": "_icon-wrapper--7--fixedwidth_1henv_305",
88
+ "icon-wrapper--7--square": "_icon-wrapper--7--square_1henv_310",
89
+ "icon-wrapper--7--roomy": "_icon-wrapper--7--roomy_1henv_315",
90
+ "icon-wrapper--8--none": "_icon-wrapper--8--none_1henv_321",
91
+ "icon-wrapper--8--fixedwidth": "_icon-wrapper--8--fixedwidth_1henv_326",
92
+ "icon-wrapper--8--square": "_icon-wrapper--8--square_1henv_331",
93
+ "icon-wrapper--8--roomy": "_icon-wrapper--8--roomy_1henv_336",
94
+ "icon-wrapper--9--none": "_icon-wrapper--9--none_1henv_342",
95
+ "icon-wrapper--9--fixedwidth": "_icon-wrapper--9--fixedwidth_1henv_347",
96
+ "icon-wrapper--9--square": "_icon-wrapper--9--square_1henv_352",
97
+ "icon-wrapper--9--roomy": "_icon-wrapper--9--roomy_1henv_357",
98
+ "icon-wrapper--10--none": "_icon-wrapper--10--none_1henv_363",
99
+ "icon-wrapper--10--fixedwidth": "_icon-wrapper--10--fixedwidth_1henv_368",
100
+ "icon-wrapper--10--square": "_icon-wrapper--10--square_1henv_373",
101
+ "icon-wrapper--10--roomy": "_icon-wrapper--10--roomy_1henv_378",
102
+ "icon-wrapper--size-0_5x": "_icon-wrapper--size-0_5x_1henv_384",
103
+ "icon-wrapper--size-0_75x": "_icon-wrapper--size-0_75x_1henv_389",
104
+ "icon-wrapper--size-1x": "_icon-wrapper--size-1x_1henv_394",
105
+ "icon-wrapper--size-1_25x": "_icon-wrapper--size-1_25x_1henv_399",
106
+ "icon-wrapper--size-1_5x": "_icon-wrapper--size-1_5x_1henv_404",
107
+ "icon-wrapper--size-2x": "_icon-wrapper--size-2x_1henv_409",
108
+ "icon-wrapper--size-2_5x": "_icon-wrapper--size-2_5x_1henv_414",
109
+ "icon-wrapper--size-3x": "_icon-wrapper--size-3x_1henv_419",
110
+ "icon-wrapper--size-4x": "_icon-wrapper--size-4x_1henv_424",
111
+ "icon-wrapper--size-5x": "_icon-wrapper--size-5x_1henv_429",
112
+ "icon-wrapper--size-6x": "_icon-wrapper--size-6x_1henv_434",
113
+ "icon-wrapper--size-7x": "_icon-wrapper--size-7x_1henv_439",
114
+ "icon-wrapper--size-8x": "_icon-wrapper--size-8x_1henv_444",
115
+ "icon-wrapper--size-9x": "_icon-wrapper--size-9x_1henv_449",
116
+ "icon-wrapper--size-10x": "_icon-wrapper--size-10x_1henv_454",
42
117
  icon: icon$1,
43
118
  fixedWidth,
44
119
  square,
45
120
  roomy
46
121
  };
122
+ const iconWrapper = cva(styles["icon-wrapper"], {
123
+ variants: {
124
+ iconSize: {
125
+ "0.5x": styles["icon-wrapper--size-0_5x"],
126
+ "0.75x": styles["icon-wrapper--size-0_75x"],
127
+ "1x": styles["icon-wrapper--size-1x"],
128
+ "1.25x": styles["icon-wrapper--size-1_25x"],
129
+ "1.5x": styles["icon-wrapper--size-1_5x"],
130
+ "2x": styles["icon-wrapper--size-2x"],
131
+ "2.5x": styles["icon-wrapper--size-2_5x"],
132
+ "3x": styles["icon-wrapper--size-3x"],
133
+ "4x": styles["icon-wrapper--size-4x"],
134
+ "5x": styles["icon-wrapper--size-5x"],
135
+ "6x": styles["icon-wrapper--size-6x"],
136
+ "7x": styles["icon-wrapper--size-7x"],
137
+ "8x": styles["icon-wrapper--size-8x"],
138
+ "9x": styles["icon-wrapper--size-9x"],
139
+ "10x": styles["icon-wrapper--size-10x"],
140
+ default: styles["icon-wrapper--size-1x"],
141
+ lg: styles["icon-wrapper--size-1_25x"],
142
+ sm: styles["icon-wrapper--size-1x"],
143
+ xs: styles["icon-wrapper--size-1x"],
144
+ "2xs": styles["icon-wrapper--size-0_75x"],
145
+ xl: styles["icon-wrapper--size-2x"],
146
+ "2xl": styles["icon-wrapper--size-3x"]
147
+ },
148
+ padding: {
149
+ none: "",
150
+ fixedWidth: "",
151
+ square: "",
152
+ roomy: ""
153
+ }
154
+ },
155
+ compoundVariants: [
156
+ // 0.5x
157
+ {
158
+ iconSize: "0.5x",
159
+ padding: "none",
160
+ class: styles["icon-wrapper--0_5--none"]
161
+ },
162
+ {
163
+ iconSize: "0.5x",
164
+ padding: "fixedWidth",
165
+ class: styles["icon-wrapper--0_5--fixedwidth"]
166
+ },
167
+ {
168
+ iconSize: "0.5x",
169
+ padding: "square",
170
+ class: styles["icon-wrapper--0_5--square"]
171
+ },
172
+ {
173
+ iconSize: "0.5x",
174
+ padding: "roomy",
175
+ class: styles["icon-wrapper--0_5--roomy"]
176
+ },
177
+ // 0.75x
178
+ {
179
+ iconSize: "0.75x",
180
+ padding: "none",
181
+ class: styles["icon-wrapper--0_75--none"]
182
+ },
183
+ {
184
+ iconSize: "0.75x",
185
+ padding: "fixedWidth",
186
+ class: styles["icon-wrapper--0_75--fixedwidth"]
187
+ },
188
+ {
189
+ iconSize: "0.75x",
190
+ padding: "square",
191
+ class: styles["icon-wrapper--0_75--square"]
192
+ },
193
+ {
194
+ iconSize: "0.75x",
195
+ padding: "roomy",
196
+ class: styles["icon-wrapper--0_75--roomy"]
197
+ },
198
+ // 1x
199
+ {
200
+ iconSize: "1x",
201
+ padding: "none",
202
+ class: styles["icon-wrapper--1--none"]
203
+ },
204
+ {
205
+ iconSize: "1x",
206
+ padding: "fixedWidth",
207
+ class: styles["icon-wrapper--1--fixedwidth"]
208
+ },
209
+ {
210
+ iconSize: "1x",
211
+ padding: "square",
212
+ class: styles["icon-wrapper--1--square"]
213
+ },
214
+ {
215
+ iconSize: "1x",
216
+ padding: "roomy",
217
+ class: styles["icon-wrapper--1--roomy"]
218
+ },
219
+ // 1.25x
220
+ {
221
+ iconSize: "1.25x",
222
+ padding: "none",
223
+ class: styles["icon-wrapper--1_25--none"]
224
+ },
225
+ {
226
+ iconSize: "1.25x",
227
+ padding: "fixedWidth",
228
+ class: styles["icon-wrapper--1_25--fixedwidth"]
229
+ },
230
+ {
231
+ iconSize: "1.25x",
232
+ padding: "square",
233
+ class: styles["icon-wrapper--1_25--square"]
234
+ },
235
+ {
236
+ iconSize: "1.25x",
237
+ padding: "roomy",
238
+ class: styles["icon-wrapper--1_25--roomy"]
239
+ },
240
+ // 1.5x
241
+ {
242
+ iconSize: "1.5x",
243
+ padding: "none",
244
+ class: styles["icon-wrapper--1_5--none"]
245
+ },
246
+ {
247
+ iconSize: "1.5x",
248
+ padding: "fixedWidth",
249
+ class: styles["icon-wrapper--1_5--fixedwidth"]
250
+ },
251
+ {
252
+ iconSize: "1.5x",
253
+ padding: "square",
254
+ class: styles["icon-wrapper--1_5--square"]
255
+ },
256
+ {
257
+ iconSize: "1.5x",
258
+ padding: "roomy",
259
+ class: styles["icon-wrapper--1_5--roomy"]
260
+ },
261
+ // 2x
262
+ {
263
+ iconSize: "2x",
264
+ padding: "none",
265
+ class: styles["icon-wrapper--2--none"]
266
+ },
267
+ {
268
+ iconSize: "2x",
269
+ padding: "fixedWidth",
270
+ class: styles["icon-wrapper--2--fixedwidth"]
271
+ },
272
+ {
273
+ iconSize: "2x",
274
+ padding: "square",
275
+ class: styles["icon-wrapper--2--square"]
276
+ },
277
+ {
278
+ iconSize: "2x",
279
+ padding: "roomy",
280
+ class: styles["icon-wrapper--2--roomy"]
281
+ },
282
+ // 2.5x
283
+ {
284
+ iconSize: "2.5x",
285
+ padding: "none",
286
+ class: styles["icon-wrapper--2_5--none"]
287
+ },
288
+ {
289
+ iconSize: "2.5x",
290
+ padding: "fixedWidth",
291
+ class: styles["icon-wrapper--2_5--fixedwidth"]
292
+ },
293
+ {
294
+ iconSize: "2.5x",
295
+ padding: "square",
296
+ class: styles["icon-wrapper--2_5--square"]
297
+ },
298
+ {
299
+ iconSize: "2.5x",
300
+ padding: "roomy",
301
+ class: styles["icon-wrapper--2_5--roomy"]
302
+ },
303
+ // 3x
304
+ {
305
+ iconSize: "3x",
306
+ padding: "none",
307
+ class: styles["icon-wrapper--3--none"]
308
+ },
309
+ {
310
+ iconSize: "3x",
311
+ padding: "fixedWidth",
312
+ class: styles["icon-wrapper--3--fixedwidth"]
313
+ },
314
+ {
315
+ iconSize: "3x",
316
+ padding: "square",
317
+ class: styles["icon-wrapper--3--square"]
318
+ },
319
+ {
320
+ iconSize: "3x",
321
+ padding: "roomy",
322
+ class: styles["icon-wrapper--3--roomy"]
323
+ },
324
+ // 4x
325
+ {
326
+ iconSize: "4x",
327
+ padding: "none",
328
+ class: styles["icon-wrapper--4--none"]
329
+ },
330
+ {
331
+ iconSize: "4x",
332
+ padding: "fixedWidth",
333
+ class: styles["icon-wrapper--4--fixedwidth"]
334
+ },
335
+ {
336
+ iconSize: "4x",
337
+ padding: "square",
338
+ class: styles["icon-wrapper--4--square"]
339
+ },
340
+ {
341
+ iconSize: "4x",
342
+ padding: "roomy",
343
+ class: styles["icon-wrapper--4--roomy"]
344
+ },
345
+ // 5x
346
+ {
347
+ iconSize: "5x",
348
+ padding: "none",
349
+ class: styles["icon-wrapper--5--none"]
350
+ },
351
+ {
352
+ iconSize: "5x",
353
+ padding: "fixedWidth",
354
+ class: styles["icon-wrapper--5--fixedwidth"]
355
+ },
356
+ {
357
+ iconSize: "5x",
358
+ padding: "square",
359
+ class: styles["icon-wrapper--5--square"]
360
+ },
361
+ {
362
+ iconSize: "5x",
363
+ padding: "roomy",
364
+ class: styles["icon-wrapper--5--roomy"]
365
+ },
366
+ // 6x
367
+ {
368
+ iconSize: "6x",
369
+ padding: "none",
370
+ class: styles["icon-wrapper--6--none"]
371
+ },
372
+ {
373
+ iconSize: "6x",
374
+ padding: "fixedWidth",
375
+ class: styles["icon-wrapper--6--fixedwidth"]
376
+ },
377
+ {
378
+ iconSize: "6x",
379
+ padding: "square",
380
+ class: styles["icon-wrapper--6--square"]
381
+ },
382
+ {
383
+ iconSize: "6x",
384
+ padding: "roomy",
385
+ class: styles["icon-wrapper--6--roomy"]
386
+ },
387
+ // 7x
388
+ {
389
+ iconSize: "7x",
390
+ padding: "none",
391
+ class: styles["icon-wrapper--7--none"]
392
+ },
393
+ {
394
+ iconSize: "7x",
395
+ padding: "fixedWidth",
396
+ class: styles["icon-wrapper--7--fixedwidth"]
397
+ },
398
+ {
399
+ iconSize: "7x",
400
+ padding: "square",
401
+ class: styles["icon-wrapper--7--square"]
402
+ },
403
+ {
404
+ iconSize: "7x",
405
+ padding: "roomy",
406
+ class: styles["icon-wrapper--7--roomy"]
407
+ },
408
+ // 8x
409
+ {
410
+ iconSize: "8x",
411
+ padding: "none",
412
+ class: styles["icon-wrapper--8--none"]
413
+ },
414
+ {
415
+ iconSize: "8x",
416
+ padding: "fixedWidth",
417
+ class: styles["icon-wrapper--8--fixedwidth"]
418
+ },
419
+ {
420
+ iconSize: "8x",
421
+ padding: "square",
422
+ class: styles["icon-wrapper--8--square"]
423
+ },
424
+ {
425
+ iconSize: "8x",
426
+ padding: "roomy",
427
+ class: styles["icon-wrapper--8--roomy"]
428
+ },
429
+ // 9x
430
+ {
431
+ iconSize: "9x",
432
+ padding: "none",
433
+ class: styles["icon-wrapper--9--none"]
434
+ },
435
+ {
436
+ iconSize: "9x",
437
+ padding: "fixedWidth",
438
+ class: styles["icon-wrapper--9--fixedwidth"]
439
+ },
440
+ {
441
+ iconSize: "9x",
442
+ padding: "square",
443
+ class: styles["icon-wrapper--9--square"]
444
+ },
445
+ {
446
+ iconSize: "9x",
447
+ padding: "roomy",
448
+ class: styles["icon-wrapper--9--roomy"]
449
+ },
450
+ // 10x
451
+ {
452
+ iconSize: "10x",
453
+ padding: "none",
454
+ class: styles["icon-wrapper--10--none"]
455
+ },
456
+ {
457
+ iconSize: "10x",
458
+ padding: "fixedWidth",
459
+ class: styles["icon-wrapper--10--fixedwidth"]
460
+ },
461
+ {
462
+ iconSize: "10x",
463
+ padding: "square",
464
+ class: styles["icon-wrapper--10--square"]
465
+ },
466
+ {
467
+ iconSize: "10x",
468
+ padding: "roomy",
469
+ class: styles["icon-wrapper--10--roomy"]
470
+ },
471
+ // Aliases map to their base sizes
472
+ {
473
+ iconSize: "default",
474
+ padding: "none",
475
+ class: styles["icon-wrapper--1--none"]
476
+ },
477
+ {
478
+ iconSize: "default",
479
+ padding: "fixedWidth",
480
+ class: styles["icon-wrapper--1--fixedwidth"]
481
+ },
482
+ {
483
+ iconSize: "default",
484
+ padding: "square",
485
+ class: styles["icon-wrapper--1--square"]
486
+ },
487
+ {
488
+ iconSize: "default",
489
+ padding: "roomy",
490
+ class: styles["icon-wrapper--1--roomy"]
491
+ },
492
+ {
493
+ iconSize: "lg",
494
+ padding: "none",
495
+ class: styles["icon-wrapper--1_25--none"]
496
+ },
497
+ {
498
+ iconSize: "lg",
499
+ padding: "fixedWidth",
500
+ class: styles["icon-wrapper--1_25--fixedwidth"]
501
+ },
502
+ {
503
+ iconSize: "lg",
504
+ padding: "square",
505
+ class: styles["icon-wrapper--1_25--square"]
506
+ },
507
+ {
508
+ iconSize: "lg",
509
+ padding: "roomy",
510
+ class: styles["icon-wrapper--1_25--roomy"]
511
+ },
512
+ {
513
+ iconSize: "sm",
514
+ padding: "none",
515
+ class: styles["icon-wrapper--1--none"]
516
+ },
517
+ {
518
+ iconSize: "sm",
519
+ padding: "fixedWidth",
520
+ class: styles["icon-wrapper--1--fixedwidth"]
521
+ },
522
+ {
523
+ iconSize: "sm",
524
+ padding: "square",
525
+ class: styles["icon-wrapper--1--square"]
526
+ },
527
+ {
528
+ iconSize: "sm",
529
+ padding: "roomy",
530
+ class: styles["icon-wrapper--1--roomy"]
531
+ },
532
+ {
533
+ iconSize: "xs",
534
+ padding: "none",
535
+ class: styles["icon-wrapper--1--none"]
536
+ },
537
+ {
538
+ iconSize: "xs",
539
+ padding: "fixedWidth",
540
+ class: styles["icon-wrapper--1--fixedwidth"]
541
+ },
542
+ {
543
+ iconSize: "xs",
544
+ padding: "square",
545
+ class: styles["icon-wrapper--1--square"]
546
+ },
547
+ {
548
+ iconSize: "xs",
549
+ padding: "roomy",
550
+ class: styles["icon-wrapper--1--roomy"]
551
+ },
552
+ {
553
+ iconSize: "2xs",
554
+ padding: "none",
555
+ class: styles["icon-wrapper--0_75--none"]
556
+ },
557
+ {
558
+ iconSize: "2xs",
559
+ padding: "fixedWidth",
560
+ class: styles["icon-wrapper--0_75--fixedwidth"]
561
+ },
562
+ {
563
+ iconSize: "2xs",
564
+ padding: "square",
565
+ class: styles["icon-wrapper--0_75--square"]
566
+ },
567
+ {
568
+ iconSize: "2xs",
569
+ padding: "roomy",
570
+ class: styles["icon-wrapper--0_75--roomy"]
571
+ },
572
+ {
573
+ iconSize: "xl",
574
+ padding: "none",
575
+ class: styles["icon-wrapper--2--none"]
576
+ },
577
+ {
578
+ iconSize: "xl",
579
+ padding: "fixedWidth",
580
+ class: styles["icon-wrapper--2--fixedwidth"]
581
+ },
582
+ {
583
+ iconSize: "xl",
584
+ padding: "square",
585
+ class: styles["icon-wrapper--2--square"]
586
+ },
587
+ {
588
+ iconSize: "xl",
589
+ padding: "roomy",
590
+ class: styles["icon-wrapper--2--roomy"]
591
+ },
592
+ {
593
+ iconSize: "2xl",
594
+ padding: "none",
595
+ class: styles["icon-wrapper--3--none"]
596
+ },
597
+ {
598
+ iconSize: "2xl",
599
+ padding: "fixedWidth",
600
+ class: styles["icon-wrapper--3--fixedwidth"]
601
+ },
602
+ {
603
+ iconSize: "2xl",
604
+ padding: "square",
605
+ class: styles["icon-wrapper--3--square"]
606
+ },
607
+ {
608
+ iconSize: "2xl",
609
+ padding: "roomy",
610
+ class: styles["icon-wrapper--3--roomy"]
611
+ }
612
+ ]
613
+ });
47
614
  const icon = cva(styles.icon, {
48
615
  variants: {
49
616
  padding: {
@@ -53,7 +620,6 @@ const icon = cva(styles.icon, {
53
620
  roomy: styles.roomy
54
621
  },
55
622
  iconSize: {
56
- default: styles.iconSize1x,
57
623
  "0.5x": styles.iconSize0_5x,
58
624
  "0.75x": styles.iconSize0_75x,
59
625
  "1x": styles.iconSize1x,
@@ -69,6 +635,7 @@ const icon = cva(styles.icon, {
69
635
  "8x": styles.iconSize8x,
70
636
  "9x": styles.iconSize9x,
71
637
  "10x": styles.iconSize10x,
638
+ default: styles.iconSize1x,
72
639
  lg: styles.iconSize1_25x,
73
640
  sm: styles.iconSize1x,
74
641
  xs: styles.iconSize1x,
@@ -105,14 +672,14 @@ const Icon = ({
105
672
  setKey((prevKey) => prevKey + 1);
106
673
  }, [iconName, iconPrefix, iconSize, iconPack, color, padding, flip, fixedWidth2, listItem, border, rotation, pull, spin, privateBgColorVariant]);
107
674
  const fontAwesomeSize = ["2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].includes(iconSize || "") ? `fa-${iconSize}` : "";
108
- const formatSize = (iconSize2) => `iconSize${iconSize2.replace(".", "_")}`;
109
- const customSizeClass = iconSize && styles[formatSize(iconSize)];
110
- const classNames = [iconPrefix, `fa-${iconName}`, fontAwesomeSize, iconPack ? `fa-${iconPack}` : "", flip ? `fa-flip-${flip}` : "", fixedWidth2 ? "fa-fw" : "", listItem ? "fa-li" : "", border ? "fa-border" : "", rotation ? `fa-rotate-${rotation}` : "", pull ? `fa-pull-${pull}` : "", spin ? "fa-spin" : "", customSizeClass].filter(Boolean).join(" ");
675
+ const classNames = [iconPrefix, `fa-${iconName}`, fontAwesomeSize, iconPack ? `fa-${iconPack}` : "", flip ? `fa-flip-${flip}` : "", fixedWidth2 ? "fa-fw" : "", listItem ? "fa-li" : "", border ? "fa-border" : "", rotation ? `fa-rotate-${rotation}` : "", pull ? `fa-pull-${pull}` : "", spin ? "fa-spin" : ""].filter(Boolean).join(" ");
111
676
  props["data-testid"];
112
- return /* @__PURE__ */ jsx("span", { className: `icon-wrapper ${styles["icon-wrapper"]} ${className || ""} ${icon({
113
- iconSize
114
- })}`, children: /* @__PURE__ */ jsx("i", { className: `${classNames} ${icon({
677
+ return /* @__PURE__ */ jsx("span", { className: `icon-wrapper ${iconWrapper({
678
+ iconSize,
115
679
  padding
680
+ })} ${className || ""}`, children: /* @__PURE__ */ jsx("i", { className: `${classNames} ${icon({
681
+ padding,
682
+ iconSize
116
683
  })} ${foregroundColorVariants({
117
684
  foregroundColor: color
118
685
  })} ${backgroundColorVariants({
package/dist/components/Icon/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/Label/Label.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { default as React } from 'react';
2
2
  import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
3
- import { ResponsiveProp } from '../../utils/breakpoint/responsive';
4
3
  type labelSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
5
4
  export interface LabelProps extends Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {
6
5
  /**
@@ -19,11 +18,6 @@ export interface LabelProps extends Omit<React.HTMLAttributes<Element>, 'classNa
19
18
  * The foreground color of the label
20
19
  */
21
20
  foregroundColor?: ForegroundVariants['foregroundColor'];
22
- /**
23
- * Truncate text with ellipsis
24
- * @default false
25
- */
26
- truncate?: ResponsiveProp<boolean>;
27
21
  }
28
- export declare const Label: ({ children, as: Component, size, foregroundColor, truncate, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const Label: ({ children, as: Component, size, foregroundColor, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
29
23
  export default Label;
package/dist/components/Label/Label.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../index-DdUYounA.js";
3
3
  import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
4
- import { useTruncate } from "../../utils/truncate/truncate.js";
5
- import '../../assets/truncate.css';import '../../assets/Label.css';/* empty css */
6
- const label$1 = "_label_1w8ui_1";
4
+ import '../../assets/Label.css';const label$1 = "_label_1w8ui_1";
7
5
  const xxs = "_xxs_1w8ui_7";
8
6
  const xs = "_xs_1w8ui_13";
9
7
  const sm = "_sm_1w8ui_19";
@@ -36,14 +34,13 @@ const Label = ({
36
34
  as: Component = "span",
37
35
  size = "md",
38
36
  foregroundColor,
39
- truncate = false,
40
37
  ...props
41
38
  }) => {
42
39
  const classNames = [label({
43
40
  size
44
41
  }), foregroundColorVariants({
45
42
  foregroundColor
46
- }), useTruncate(truncate)].join(" ");
43
+ })].join(" ");
47
44
  return /* @__PURE__ */ jsx(Component, { className: classNames, ...props, children });
48
45
  };
49
46
  export {
package/dist/components/Label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Label.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/Paragraph/Paragraph.d.ts CHANGED
@@ -2,7 +2,6 @@ import { default as React } from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
4
4
  import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
5
- import { ResponsiveProp } from '../../utils/breakpoint/responsive';
6
5
  declare const paragraph: (props?: ({
7
6
  size?: "lg" | "sm" | "xs" | "md" | null | undefined;
8
7
  textAlign?: "center" | "end" | "start" | null | undefined;
@@ -27,13 +26,8 @@ interface BaseProps extends ParagraphVariants {
27
26
  * @default "start"
28
27
  */
29
28
  textAlign?: ParagraphTextAlign;
30
- /**
31
- * Truncate text with ellipsis
32
- * @default false
33
- */
34
- truncate?: ResponsiveProp<boolean>;
35
29
  }
36
- type ResponsivePropKeys = 'size' | 'textAlign' | 'truncate';
30
+ type ResponsivePropKeys = 'size' | 'textAlign';
37
31
  export type ParagraphProps = WithResponsiveProps<BaseProps, ResponsivePropKeys>;
38
- export declare const Paragraph: ({ children, size, foregroundColor, textAlign, truncate, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
32
+ export declare const Paragraph: ({ children, size, foregroundColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
39
33
  export default Paragraph;
package/dist/components/Paragraph/Paragraph.js CHANGED
@@ -1,10 +1,8 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../index-DdUYounA.js";
3
3
  import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
4
- import { useTruncate } from "../../utils/truncate/truncate.js";
5
- import '../../assets/truncate.css';import '../../assets/Paragraph.css';/* empty css */
6
4
  import { getBaseValue, generateResponsiveClasses } from "../../utils/breakpoint/responsiveSSR.js";
7
- const paragraph$1 = "_paragraph_8nh8o_4";
5
+ import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_8nh8o_4";
8
6
  const styles = {
9
7
  paragraph: paragraph$1,
10
8
  "size-xs": "_size-xs_8nh8o_39",
@@ -75,14 +73,12 @@ const Paragraph = ({
75
73
  size = "md",
76
74
  foregroundColor = "secondary",
77
75
  textAlign = "start",
78
- truncate = false,
79
76
  ...props
80
77
  }) => {
81
78
  const baseSize = getBaseValue(size, "md");
82
79
  const baseAlign = getBaseValue(textAlign, "start");
83
80
  const sizeResp = getResponsiveClasses(size, "size");
84
81
  const alignResp = getResponsiveClasses(textAlign, "align");
85
- const truncateClass = useTruncate(truncate);
86
82
  return /* @__PURE__ */ jsx("p", { className: [
87
83
  paragraph({
88
84
  size: baseSize,
@@ -93,8 +89,7 @@ const Paragraph = ({
93
89
  }),
94
90
  ...sizeResp,
95
91
  // md/lg/xl/2xl overrides
96
- ...alignResp,
97
- truncateClass
92
+ ...alignResp
98
93
  ].join(" "), ...props, children });
99
94
  };
100
95
  export {
package/dist/components/Paragraph/Paragraph.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Paragraph.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/Spacer/Spacer.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  export declare const spacerVariants: (props?: ({
3
- w?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
4
- h?: 0 | "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
3
+ w?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
4
+ h?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
5
5
  inline?: boolean | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
7
  export type SpacerVariants = VariantProps<typeof spacerVariants>;
package/dist/components/SubHeading/SubHeading.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
4
- import { ResponsiveProp } from '../../utils/breakpoint/responsive';
5
4
  declare const subHeading: (props?: ({
6
5
  size?: "sm" | "xs" | null | undefined;
7
6
  textAlign?: "center" | "end" | "start" | null | undefined;
@@ -32,11 +31,6 @@ export interface SubHeadingProps extends SubHeadingVariants {
32
31
  * @default "start"
33
32
  */
34
33
  textAlign?: 'start' | 'center' | 'end';
35
- /**
36
- * Truncate text with ellipsis
37
- * @default false
38
- */
39
- truncate?: ResponsiveProp<boolean>;
40
34
  }
41
- export declare const SubHeading: ({ children, as: Component, size, foregroundColor, textAlign, truncate, ...props }: SubHeadingProps) => import("react/jsx-runtime").JSX.Element;
35
+ export declare const SubHeading: ({ children, as: Component, size, foregroundColor, textAlign, ...props }: SubHeadingProps) => import("react/jsx-runtime").JSX.Element;
42
36
  export default SubHeading;
package/dist/components/SubHeading/SubHeading.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c as cva } from "../../index-DdUYounA.js";
3
3
  import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
4
- import { useTruncate } from "../../utils/truncate/truncate.js";
5
- import '../../assets/truncate.css';import '../../assets/SubHeading.css';/* empty css */
6
- const subHeading$1 = "_subHeading_up5r4_1";
4
+ import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_up5r4_1";
7
5
  const xs = "_xs_up5r4_8";
8
6
  const sm = "_sm_up5r4_15";
9
7
  const start = "_start_up5r4_22";
@@ -40,17 +38,15 @@ const SubHeading = ({
40
38
  size,
41
39
  foregroundColor = "accentPrimary",
42
40
  textAlign = "start",
43
- truncate = false,
44
41
  ...props
45
42
  }) => {
46
43
  const effectiveSize = size;
47
- const truncateClass = useTruncate(truncate);
48
44
  return /* @__PURE__ */ jsx(Component, { className: [subHeading({
49
45
  size: effectiveSize,
50
46
  textAlign
51
47
  }), foregroundColorVariants({
52
48
  foregroundColor
53
- }), truncateClass].join(" "), ...props, children });
49
+ })].join(" "), ...props, children });
54
50
  };
55
51
  export {
56
52
  SubHeading,
package/dist/components/SubHeading/SubHeading.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SubHeading.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SubHeading.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/utils/border/border.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  import { InputType } from 'storybook/internal/types';
3
3
  export declare const borderVariants: (props?: ({
4
- borderRadius?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "circle" | "md" | "3xs" | "4xs" | "5xs" | "6xs" | "card" | null | undefined;
5
- borderWidth?: "none" | "lg" | "sm" | "xs" | "xl" | "md" | null | undefined;
4
+ borderRadius?: "lg" | "sm" | "xs" | "2xs" | "xl" | "none" | "circle" | "md" | "3xs" | "4xs" | "5xs" | "6xs" | "card" | null | undefined;
5
+ borderWidth?: "lg" | "sm" | "xs" | "xl" | "none" | "md" | null | undefined;
6
6
  borderStyle?: "none" | "solid" | "dashed" | null | undefined;
7
7
  borderColour?: "secondary" | "none" | "white" | "critical" | "warning" | "caution" | "success" | "tertiary" | "accent" | "information" | "inverse" | null | undefined;
8
8
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
package/dist/utils/padding/padding.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
2
  import { InputType } from 'storybook/internal/types';
3
3
  export declare const paddingVariants: (props?: ({
4
- padding?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
5
- paddingX?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
6
- paddingY?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
7
- paddingTop?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
8
- paddingRight?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
9
- paddingBottom?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
10
- paddingLeft?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
4
+ padding?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
5
+ paddingX?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
6
+ paddingY?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
7
+ paddingTop?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
8
+ paddingRight?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
9
+ paddingBottom?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
10
+ paddingLeft?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
11
11
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
12
12
  export type PaddingVariants = VariantProps<typeof paddingVariants>;
13
13
  export declare const paddingArgTypes: Record<string, InputType>;
package/dist/utils/stories/DraggableContainer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useState, useRef, useEffect } from "react";
3
- import '../../assets/skeleton.css';import '../../assets/truncate.css';import '../../assets/global.css';/* empty css */
3
+ import '../../assets/skeleton.css';import '../../assets/global.css';/* empty css */
4
4
  import "../../components/Accordion/Accordion.js";
5
5
  import "../../components/AviosCurrencySymbol/AviosCurrencySymbol.js";
6
6
  import { Box } from "../../components/Box/Box.js";
@@ -26,7 +26,6 @@ import { Heading } from "../../components/Heading/Heading.js";
26
26
  import "../../components/DetailsDisclosure/DetailsDisclosure.js";
27
27
  import "../../components/Dialog/Dialog.js";
28
28
  import "../../components/Link/Link.js";
29
- /* empty css */
30
29
  import "../../components/Fieldset/Fieldset.js";
31
30
  import "../../components/Grid/Grid.js";
32
31
  import "../../components/Image/Image.js";
package/dist/utils/stories/DraggableContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DraggableContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DraggableContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alto-avios/alto-ui",
3
- "version": "5.0.0",
3
+ "version": "5.0.1",
4
4
  "description": "A react component library for Alto Design System",
5
5
  "author": {
6
6
  "name": "Ian Caldwell IAGL",
package/dist/assets/truncate.css DELETED
@@ -1 +0,0 @@
1
- .u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}