@muraldevkit/ui-toolkit 4.64.0 → 4.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,24 +1,32 @@
1
1
 
2
2
  @use '../skeleton.mixins.scss' as *;
3
3
  $line: var(--mrl-spacing-03);
4
+ @mixin fit-to-line-height($line-height) {
5
+ height: $line;
6
+ margin-bottom: calc(#{$line-height} - #{$line});
7
+ margin-top: calc((#{$line-height} - #{$line}) / 2);
8
+ }
4
9
  .MrlSkeletonText {
5
10
  @include mrl-skeleton-base;
6
11
  @include mrl-skeleton-shimmer-effect;
7
12
  }
8
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
9
- @each $size in $mrl-title-sizes {
10
- .MrlSkeletonText-#{$size} {
11
- $line-height: calc(
12
- var(--mrl-type-size-text-#{$size}) * var(--mrl-type-line-height-text-#{$size})
13
- );
14
- height: $line;
15
- margin-bottom: calc($line-height - $line);
16
- margin-top: calc(calc($line-height - $line) / 2);
17
- }
13
+ .MrlSkeletonText-large {
14
+ $line-height: calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large));
15
+ @include fit-to-line-height($line-height);
16
+ }
17
+ .MrlSkeletonText-small {
18
+ $line-height: calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small));
19
+ @include fit-to-line-height($line-height);
20
+ }
21
+ .MrlSkeletonText-xsmall {
22
+ $line-height: calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall));
23
+ @include fit-to-line-height($line-height);
24
+ }
25
+ .MrlSkeletonText-xxsmall {
26
+ $line-height: calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall));
27
+ @include fit-to-line-height($line-height);
18
28
  }
19
29
  .MrlSkeletonText-medium {
20
30
  $line-height: calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text));
21
- height: $line;
22
- margin-bottom: calc($line-height - $line);
23
- margin-top: calc(calc($line-height - $line) / 2);
31
+ @include fit-to-line-height($line-height);
24
32
  }
@@ -4,11 +4,20 @@
4
4
  --mrl-text-weight: var(--mrl-type-weight-text);
5
5
  --mrl-text-spacing: var(--mrl-type-spacing-text);
6
6
  --mrl-text-height: var(--mrl-type-line-height-text);
7
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
8
- @each $size in $mrl-title-sizes {
9
- &.MrlText--#{$size} {
10
- --mrl-text-size: var(--mrl-type-size-text-#{$size});
11
- --mrl-text-height: var(--mrl-type-line-height-text-#{$size});
12
- }
7
+ &.MrlText--large {
8
+ --mrl-text-size: var(--mrl-type-size-text-large);
9
+ --mrl-text-height: var(--mrl-type-line-height-text-large);
10
+ }
11
+ &.MrlText--small {
12
+ --mrl-text-size: var(--mrl-type-size-text-small);
13
+ --mrl-text-height: var(--mrl-type-line-height-text-small);
14
+ }
15
+ &.MrlText--xsmall {
16
+ --mrl-text-size: var(--mrl-type-size-text-xsmall);
17
+ --mrl-text-height: var(--mrl-type-line-height-text-xsmall);
18
+ }
19
+ &.MrlText--xxsmall {
20
+ --mrl-text-size: var(--mrl-type-size-text-xxsmall);
21
+ --mrl-text-height: var(--mrl-type-line-height-text-xxsmall);
13
22
  }
14
23
  }
@@ -1,25 +1,42 @@
1
1
 
2
- $mrl-heading-use-cases: 'display', 'headline';
3
- $mrl-heading-sizes: 'large', 'small', 'xsmall';
4
- @each $use-case in $mrl-heading-use-cases {
5
- .MrlTextHeading-#{$use-case} {
6
- @if $use-case == 'display' {
7
- --mrl-heading-family: var(--mrl-heading-font-alt);
8
- } @else {
9
- --mrl-heading-family: var(--mrl-heading-font);
10
- }
11
- --mrl-heading-size: var(--mrl-type-size-#{$use-case});
12
- --mrl-heading-weight: var(--mrl-type-weight-#{$use-case});
13
- --mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case});
14
- --mrl-heading-height: var(--mrl-type-line-height-#{$use-case});
15
- }
16
- @each $size in $mrl-heading-sizes {
17
- .MrlTextHeading-#{$use-case}--#{$size} {
18
- --mrl-heading-size: var(--mrl-type-size-#{$use-case}-#{$size});
19
- --mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case}-#{$size});
20
- --mrl-heading-height: var(--mrl-type-line-height-#{$use-case}-#{$size});
21
- }
22
- }
2
+ .MrlTextHeading-display {
3
+ --mrl-heading-family: var(--mrl-heading-font-alt);
4
+ --mrl-heading-size: var(--mrl-type-size-display);
5
+ --mrl-heading-weight: var(--mrl-type-weight-display);
6
+ --mrl-heading-spacing: var(--mrl-type-spacing-display);
7
+ --mrl-heading-height: var(--mrl-type-line-height-display);
8
+ }
9
+ .MrlTextHeading-display--large {
10
+ --mrl-heading-size: var(--mrl-type-size-display-large);
11
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-large);
12
+ --mrl-heading-height: var(--mrl-type-line-height-display-large);
13
+ }
14
+ .MrlTextHeading-display--small {
15
+ --mrl-heading-size: var(--mrl-type-size-display-small);
16
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-small);
17
+ --mrl-heading-height: var(--mrl-type-line-height-display-small);
18
+ }
19
+ .MrlTextHeading-display--xsmall {
20
+ --mrl-heading-size: var(--mrl-type-size-display-xsmall);
21
+ --mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);
22
+ --mrl-heading-height: var(--mrl-type-line-height-display-xsmall);
23
+ }
24
+ .MrlTextHeading-headline {
25
+ --mrl-heading-family: var(--mrl-heading-font);
26
+ --mrl-heading-size: var(--mrl-type-size-headline);
27
+ --mrl-heading-weight: var(--mrl-type-weight-headline);
28
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline);
29
+ --mrl-heading-height: var(--mrl-type-line-height-headline);
30
+ }
31
+ .MrlTextHeading-headline--large {
32
+ --mrl-heading-size: var(--mrl-type-size-headline-large);
33
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline-large);
34
+ --mrl-heading-height: var(--mrl-type-line-height-headline-large);
35
+ }
36
+ .MrlTextHeading-headline--small {
37
+ --mrl-heading-size: var(--mrl-type-size-headline-small);
38
+ --mrl-heading-spacing: var(--mrl-type-spacing-headline-small);
39
+ --mrl-heading-height: var(--mrl-type-line-height-headline-small);
23
40
  }
24
41
  .MrlTextHeading-title {
25
42
  --mrl-heading-family: var(--mrl-heading-font);
@@ -28,12 +45,21 @@ $mrl-heading-sizes: 'large', 'small', 'xsmall';
28
45
  --mrl-heading-spacing: var(--mrl-type-spacing-text);
29
46
  --mrl-heading-height: var(--mrl-type-line-height-title);
30
47
  }
31
- $mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
32
- @each $size in $mrl-title-sizes {
33
- .MrlTextHeading-title--#{$size} {
34
- --mrl-heading-size: var(--mrl-type-size-text-#{$size});
35
- --mrl-heading-height: var(--mrl-type-line-height-title-#{$size});
36
- }
48
+ .MrlTextHeading-title--large {
49
+ --mrl-heading-size: var(--mrl-type-size-text-large);
50
+ --mrl-heading-height: var(--mrl-type-line-height-title-large);
51
+ }
52
+ .MrlTextHeading-title--small {
53
+ --mrl-heading-size: var(--mrl-type-size-text-small);
54
+ --mrl-heading-height: var(--mrl-type-line-height-title-small);
55
+ }
56
+ .MrlTextHeading-title--xsmall {
57
+ --mrl-heading-size: var(--mrl-type-size-text-xsmall);
58
+ --mrl-heading-height: var(--mrl-type-line-height-title-xsmall);
59
+ }
60
+ .MrlTextHeading-title--xxsmall {
61
+ --mrl-heading-size: var(--mrl-type-size-text-xxsmall);
62
+ --mrl-heading-height: var(--mrl-type-line-height-title-xxsmall);
37
63
  }
38
64
  .MrlTextHeading-title--secondary {
39
65
  --mrl-heading-weight: var(--mrl-type-weight-title-secondary);
package/dist/styles.css CHANGED
@@ -319,7 +319,7 @@
319
319
  .MrlSidebar--BgZ1u{align-items:stretch;margin-right:var(--mrl-spacing-05);width:calc(var(--mrl-spacing-14) + var(--mrl-spacing-08))}.MrlSidebar--mobile--ze4Hn{align-items:stretch;background:var(--mrl-color-background-page);border-radius:0 var(--mrl-radii-03) var(--mrl-radii-03) 0;bottom:0;left:calc((var(--mrl-spacing-14) + var(--mrl-spacing-08) + 2px)*-1);max-height:calc(100% - var(--mrl-spacing-03));overflow-y:auto;padding:4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);position:fixed;top:var(--mrl-spacing-03);transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1),left var(--mrl-duration-03) var(--mrl-timing-m1);z-index:2}@media(prefers-reduced-motion: reduce){.MrlSidebar--mobile--ze4Hn{transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1)}}.MrlSidebar--mobile--open--WpVyZ{left:0;opacity:1}.MrlSidebar--offset--PDTE_.MrlSidebar--mobile--ze4Hn,.MrlSidebar--offset--PDTE_.MrlSidebar-overlay--mWzx1{bottom:0}.MrlSidebar-menu--wFDdM.MrlSidebar-menu-trigger--pNEb8{left:var(--mrl-spacing-05);position:absolute;top:var(--mrl-spacing-05);width:50px;z-index:1}.MrlSidebar-menu-close--zZq68{position:fixed}.MrlSidebar-overlay--mWzx1{background-color:rgba(0,0,0,.56);inset:0 0 0 -10000px;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1);z-index:1}.MrlSidebar-overlay--visible--wjTzw{opacity:1;pointer-events:initial}.MrlSidebar-content--2VXk1{display:none}.MrlSidebar-content--visible--ZLFsB{display:block}
320
320
  .MrlErrorPage--qrFA2{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{align-items:center;display:flex;justify-content:space-between;padding:var(--mrl-spacing-08) var(--mrl-spacing-07) var(--mrl-spacing-11) var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl .MrlSvgContainer{height:1.875rem;width:6.188rem}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{flex-grow:1;padding:0 var(--mrl-spacing-07) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-title--gBYGh{color:var(--mrl-color-text-heading);font-family:var(--mrl-heading-font-alt);padding-bottom:var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-brand-colors--GMR4w{flex-grow:0;flex-shrink:0}@media(min-width: 52.125rem){.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{padding:var(--mrl-spacing-08) var(--mrl-spacing-08) var(--mrl-spacing-11) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{margin:0 auto;max-width:33.75rem;padding:0 0 var(--mrl-spacing-08) 0}}
321
321
  .MrlText--qWcjF{--mrl-text-size: var(--mrl-type-size-text);--mrl-text-weight: var(--mrl-type-weight-text);--mrl-text-spacing: var(--mrl-type-spacing-text);--mrl-text-height: var(--mrl-type-line-height-text)}.MrlText--qWcjF.MrlText--large--Up17c{--mrl-text-size: var(--mrl-type-size-text-large);--mrl-text-height: var(--mrl-type-line-height-text-large)}.MrlText--qWcjF.MrlText--small--oJ2NK{--mrl-text-size: var(--mrl-type-size-text-small);--mrl-text-height: var(--mrl-type-line-height-text-small)}.MrlText--qWcjF.MrlText--xsmall--OjNGe{--mrl-text-size: var(--mrl-type-size-text-xsmall);--mrl-text-height: var(--mrl-type-line-height-text-xsmall)}.MrlText--qWcjF.MrlText--xxsmall--qfF1L{--mrl-text-size: var(--mrl-type-size-text-xxsmall);--mrl-text-height: var(--mrl-type-line-height-text-xxsmall)}.MrlText--qWcjF{font-family:var(--mrl-body-font);font-size:var(--mrl-text-size);font-weight:var(--mrl-text-weight);letter-spacing:var(--mrl-text-spacing);line-height:var(--mrl-text-height)}
322
- .MrlTextHeading-display--YPlsQ{--mrl-heading-family: var(--mrl-heading-font-alt);--mrl-heading-size: var(--mrl-type-size-display);--mrl-heading-weight: var(--mrl-type-weight-display);--mrl-heading-spacing: var(--mrl-type-spacing-display);--mrl-heading-height: var(--mrl-type-line-height-display)}.MrlTextHeading-display--large--OoGc4{--mrl-heading-size: var(--mrl-type-size-display-large);--mrl-heading-spacing: var(--mrl-type-spacing-display-large);--mrl-heading-height: var(--mrl-type-line-height-display-large)}.MrlTextHeading-display--small--gwHpu{--mrl-heading-size: var(--mrl-type-size-display-small);--mrl-heading-spacing: var(--mrl-type-spacing-display-small);--mrl-heading-height: var(--mrl-type-line-height-display-small)}.MrlTextHeading-display--xsmall--qgA98{--mrl-heading-size: var(--mrl-type-size-display-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);--mrl-heading-height: var(--mrl-type-line-height-display-xsmall)}.MrlTextHeading-headline--paxPG{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-headline);--mrl-heading-weight: var(--mrl-type-weight-headline);--mrl-heading-spacing: var(--mrl-type-spacing-headline);--mrl-heading-height: var(--mrl-type-line-height-headline)}.MrlTextHeading-headline--large--edpNl{--mrl-heading-size: var(--mrl-type-size-headline-large);--mrl-heading-spacing: var(--mrl-type-spacing-headline-large);--mrl-heading-height: var(--mrl-type-line-height-headline-large)}.MrlTextHeading-headline--small--wvgZG{--mrl-heading-size: var(--mrl-type-size-headline-small);--mrl-heading-spacing: var(--mrl-type-spacing-headline-small);--mrl-heading-height: var(--mrl-type-line-height-headline-small)}.MrlTextHeading-headline--xsmall--kUBii{--mrl-heading-size: var(--mrl-type-size-headline-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-headline-xsmall);--mrl-heading-height: var(--mrl-type-line-height-headline-xsmall)}.MrlTextHeading-title--Wlh8i{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-text);--mrl-heading-weight: var(--mrl-type-weight-title);--mrl-heading-spacing: var(--mrl-type-spacing-text);--mrl-heading-height: var(--mrl-type-line-height-title)}.MrlTextHeading-title--large--VbutV{--mrl-heading-size: var(--mrl-type-size-text-large);--mrl-heading-height: var(--mrl-type-line-height-title-large)}.MrlTextHeading-title--small--BPZW2{--mrl-heading-size: var(--mrl-type-size-text-small);--mrl-heading-height: var(--mrl-type-line-height-title-small)}.MrlTextHeading-title--xsmall--MkPpJ{--mrl-heading-size: var(--mrl-type-size-text-xsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xsmall)}.MrlTextHeading-title--xxsmall--R9i95{--mrl-heading-size: var(--mrl-type-size-text-xxsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xxsmall)}.MrlTextHeading-title--secondary--VzSQc{--mrl-heading-weight: var(--mrl-type-weight-title-secondary)}.MrlTextHeading-display--YPlsQ{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-headline--paxPG{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-display--YPlsQ strong{font-weight:var(--mrl-font-weight-02)}.MrlTextHeading-title--Wlh8i{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}
322
+ .MrlTextHeading-display--YPlsQ{--mrl-heading-family: var(--mrl-heading-font-alt);--mrl-heading-size: var(--mrl-type-size-display);--mrl-heading-weight: var(--mrl-type-weight-display);--mrl-heading-spacing: var(--mrl-type-spacing-display);--mrl-heading-height: var(--mrl-type-line-height-display)}.MrlTextHeading-display--large--OoGc4{--mrl-heading-size: var(--mrl-type-size-display-large);--mrl-heading-spacing: var(--mrl-type-spacing-display-large);--mrl-heading-height: var(--mrl-type-line-height-display-large)}.MrlTextHeading-display--small--gwHpu{--mrl-heading-size: var(--mrl-type-size-display-small);--mrl-heading-spacing: var(--mrl-type-spacing-display-small);--mrl-heading-height: var(--mrl-type-line-height-display-small)}.MrlTextHeading-display--xsmall--qgA98{--mrl-heading-size: var(--mrl-type-size-display-xsmall);--mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);--mrl-heading-height: var(--mrl-type-line-height-display-xsmall)}.MrlTextHeading-headline--paxPG{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-headline);--mrl-heading-weight: var(--mrl-type-weight-headline);--mrl-heading-spacing: var(--mrl-type-spacing-headline);--mrl-heading-height: var(--mrl-type-line-height-headline)}.MrlTextHeading-headline--large--edpNl{--mrl-heading-size: var(--mrl-type-size-headline-large);--mrl-heading-spacing: var(--mrl-type-spacing-headline-large);--mrl-heading-height: var(--mrl-type-line-height-headline-large)}.MrlTextHeading-headline--small--wvgZG{--mrl-heading-size: var(--mrl-type-size-headline-small);--mrl-heading-spacing: var(--mrl-type-spacing-headline-small);--mrl-heading-height: var(--mrl-type-line-height-headline-small)}.MrlTextHeading-title--Wlh8i{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-text);--mrl-heading-weight: var(--mrl-type-weight-title);--mrl-heading-spacing: var(--mrl-type-spacing-text);--mrl-heading-height: var(--mrl-type-line-height-title)}.MrlTextHeading-title--large--VbutV{--mrl-heading-size: var(--mrl-type-size-text-large);--mrl-heading-height: var(--mrl-type-line-height-title-large)}.MrlTextHeading-title--small--BPZW2{--mrl-heading-size: var(--mrl-type-size-text-small);--mrl-heading-height: var(--mrl-type-line-height-title-small)}.MrlTextHeading-title--xsmall--MkPpJ{--mrl-heading-size: var(--mrl-type-size-text-xsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xsmall)}.MrlTextHeading-title--xxsmall--R9i95{--mrl-heading-size: var(--mrl-type-size-text-xxsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xxsmall)}.MrlTextHeading-title--secondary--VzSQc{--mrl-heading-weight: var(--mrl-type-weight-title-secondary)}.MrlTextHeading-display--YPlsQ{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-headline--paxPG{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-display--YPlsQ strong{font-weight:var(--mrl-font-weight-02)}.MrlTextHeading-title--Wlh8i{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}
323
323
  .MrlBrandColor-color-black--qezls{background-color:#000;grid-area:color-black}.MrlBrandColor-color-jade--FXR41{background-color:#00c27a;grid-area:color-jade}.MrlBrandColor-color-blue--QTrte{background-color:#5887ff;grid-area:color-blue}.MrlBrandColor-color-pink--ec2Rk{background-color:#fc83ff;grid-area:color-pink}.MrlBrandColor-color-red--m9sa2{background-color:#ff4b4b;grid-area:color-red}.MrlBrandColor-color-yellow--VsIdM{background-color:#fa0;grid-area:color-yellow}.MrlBrandColor-color-grape--FcHD9{background-color:#be53ff;grid-area:color-grape}.MrlBrandColor-color-sky--CTufh{background-color:#79c1ff;grid-area:color-sky}.MrlBrandColor-color-lemon--vKUgk{background-color:#ffe146;grid-area:color-lemon}.MrlBrandColor-color-lavander--jdxdU{background-color:#e6bfff;grid-area:color-lavander}.MrlBrandColors--cnjoA{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:1fr;height:15rem;width:100%}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink"}.MrlPattern-02--ShfYW{grid-template-areas:" color-red color-red color-red color-red color-red color-grape color-grape color-grape"}.MrlPattern-03--L1EDT{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade"}.MrlPattern-04--bVc3U{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-06--zkwV6{grid-template-areas:" color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black"}@media(min-width: 37.5rem){.MrlBrandColors--cnjoA{grid-template-columns:repeat(32, 1fr)}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-red color-red color-red color-red color-red color-red color-black color-black color-black"}.MrlPattern-02--ShfYW{grid-template-areas:" color-blue color-blue color-blue color-black color-black color-black color-yellow color-red color-red color-red color-red color-red color-red color-red color-red color-red color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-03--L1EDT{grid-template-areas:" color-black color-black color-black color-lemon color-lemon color-red color-red color-red color-red color-red color-red color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade color-jade color-jade color-jade color-jade color-sky color-sky color-sky color-sky"}.MrlPattern-04--bVc3U{grid-template-areas:" color-jade color-jade color-sky color-sky color-sky color-sky color-sky color-sky color-black color-black color-black color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-red color-red"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-blue color-blue color-blue color-blue color-blue color-blue color-blue color-red color-red"}.MrlPattern-06--zkwV6{grid-template-areas:" color-yellow color-yellow color-yellow color-yellow color-yellow color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-black color-red color-sky color-sky color-sky color-sky color-sky color-sky color-sky color-sky"}}
324
324
  .mrl-u-focus-wrapper--sGwMW{position:relative}a.mrl-link--Xzu_x{--mrl-link-border-style: solid;--mrl-link-border-width: var(--mrl-line-width-border);--mrl-link-color: rgba(var(--mrl-gray-90), 1);--mrl-link-color-active: rgb(var(--mrl-blue-90));--mrl-link-color-hover: rgb(var(--mrl-blue-70));--mrl-link-font-weight: 700;--mrl-link-border-width-focus: var(--mrl-line-width-focus);--mrl-link-color-focus: var(--mrl-color-focus);--mrl-link-offset-focus: var(--mrl-space-offset-focus)}a.mrl-link--mono--LL0fI:hover{--mrl-link-color-hover: rgba(var(--mrl-gray-100), 1)}a.mrl-link--mono--LL0fI:active{--mrl-link-color-active: rgba(var(--mrl-black), 1)}a.mrl-link--inverse--bzMVs{--mrl-link-color: var(--mrl-color-text-inverse)}a.mrl-link--inverse--bzMVs:hover{--mrl-link-color-hover: var(--mrl-white-opacity-08)}a.mrl-link--inverse--bzMVs:active{--mrl-link-color-active: var(--mrl-white-opacity-06)}.mrl-link--Xzu_x{position:relative;align-items:center;color:var(--mrl-link-color);display:inline-flex;font-weight:var(--mrl-link-font-weight);text-decoration:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m2);transition-property:border-color,color}.mrl-link--Xzu_x:focus-visible{outline:none}.mrl-link--Xzu_x:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
325
325
  var(--mrl-radii-02) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
@@ -502,7 +502,7 @@
502
502
  var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
503
503
  )*-1)}}.MrlSidebarNavItem--QDN9P>a:hover{background-color:rgba(var(--mrl-gray-20), 1)}.MrlSidebarNavItem--QDN9P>a:active{background-color:rgba(var(--mrl-gray-30), 1)}.MrlSidebarNavItem--QDN9P.hasIcon--TUNgW>a{padding:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) calc(var(--mrl-spacing-01) + var(--mrl-spacing-03))}.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a,.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a:hover{background-color:var(--mrl-color-background-highlight-active);color:var(--mrl-color-text-inverse-active)}.MrlSidebarNavItem-icon--VIvzN{height:var(--mrl-spacing-06);margin-right:calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));width:var(--mrl-spacing-06)}
504
504
  @keyframes shimmer--eczHY{0%{background-position:right}100%{background-position:left}}.MrlSkeleton--L9ZOR{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeleton--L9ZOR::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--eczHY;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeleton--L9ZOR::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeleton-circle--V35an{border-radius:50%}
505
- @keyframes shimmer--n2jh9{0%{background-position:right}100%{background-position:left}}.MrlSkeletonText--aZt7x{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeletonText--aZt7x::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--n2jh9;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeletonText--aZt7x::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeletonText-large--hMKwp{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-small--c6iHj{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xsmall--_I_hY{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xxsmall--iasp3{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-medium--VD22L{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03))/2)}
505
+ @keyframes shimmer--n2jh9{0%{background-position:right}100%{background-position:left}}.MrlSkeletonText--aZt7x{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeletonText--aZt7x::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--n2jh9;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeletonText--aZt7x::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeletonText-large--hMKwp{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-large) * var(--mrl-type-line-height-text-large)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-small--c6iHj{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-small) * var(--mrl-type-line-height-text-small)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xsmall--_I_hY{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-xsmall) * var(--mrl-type-line-height-text-xsmall)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xxsmall--iasp3{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text-xxsmall) * var(--mrl-type-line-height-text-xxsmall)) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-medium--VD22L{height:var(--mrl-spacing-03);margin-bottom:calc(calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03));margin-top:calc((calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text)) - var(--mrl-spacing-03))/2)}
506
506
  .mrl-empty--bBaPG{text-align:center}.mrl-empty-default--UfKTY{max-width:200px}.mrl-empty-large--jiZ0b{max-width:360px}.mrl-empty-text--EE6Hx{margin:var(--mrl-spacing-05) 0}.mrl-empty-text-large--tKa8r{margin:var(--mrl-spacing-06) 0}.mrl-empty-color-text-secondary--cR3LB{color:var(--mrl-color-text-secondary)}
507
507
  .mrl-u-focus-wrapper--U8AgI{position:relative}.MrlCallout--content--o1NZT{max-width:17.5rem}.MrlCallout--title--rEMq8{font-size:var(--mrl-font-size-03);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--eyebrow--zPSfr{font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-04);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--description--s524D p{font-size:var(--mrl-font-size-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--image--F809e{margin-top:var(--mrl-spacing-05)}.MrlCallout--image--F809e img{height:auto;width:100%}.MrlCallout--footer--sjbLA{display:flex;justify-content:flex-start;margin-top:var(--mrl-spacing-05)}.MrlCallout--footer--sjbLA .mrlButton{margin-left:var(--mrl-spacing-03)}.MrlCallout--footer--sjbLA .mrlButton:first-child{margin-left:auto}.MrlCallout--O6y8L .mrlButton:focus-visible{position:relative}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible{outline:none}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
508
508
  var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.64.0",
3
+ "version": "4.65.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",