@kvdbil/components 15.0.54 → 15.0.56

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/cjs/components/Hero/index.js +6 -6
  2. package/esm/components/Hero/index.js +14 -14
  3. package/package.json +2 -2
  4. package/package.json.tmp +2 -2
  5. package/types/components/Hero/index.d.ts +2 -1
package/cjs/components/Hero/index.js CHANGED
@@ -27,21 +27,21 @@
27
27
  padding: 3rem 1.5rem;
28
28
  z-index: 1;
29
29
  flex: 1;
30
- `,$=o.default.iframe`
30
+ `,c=o.default.iframe`
31
31
  position: absolute;
32
32
  width: 100%;
33
33
  height: 100%;
34
34
  top: 0;
35
35
  left: 0;
36
- `,c=e=>"number"==typeof e,u=e=>"string"==typeof e,p=o.default.div`
36
+ `,$=e=>"number"==typeof e,u=e=>"string"==typeof e,p=o.default.div`
37
37
  width: 100%;
38
38
  min-height: 440px;
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  justify-content: center;
42
42
 
43
- ${({$url:e,...t})=>e&&`\n background: url('${e}');\n background-repeat: no-repeat;\n background-size: cover;\n background-position: ${(({$positionX:e,$positionY:t})=>{if(c(e)&&c(t))return`${e}% ${t}%`;if(u(e)&&u(t))return`${e} ${t}`;if(e||t)return`${(c(e)?`${e}%`:e)||"50%"} ${(c(t)?`${t}%`:t)||"50%"}`;return"50% 50%"})(t)};\n `}
44
- `,m=o.default.div`
43
+ ${({$url:e,...t})=>e&&`\n background: url('${e}');\n background-repeat: no-repeat;\n background-size: cover;\n background-position: ${(({$positionX:e,$positionY:t})=>{if($(e)&&$(t))return`${e}% ${t}%`;if(u(e)&&u(t))return`${e} ${t}`;if(e||t)return`${($(e)?`${e}%`:e)||"50%"} ${($(t)?`${t}%`:t)||"50%"}`;return"50% 50%"})(t)};\n `}
44
+ `,h=o.default.div`
45
45
  padding-left: 1rem;
46
46
  padding-right: 1rem;
47
47
  z-index: 2;
@@ -50,7 +50,7 @@
50
50
  padding-left: 1.5rem;
51
51
  padding-right: 1.5rem;
52
52
  }
53
- `,h=o.default.div`
53
+ `,m=o.default.div`
54
54
  ${({$centered:e})=>e&&"\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n "}
55
55
 
56
56
  ${({$maxWidth:e,$dynamicGutter:t})=>!t&&`\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n max-width: ${e}rem;\n `}
@@ -71,4 +71,4 @@
71
71
  margin-top: 3rem;
72
72
 
73
73
  ${({$shadow:e,theme:t})=>e&&`box-shadow: ${t.elevations.elevation8};`}
74
- `;exports.default=({imageProps:t,imageElement:i,videoProps:n,children:r,align:o,direction:d,justify:c,contentMaxWidth:u=64,heading:y,headingColor:w="dark",subheading:b,button:v,dynamicGutter:j,isLoading:k=!1,contentCentered:q=!1,containerStyle:G,elementShadow:V=!1})=>{const{autoplay:_=0,controls:z=0,disablekb:C=0,end:E,loop:M=0,modestbranding:P=1,start:S=0,showInfo:W=0}=n?.ytConfig||{};return k?e.jsx(l,{"data-testid":"loader"}):e.jsx(a,{style:G,children:n?e.jsx($,{"data-testid":"hero-video",title:"video-frame",src:`${n.src}?disabledkb=${C}&autoplay=${_}&controls=${z}&loop=${M}&modestbranding=${P}&start=${S}&showInfo=${W}${E?`&end=${E}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):e.jsxs(p,{"data-testid":"hero-image",$positionX:i?void 0:t?.x,$positionY:i?void 0:t?.y,$url:i?void 0:t?.src,children:[i,e.jsxs(m,{children:[(y||b||v)&&e.jsxs(h,{$maxWidth:u,$dynamicGutter:j,$centered:q,children:[y&&e.jsx(f,{as:"h1",$color:w,$shadow:V,children:y}),b&&e.jsx(g,{$color:w,$shadow:V,children:b}),v&&e.jsx(x,{$shadow:V,children:v})]}),r&&e.jsx(s,{$pointerEvents:n?"none":"auto",$align:o||"flex-start",$direction:d||"column",$justify:c||"flex-start",children:r})]})]})})};
74
+ `;exports.default=({imageProps:t,imageElement:i,videoProps:n,children:r,align:o,direction:d,justify:$,contentMaxWidth:u=64,heading:y,headingColor:w="dark",subheading:b,button:v,dynamicGutter:j,isLoading:k=!1,contentCentered:q=!1,containerStyle:G,elementShadow:V=!1,childrenNoWrapper:W=!1})=>{const{autoplay:_=0,controls:z=0,disablekb:C=0,end:E,loop:M=0,modestbranding:P=1,start:S=0,showInfo:F=0}=n?.ytConfig||{};return k?e.jsx(l,{"data-testid":"loader"}):e.jsx(a,{style:G,children:n?e.jsx(c,{"data-testid":"hero-video",title:"video-frame",src:`${n.src}?disabledkb=${C}&autoplay=${_}&controls=${z}&loop=${M}&modestbranding=${P}&start=${S}&showInfo=${F}${E?`&end=${E}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):e.jsxs(p,{"data-testid":"hero-image",$positionX:i?void 0:t?.x,$positionY:i?void 0:t?.y,$url:i?void 0:t?.src,children:[i,e.jsxs(h,{children:[(y||b||v)&&e.jsxs(m,{$maxWidth:u,$dynamicGutter:j,$centered:q,children:[y&&e.jsx(f,{as:"h1",$color:w,$shadow:V,children:y}),b&&e.jsx(g,{$color:w,$shadow:V,children:b}),v&&e.jsx(x,{$shadow:V,children:v})]}),r&&e.jsxs(e.Fragment,{children:[!W&&e.jsx(s,{$pointerEvents:n?"none":"auto",$align:o||"flex-start",$direction:d||"column",$justify:$||"flex-start",children:r}),W&&r]})]})]})})};
package/esm/components/Hero/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"styled-components";import{Display3 as I,Title as P}from"../../typography/Heading/index.js";import{mq as m}from"../../shared/media-queries.js";const q=t.div`
1
+ import{jsx as o,jsxs as a,Fragment as F}from"react/jsx-runtime";import t,{keyframes as I}from"styled-components";import{Display3 as Y,Title as q}from"../../typography/Heading/index.js";import{mq as m}from"../../shared/media-queries.js";const D=t.div`
2
2
  position: relative;
3
3
  min-height: 440px;
4
4
  display: flex;
5
5
  flex-direction: column;
6
- `,B=C`
6
+ `,M=I`
7
7
  0% {
8
8
  background-color:#f5f5f5;
9
9
  }
@@ -14,11 +14,11 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"
14
14
 
15
15
  100% {
16
16
  background-color:#f5f5f5;
17
- }`,D=t.div`
17
+ }`,N=t.div`
18
18
  width: 100%;
19
19
  height: 440px;
20
- animation: ${B} 2s linear infinite;
21
- `,F=t.div`
20
+ animation: ${M} 2s linear infinite;
21
+ `,P=t.div`
22
22
  pointer-events: ${({$pointerEvents:e})=>e};
23
23
  display: flex;
24
24
  flex-direction: ${({$direction:e})=>e};
@@ -27,13 +27,13 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"
27
27
  padding: 3rem 1.5rem;
28
28
  z-index: 1;
29
29
  flex: 1;
30
- `,M=t.iframe`
30
+ `,T=t.iframe`
31
31
  position: absolute;
32
32
  width: 100%;
33
33
  height: 100%;
34
34
  top: 0;
35
35
  left: 0;
36
- `,a=e=>typeof e=="number",g=e=>typeof e=="string",T=({$positionX:e,$positionY:i})=>{if(a(e)&&a(i))return`${e}% ${i}%`;if(g(e)&&g(i))return`${e} ${i}`;if(e||i){const r=a(e)?`${e}%`:e,n=a(i)?`${i}%`:i;return`${r||"50%"} ${n||"50%"}`}return"50% 50%"},X=t.div`
36
+ `,d=e=>typeof e=="number",f=e=>typeof e=="string",X=({$positionX:e,$positionY:i})=>{if(d(e)&&d(i))return`${e}% ${i}%`;if(f(e)&&f(i))return`${e} ${i}`;if(e||i){const r=d(e)?`${e}%`:e,n=d(i)?`${i}%`:i;return`${r||"50%"} ${n||"50%"}`}return"50% 50%"},A=t.div`
37
37
  width: 100%;
38
38
  min-height: 440px;
39
39
  display: flex;
@@ -44,9 +44,9 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"
44
44
  background: url('${e}');
45
45
  background-repeat: no-repeat;
46
46
  background-size: cover;
47
- background-position: ${T(i)};
47
+ background-position: ${X(i)};
48
48
  `}
49
- `,Y=t.div`
49
+ `,B=t.div`
50
50
  padding-left: 1rem;
51
51
  padding-right: 1rem;
52
52
  z-index: 2;
@@ -55,7 +55,7 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"
55
55
  padding-left: 1.5rem;
56
56
  padding-right: 1.5rem;
57
57
  }
58
- `,A=t.div`
58
+ `,H=t.div`
59
59
  ${({$centered:e})=>e&&`
60
60
  display: flex;
61
61
  flex-direction: column;
@@ -81,19 +81,19 @@ import{jsx as o,jsxs as c}from"react/jsx-runtime";import t,{keyframes as C}from"
81
81
  margin-right: ${e.laptopVw}vw;
82
82
  }
83
83
  `}
84
- `,H=t(I)`
84
+ `,J=t(Y)`
85
85
  margin: 0;
86
86
  color: ${({$color:e,theme:i})=>i.colors.text[e]};
87
87
 
88
88
  ${({$shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
89
- `,J=t(P)`
89
+ `,L=t(q)`
90
90
  margin: 0.25rem 0;
91
91
  color: ${({$color:e,theme:i})=>i.colors.text[e]};
92
92
 
93
93
  ${({$shadow:e})=>e&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
94
- `,L=t.div`
94
+ `,O=t.div`
95
95
  display: inline-block;
96
96
  margin-top: 3rem;
97
97
 
98
98
  ${({$shadow:e,theme:i})=>e&&`box-shadow: ${i.elevations.elevation8};`}
99
- `,N=({imageProps:e,imageElement:i,videoProps:r,children:n,align:f,direction:u,justify:x,contentMaxWidth:w=64,heading:d,headingColor:p="dark",subheading:l,button:$,dynamicGutter:y,isLoading:b=!1,contentCentered:v=!1,containerStyle:k,elementShadow:s=!1})=>{const{autoplay:j=0,controls:G=0,disablekb:z=0,end:h,loop:E=0,modestbranding:S=1,start:V=0,showInfo:W=0}=r?.ytConfig||{};return b?o(D,{"data-testid":"loader"}):o(q,{style:k,children:r?o(M,{"data-testid":"hero-video",title:"video-frame",src:`${r.src}?disabledkb=${z}&autoplay=${j}&controls=${G}&loop=${E}&modestbranding=${S}&start=${V}&showInfo=${W}${h?`&end=${h}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):c(X,{"data-testid":"hero-image",$positionX:i?void 0:e?.x,$positionY:i?void 0:e?.y,$url:i?void 0:e?.src,children:[i,c(Y,{children:[(d||l||$)&&c(A,{$maxWidth:w,$dynamicGutter:y,$centered:v,children:[d&&o(H,{as:"h1",$color:p,$shadow:s,children:d}),l&&o(J,{$color:p,$shadow:s,children:l}),$&&o(L,{$shadow:s,children:$})]}),n&&o(F,{$pointerEvents:r?"none":"auto",$align:f||"flex-start",$direction:u||"column",$justify:x||"flex-start",children:n})]})]})})};export{N as default};
99
+ `,K=({imageProps:e,imageElement:i,videoProps:r,children:n,align:u,direction:x,justify:w,contentMaxWidth:b=64,heading:l,headingColor:p="dark",subheading:s,button:$,dynamicGutter:y,isLoading:v=!1,contentCentered:k=!1,containerStyle:j,elementShadow:c=!1,childrenNoWrapper:h=!1})=>{const{autoplay:G=0,controls:V=0,disablekb:W=0,end:g,loop:z=0,modestbranding:E=1,start:S=0,showInfo:C=0}=r?.ytConfig||{};return v?o(N,{"data-testid":"loader"}):o(D,{style:j,children:r?o(T,{"data-testid":"hero-video",title:"video-frame",src:`${r.src}?disabledkb=${W}&autoplay=${G}&controls=${V}&loop=${z}&modestbranding=${E}&start=${S}&showInfo=${C}${g?`&end=${g}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):a(A,{"data-testid":"hero-image",$positionX:i?void 0:e?.x,$positionY:i?void 0:e?.y,$url:i?void 0:e?.src,children:[i,a(B,{children:[(l||s||$)&&a(H,{$maxWidth:b,$dynamicGutter:y,$centered:k,children:[l&&o(J,{as:"h1",$color:p,$shadow:c,children:l}),s&&o(L,{$color:p,$shadow:c,children:s}),$&&o(O,{$shadow:c,children:$})]}),n&&a(F,{children:[!h&&o(P,{$pointerEvents:r?"none":"auto",$align:u||"flex-start",$direction:x||"column",$justify:w||"flex-start",children:n}),h&&n]})]})]})})};export{K as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.54",
3
+ "version": "15.0.56",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -70,7 +70,7 @@
70
70
  "@testing-library/react-hooks": "^8.0.1",
71
71
  "@testing-library/user-event": "^14.5.2",
72
72
  "@types/jest": "^29.5.12",
73
- "@types/node": "22.15.17",
73
+ "@types/node": "22.15.18",
74
74
  "@types/react": "^18.3.8",
75
75
  "@types/react-collapse": "^5.0.4",
76
76
  "@types/react-dom": "^18.3.0",
package/package.json.tmp CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.54",
3
+ "version": "15.0.56",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -69,7 +69,7 @@
69
69
  "@testing-library/react-hooks": "^8.0.1",
70
70
  "@testing-library/user-event": "^14.5.2",
71
71
  "@types/jest": "^29.5.12",
72
- "@types/node": "22.15.17",
72
+ "@types/node": "22.15.18",
73
73
  "@types/react": "^18.3.8",
74
74
  "@types/react-collapse": "^5.0.4",
75
75
  "@types/react-dom": "^18.3.0",
package/types/components/Hero/index.d.ts CHANGED
@@ -47,6 +47,7 @@ export interface HeroProps {
47
47
  isLoading?: boolean;
48
48
  contentCentered?: boolean;
49
49
  elementShadow?: boolean;
50
+ childrenNoWrapper?: boolean;
50
51
  }
51
- declare const Hero: ({ imageProps, imageElement, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, button, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, }: HeroProps) => import("react/jsx-runtime").JSX.Element;
52
+ declare const Hero: ({ imageProps, imageElement, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, button, dynamicGutter, isLoading, contentCentered, containerStyle, elementShadow, childrenNoWrapper, }: HeroProps) => import("react/jsx-runtime").JSX.Element;
52
53
  export default Hero;