@universityofmaryland/web-elements-library 1.6.1 → 1.6.3
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.
- package/README.md +1 -1
- package/dist/atomic/text-lockup/person.d.ts.map +1 -1
- package/dist/atomic/text-lockup/person.js +2 -1
- package/dist/atomic/text-lockup/person.js.map +1 -1
- package/dist/composite/person/hero.d.ts +2 -2
- package/dist/composite/person/hero.d.ts.map +1 -1
- package/dist/composite/person/hero.js +8 -8
- package/dist/composite/person/hero.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,kFAsKvB,CAAC"}
|
|
@@ -86,7 +86,7 @@ const createTextLockupPerson = ({
|
|
|
86
86
|
container.withChild(slotTwoElement);
|
|
87
87
|
}
|
|
88
88
|
if (slotThreeItalic) {
|
|
89
|
-
const italicElement = document.createElement("
|
|
89
|
+
const italicElement = document.createElement("span");
|
|
90
90
|
while (slotThreeItalic.firstChild) {
|
|
91
91
|
italicElement.appendChild(slotThreeItalic.firstChild);
|
|
92
92
|
}
|
|
@@ -98,6 +98,7 @@ const createTextLockupPerson = ({
|
|
|
98
98
|
).withStyles({
|
|
99
99
|
element: {
|
|
100
100
|
...!isThemeDark && { color: `${token.color.gray.dark} !important` },
|
|
101
|
+
fontStyle: "italic",
|
|
101
102
|
[`& + *`]: {
|
|
102
103
|
marginTop: "4px"
|
|
103
104
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n actions,\n slotTwo,\n isThemeDark,\n slotOne,\n name,\n nameComposite,\n slotThreeItalic,\n slotFour,\n}: PersonTextLockupProps) => {\n const container = new ElementBuilder()\n .withClassName('text-lockup-person-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (nameComposite && !name) {\n container.withChild(nameComposite);\n }\n\n if (name) {\n const headlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const nameElement = new ElementBuilder(name)\n .withClassName('person-name')\n .styled(headlineStyles)\n .withStyles({\n element: {\n fontWeight: '700',\n\n [`& + *`]: {\n marginTop: '4px',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n container.withChild(nameElement);\n }\n\n if (slotOne) {\n const slotOneElement = new ElementBuilder(slotOne)\n .withClassName('slot-one')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: `1.25em`,\n\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotOneElement);\n }\n\n if (slotTwo) {\n const slotTwoElement = new ElementBuilder(slotTwo)\n .withClassName('slot-two')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: '1.2em',\n display: 'block',\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n\n [`& + *`]: {\n marginTop: '4px',\n },\n\n [`& a:hover, a:focus`]: {\n textDecoration: 'underline',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotTwoElement);\n }\n\n if (slotThreeItalic) {\n const italicElement = document.createElement('
|
|
1
|
+
{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n actions,\n slotTwo,\n isThemeDark,\n slotOne,\n name,\n nameComposite,\n slotThreeItalic,\n slotFour,\n}: PersonTextLockupProps) => {\n const container = new ElementBuilder()\n .withClassName('text-lockup-person-container')\n .withStyles({\n element: {\n zIndex: '9',\n position: 'relative',\n },\n });\n\n if (nameComposite && !name) {\n container.withChild(nameComposite);\n }\n\n if (name) {\n const headlineStyles = {\n ...animationStyles.line.composeSlideUnder({\n color: theme.foreground(isThemeDark),\n }),\n ...typography.sans.compose('larger', {\n theme: theme.fontColor(isThemeDark),\n }),\n };\n\n const nameElement = new ElementBuilder(name)\n .withClassName('person-name')\n .styled(headlineStyles)\n .withStyles({\n element: {\n fontWeight: '700',\n\n [`& + *`]: {\n marginTop: '4px',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .withModifier((el) => wrapTextNodeInSpan(el))\n .build();\n\n container.withChild(nameElement);\n }\n\n if (slotOne) {\n const slotOneElement = new ElementBuilder(slotOne)\n .withClassName('slot-one')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: `1.25em`,\n\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotOneElement);\n }\n\n if (slotTwo) {\n const slotTwoElement = new ElementBuilder(slotTwo)\n .withClassName('slot-two')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n lineHeight: '1.2em',\n display: 'block',\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n\n [`& + *`]: {\n marginTop: '4px',\n },\n\n [`& a:hover, a:focus`]: {\n textDecoration: 'underline',\n },\n },\n subElement: {\n color: 'currentColor',\n },\n })\n .build();\n\n container.withChild(slotTwoElement);\n }\n\n if (slotThreeItalic) {\n const italicElement = document.createElement('span');\n while (slotThreeItalic.firstChild) {\n italicElement.appendChild(slotThreeItalic.firstChild);\n }\n slotThreeItalic.appendChild(italicElement);\n const slotThreeItalicElement = new ElementBuilder(slotThreeItalic)\n .withClassName('slot-three-italic')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n fontStyle: 'italic',\n\n [`& + *`]: {\n marginTop: '4px',\n },\n\n [`& *`]: {\n color: 'currentColor',\n },\n },\n })\n .build();\n\n container.withChild(slotThreeItalicElement);\n }\n\n if (slotFour) {\n const slotFourElement = new ElementBuilder(slotFour)\n .withClassName('slot-four')\n .styled(\n typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n },\n siblingAfter: {\n marginTop: '4px',\n },\n })\n .build();\n\n container.withChild(slotFourElement);\n }\n\n if (actions) {\n const actionsElement = new ElementBuilder(actions)\n .styled(layout.grid.inline.tabletRows)\n .withStyles({\n element: {\n marginTop: token.spacing.sm,\n },\n })\n .build();\n\n container.withChild(actionsElement);\n }\n\n return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ interface Theme {
|
|
|
5
5
|
}
|
|
6
6
|
interface PersonText extends Theme {
|
|
7
7
|
name: HTMLElement | null;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
slotOne?: HTMLElement | null;
|
|
9
|
+
slotFour?: HTMLElement | null;
|
|
10
10
|
}
|
|
11
11
|
interface PersonInfo extends PersonContact, Theme {
|
|
12
12
|
image?: HTMLImageElement | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AA0VD,eAAO,MAAM,yBAAyB,UA9F7B,UAAU,KAChB,YAAY,CAAC,WAAW,CA6FqC,CAAC"}
|
|
@@ -75,10 +75,10 @@ const CreateImageBlock = (props) => {
|
|
|
75
75
|
}
|
|
76
76
|
if (pronouns) {
|
|
77
77
|
wrapper.withChild(
|
|
78
|
-
new ElementBuilder(document.createElement("
|
|
78
|
+
new ElementBuilder(document.createElement("div")).withClassName("umd-person-hero-pronouns").withStyles({
|
|
79
79
|
element: {
|
|
80
|
-
display: "block",
|
|
81
80
|
color: `${isThemeDark ? token.color.black : token.color.white}`,
|
|
81
|
+
fontStyle: "italic",
|
|
82
82
|
["*"]: {
|
|
83
83
|
color: "currentColor"
|
|
84
84
|
}
|
|
@@ -114,8 +114,8 @@ const CreateImageBlock = (props) => {
|
|
|
114
114
|
};
|
|
115
115
|
const CreateTextContainer = ({
|
|
116
116
|
name,
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
slotOne,
|
|
118
|
+
slotFour,
|
|
119
119
|
isThemeDark
|
|
120
120
|
}) => {
|
|
121
121
|
const lineWrapper = new ElementBuilder().styled(Styles.element.text.line.adjustentInset).withStyles({
|
|
@@ -123,9 +123,9 @@ const CreateTextContainer = ({
|
|
|
123
123
|
backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
|
-
if (
|
|
126
|
+
if (slotFour) {
|
|
127
127
|
lineWrapper.withChild(
|
|
128
|
-
new ElementBuilder(
|
|
128
|
+
new ElementBuilder(slotFour).styled(
|
|
129
129
|
Styles.typography.sans.compose("small", {
|
|
130
130
|
theme: theme.fontColor(isThemeDark)
|
|
131
131
|
})
|
|
@@ -166,9 +166,9 @@ const CreateTextContainer = ({
|
|
|
166
166
|
}).build()
|
|
167
167
|
);
|
|
168
168
|
}
|
|
169
|
-
if (
|
|
169
|
+
if (slotOne) {
|
|
170
170
|
lineWrapper.withChild(
|
|
171
|
-
new ElementBuilder(
|
|
171
|
+
new ElementBuilder(slotOne).styled(
|
|
172
172
|
Styles.typography.sans.compose("medium", {
|
|
173
173
|
theme: theme.fontColor(isThemeDark)
|
|
174
174
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonContact } from './_types';\nimport { type ElementModel } from '../../_types';\n\ninterface Theme {\n isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n name: HTMLElement | null;\n job?: HTMLElement | null;\n subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n image?: HTMLImageElement | null;\n association?: HTMLElement | null;\n pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n breadcrumbMobile?: HTMLElement | null;\n breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo): ElementModel<HTMLElement> => {\n const { image, association, pronouns, isThemeDark } = props;\n\n const wrapper = new ElementBuilder().withClassName(\n 'umd-person-hero-image-wrapper',\n );\n\n const contactContainer = textLockup.contact({\n ...props,\n isThemeDark: !isThemeDark,\n });\n\n if (image) {\n const imageBlock = assets.image.background({\n element: image,\n isScaled: false,\n imageLoading: 'eager',\n imageFetchPriority: 'high',\n });\n\n const imageContainer = new ElementBuilder()\n .withClassName('umd-person-hero-image')\n .withChild(imageBlock)\n .withStyles({\n element: {\n backgroundColor: `${\n isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n }`,\n display: 'flex',\n justifyContent: 'center',\n marginBottom: token.spacing.md,\n\n ['& img']: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n maxHeight: '160px',\n },\n },\n },\n })\n .build();\n\n wrapper.withChild(imageContainer);\n }\n\n if (association) {\n wrapper.withChild(\n new ElementBuilder(association)\n .styled(\n Styles.typography.sans.compose('large', {\n theme: theme.fontColor(!isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n })\n .build(),\n );\n }\n\n if (pronouns) {\n wrapper.withChild(\n new ElementBuilder(document.createElement('i'))\n .withClassName('umd-person-hero-pronouns')\n .withStyles({\n element: {\n display: 'block',\n color: `${isThemeDark ? token.color.black : token.color.white}`,\n\n ['*']: {\n color: 'currentColor',\n },\n },\n siblingAfter: {\n display: 'block',\n marginTop: token.spacing.min,\n },\n })\n .withChild(pronouns)\n .build(),\n );\n }\n\n if (contactContainer) {\n wrapper.withChild(contactContainer);\n }\n\n const wrapperBuilt = wrapper.build();\n\n return new ElementBuilder()\n .withClassName('umd-person-hero-image-container')\n .withChild(wrapperBuilt)\n .withStyles({\n element: {\n paddingTop: `${token.spacing.lg}`,\n paddingBottom: `${token.spacing.lg}`,\n backgroundColor: `${\n isThemeDark ? token.color.gray.lightest : token.color.black\n }`,\n position: 'relative',\n\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n },\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n padding: `${token.spacing.md}`,\n width: '30%',\n maxWidth: '320px',\n },\n },\n })\n .build();\n};\n\nconst CreateTextContainer = ({\n name,\n job,\n subText,\n isThemeDark,\n}: PersonText): ElementModel<HTMLElement> => {\n const lineWrapper = new ElementBuilder()\n .styled(Styles.element.text.line.adjustentInset)\n .withStyles({\n pseudoBefore: {\n backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n },\n });\n\n if (subText) {\n lineWrapper.withChild(\n new ElementBuilder(subText)\n .styled(\n Styles.typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n textTransform: 'uppercase',\n fontWeight: '700',\n maxWidth: '650px',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n marginTop: token.spacing.sm,\n },\n },\n })\n .build(),\n );\n }\n\n if (name) {\n lineWrapper.withChild(\n new ElementBuilder(name)\n .styled(\n Styles.typography.campaign.compose('large', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n textTransform: 'uppercase',\n fontWeight: '700',\n display: 'block',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n marginTop: token.spacing.md,\n },\n },\n })\n .build(),\n );\n }\n\n if (job) {\n lineWrapper.withChild(\n new ElementBuilder(job)\n .styled(\n Styles.typography.sans.compose('medium', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n\n ...(!isThemeDark && {\n color: token.color.gray.dark,\n }),\n },\n })\n .build(),\n );\n }\n\n const lineWrapperBuilt = lineWrapper.build();\n\n return new ElementBuilder()\n .withClassName('person-hero-text')\n .withChild(lineWrapperBuilt)\n .withStyles({\n element: {\n backgroundColor: `${\n isThemeDark ? token.color.black : token.color.gray.lightest\n }`,\n paddingTop: `${token.spacing['3xl']}`,\n paddingBottom: `${token.spacing['3xl']}`,\n position: 'relative',\n\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n },\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n paddingTop: `0`,\n paddingBottom: `${token.spacing['7xl']}`,\n alignSelf: 'flex-start',\n },\n },\n pseudoBefore: {\n content: '\"\"',\n position: 'absolute',\n top: '-100px',\n left: '0',\n bottom: '0',\n width: '200vw',\n transform: 'translateX(-20%)',\n backgroundColor: `${\n isThemeDark ? token.color.black : token.color.gray.lightest\n }`,\n },\n })\n .build();\n};\n\nconst CreatePersonHeroElement = (\n props: PersonHero,\n): ElementModel<HTMLElement> => {\n const { breadcrumbMobile, breadcrumbDesktop } = props;\n const textContainer = CreateTextContainer(props);\n\n const textColumns = new ElementBuilder()\n .withClassName('umd-person-hero-columns')\n .withChild(textContainer)\n .withStyles({\n element: {\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n width: '70%',\n },\n },\n });\n\n if (breadcrumbDesktop) {\n const textColumnBreadcrumb = new ElementBuilder()\n .withClassName('umd-person-hero-breadcrumb-desktop')\n .withChild(breadcrumbDesktop)\n .withStyles({\n element: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n display: 'none',\n },\n },\n })\n .build();\n\n textColumns.withChild(textColumnBreadcrumb);\n }\n\n const textColumnsBuilt = textColumns.build();\n const imageBlock = CreateImageBlock(props);\n\n const elementWrapper = new ElementBuilder()\n .withClassName('umd-person-hero-wrapper')\n .withChild(textColumnsBuilt)\n .withChild(imageBlock)\n .withStyles({\n element: {\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n display: 'flex',\n justifyContent: 'space-between',\n paddingTop: `${token.spacing['7xl']}`,\n },\n },\n })\n .build();\n\n const elementLock = new ElementBuilder()\n .styled(Styles.layout.space.horizontal.larger)\n .withChild(elementWrapper)\n .withStyles({\n element: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n padding: '0',\n },\n },\n });\n\n if (breadcrumbMobile) {\n const mainBreadcrumb = new ElementBuilder()\n .withClassName('umd-person-hero-breadcrumb-mobile')\n .withChild(breadcrumbMobile)\n .withStyles({\n element: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n display: 'none',\n },\n },\n })\n .build();\n\n elementLock.withChild(mainBreadcrumb);\n }\n\n const elementLockBuilt = elementLock.build();\n\n return new ElementBuilder()\n .withClassName('umd-person-hero')\n .withChild(elementLockBuilt)\n .withStyles({\n element: {\n overflow: 'hidden',\n containerType: 'inline-size',\n },\n })\n .build();\n};\n\nexport const createCompositePersonHero = CreatePersonHeroElement;\n"],"names":["textLockup.contact","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,mBAAmB,CAAC,UAAiD;AACzE,QAAM,EAAE,OAAO,aAAa,UAAU,gBAAgB;AAEtD,QAAM,UAAU,IAAI,eAAA,EAAiB;AAAA,IACnC;AAAA,EAAA;AAGF,QAAM,mBAAmBA,wBAAmB;AAAA,IAC1C,GAAG;AAAA,IACH,aAAa,CAAC;AAAA,EAAA,CACf;AAED,MAAI,OAAO;AACT,UAAM,aAAaC,sBAAwB;AAAA,MACzC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,MACd,oBAAoB;AAAA,IAAA,CACrB;AAED,UAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,uBAAuB,EACrC,UAAU,UAAU,EACpB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,iBAAiB,GACf,cAAc,MAAM,MAAM,KAAK,WAAW,MAAM,MAAM,KAAK,MAC7D;AAAA,QACA,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc,MAAM,QAAQ;AAAA,QAE5B,CAAC,OAAO,GAAG;AAAA,UACT,CAAC,0BAA0B,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,YAChE,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD,EACA,MAAA;AAEH,YAAQ,UAAU,cAAc;AAAA,EAClC;AAEA,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAI,eAAe,WAAW,EAC3B;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,SAAS;AAAA,UACtC,OAAO,MAAM,UAAU,CAAC,WAAW;AAAA,QAAA,CACpC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,IAAI,eAAe,SAAS,cAAc,GAAG,CAAC,EAC3C,cAAc,0BAA0B,EACxC,WAAW;AAAA,QACV,SAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO,GAAG,cAAc,MAAM,MAAM,QAAQ,MAAM,MAAM,KAAK;AAAA,UAE7D,CAAC,GAAG,GAAG;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAEF,cAAc;AAAA,UACZ,SAAS;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,UAAU,QAAQ,EAClB,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,kBAAkB;AACpB,YAAQ,UAAU,gBAAgB;AAAA,EACpC;AAEA,QAAM,eAAe,QAAQ,MAAA;AAE7B,SAAO,IAAI,iBACR,cAAc,iCAAiC,EAC/C,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC/B,eAAe,GAAG,MAAM,QAAQ,EAAE;AAAA,MAClC,iBAAiB,GACf,cAAc,MAAM,MAAM,KAAK,WAAW,MAAM,MAAM,KACxD;AAAA,MACA,UAAU;AAAA,MAEV,CAAC,0BAA0B,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,QAChE,aAAa,GAAG,MAAM,QAAQ,EAAE;AAAA,QAChC,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,MAGnC,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,QACjE,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,QAC5B,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,cAAc,IAAI,eAAA,EACrB,OAAO,OAAO,QAAQ,KAAK,KAAK,cAAc,EAC9C,WAAW;AAAA,IACV,cAAc;AAAA,MACZ,iBAAiB,GAAG,cAAc,MAAM,MAAM,OAAO,MAAM,MAAM,GAAG;AAAA,IAAA;AAAA,EACtE,CACD;AAEH,MAAI,SAAS;AACX,gBAAY;AAAA,MACV,IAAI,eAAe,OAAO,EACvB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,SAAS;AAAA,UACtC,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,UAAU;AAAA,QAAA;AAAA,QAEZ,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,MAAM;AACR,gBAAY;AAAA,MACV,IAAI,eAAe,IAAI,EACpB;AAAA,QACC,OAAO,WAAW,SAAS,QAAQ,SAAS;AAAA,UAC1C,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,QAAA;AAAA,QAEX,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,UAEzB,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,YACjE,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,KAAK;AACP,gBAAY;AAAA,MACV,IAAI,eAAe,GAAG,EACnB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,UAAU;AAAA,UACvC,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,SAAS;AAAA,UAET,GAAI,CAAC,eAAe;AAAA,YAClB,OAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QAC1B;AAAA,MACF,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,QAAM,mBAAmB,YAAY,MAAA;AAErC,SAAO,IAAI,iBACR,cAAc,kBAAkB,EAChC,UAAU,gBAAgB,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB,GACf,cAAc,MAAM,MAAM,QAAQ,MAAM,MAAM,KAAK,QACrD;AAAA,MACA,YAAY,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,MACnC,eAAe,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,MACtC,UAAU;AAAA,MAEV,CAAC,0BAA0B,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,QAChE,aAAa,GAAG,MAAM,QAAQ,EAAE;AAAA,QAChC,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,MAGnC,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,QACjE,YAAY;AAAA,QACZ,eAAe,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,QACtC,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,iBAAiB,GACf,cAAc,MAAM,MAAM,QAAQ,MAAM,MAAM,KAAK,QACrD;AAAA,IAAA;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,0BAA0B,CAC9B,UAC8B;AAC9B,QAAM,EAAE,kBAAkB,kBAAA,IAAsB;AAChD,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,yBAAyB,EACvC,UAAU,aAAa,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,QACjE,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF,CACD;AAEH,MAAI,mBAAmB;AACrB,UAAM,uBAAuB,IAAI,eAAA,EAC9B,cAAc,oCAAoC,EAClD,UAAU,iBAAiB,EAC3B,WAAW;AAAA,MACV,SAAS;AAAA,QACP,CAAC,0BAA0B,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,UAChE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF,CACD,EACA,MAAA;AAEH,gBAAY,UAAU,oBAAoB;AAAA,EAC5C;AAEA,QAAM,mBAAmB,YAAY,MAAA;AACrC,QAAM,aAAa,iBAAiB,KAAK;AAEzC,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,yBAAyB,EACvC,UAAU,gBAAgB,EAC1B,UAAU,UAAU,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,QACjE,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,IACrC;AAAA,EACF,CACD,EACA,MAAA;AAEH,QAAM,cAAc,IAAI,eAAA,EACrB,OAAO,OAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,MAAM,MAAM,YAAY,MAAM,GAAG,GAAG,GAAG;AAAA,QAChE,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD;AAEH,MAAI,kBAAkB;AACpB,UAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,mCAAmC,EACjD,UAAU,gBAAgB,EAC1B,WAAW;AAAA,MACV,SAAS;AAAA,QACP,aAAa,GAAG,MAAM,QAAQ,EAAE;AAAA,QAChC,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,QAEjC,CAAC,0BAA0B,MAAM,MAAM,YAAY,OAAO,GAAG,GAAG,GAAG;AAAA,UACjE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF,CACD,EACA,MAAA;AAEH,gBAAY,UAAU,cAAc;AAAA,EACtC;AAEA,QAAM,mBAAmB,YAAY,MAAA;AAErC,SAAO,IAAI,iBACR,cAAc,iBAAiB,EAC/B,UAAU,gBAAgB,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEO,MAAM,4BAA4B;"}
|
|
1
|
+
{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonContact } from './_types';\nimport { type ElementModel } from '../../_types';\n\ninterface Theme {\n isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n name: HTMLElement | null;\n slotOne?: HTMLElement | null;\n slotFour?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n image?: HTMLImageElement | null;\n association?: HTMLElement | null;\n pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n breadcrumbMobile?: HTMLElement | null;\n breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo): ElementModel<HTMLElement> => {\n const { image, association, pronouns, isThemeDark } = props;\n\n const wrapper = new ElementBuilder().withClassName(\n 'umd-person-hero-image-wrapper',\n );\n\n const contactContainer = textLockup.contact({\n ...props,\n isThemeDark: !isThemeDark,\n });\n\n if (image) {\n const imageBlock = assets.image.background({\n element: image,\n isScaled: false,\n imageLoading: 'eager',\n imageFetchPriority: 'high',\n });\n\n const imageContainer = new ElementBuilder()\n .withClassName('umd-person-hero-image')\n .withChild(imageBlock)\n .withStyles({\n element: {\n backgroundColor: `${\n isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n }`,\n display: 'flex',\n justifyContent: 'center',\n marginBottom: token.spacing.md,\n\n ['& img']: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n maxHeight: '160px',\n },\n },\n },\n })\n .build();\n\n wrapper.withChild(imageContainer);\n }\n\n if (association) {\n wrapper.withChild(\n new ElementBuilder(association)\n .styled(\n Styles.typography.sans.compose('large', {\n theme: theme.fontColor(!isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n },\n })\n .build(),\n );\n }\n\n if (pronouns) {\n wrapper.withChild(\n new ElementBuilder(document.createElement('div'))\n .withClassName('umd-person-hero-pronouns')\n .withStyles({\n element: {\n color: `${isThemeDark ? token.color.black : token.color.white}`,\n fontStyle: 'italic',\n\n ['*']: {\n color: 'currentColor',\n },\n },\n siblingAfter: {\n display: 'block',\n marginTop: token.spacing.min,\n },\n })\n .withChild(pronouns)\n .build(),\n );\n }\n\n if (contactContainer) {\n wrapper.withChild(contactContainer);\n }\n\n const wrapperBuilt = wrapper.build();\n\n return new ElementBuilder()\n .withClassName('umd-person-hero-image-container')\n .withChild(wrapperBuilt)\n .withStyles({\n element: {\n paddingTop: `${token.spacing.lg}`,\n paddingBottom: `${token.spacing.lg}`,\n backgroundColor: `${\n isThemeDark ? token.color.gray.lightest : token.color.black\n }`,\n position: 'relative',\n\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n },\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n padding: `${token.spacing.md}`,\n width: '30%',\n maxWidth: '320px',\n },\n },\n })\n .build();\n};\n\nconst CreateTextContainer = ({\n name,\n slotOne,\n slotFour,\n isThemeDark,\n}: PersonText): ElementModel<HTMLElement> => {\n const lineWrapper = new ElementBuilder()\n .styled(Styles.element.text.line.adjustentInset)\n .withStyles({\n pseudoBefore: {\n backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n },\n });\n\n if (slotFour) {\n lineWrapper.withChild(\n new ElementBuilder(slotFour)\n .styled(\n Styles.typography.sans.compose('small', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n textTransform: 'uppercase',\n fontWeight: '700',\n maxWidth: '650px',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n marginTop: token.spacing.sm,\n },\n },\n })\n .build(),\n );\n }\n\n if (name) {\n lineWrapper.withChild(\n new ElementBuilder(name)\n .styled(\n Styles.typography.campaign.compose('large', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n textTransform: 'uppercase',\n fontWeight: '700',\n display: 'block',\n },\n siblingAfter: {\n marginTop: token.spacing.min,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n marginTop: token.spacing.md,\n },\n },\n })\n .build(),\n );\n }\n\n if (slotOne) {\n lineWrapper.withChild(\n new ElementBuilder(slotOne)\n .styled(\n Styles.typography.sans.compose('medium', {\n theme: theme.fontColor(isThemeDark),\n }),\n )\n .withStyles({\n element: {\n display: 'block',\n\n ...(!isThemeDark && {\n color: token.color.gray.dark,\n }),\n },\n })\n .build(),\n );\n }\n\n const lineWrapperBuilt = lineWrapper.build();\n\n return new ElementBuilder()\n .withClassName('person-hero-text')\n .withChild(lineWrapperBuilt)\n .withStyles({\n element: {\n backgroundColor: `${\n isThemeDark ? token.color.black : token.color.gray.lightest\n }`,\n paddingTop: `${token.spacing['3xl']}`,\n paddingBottom: `${token.spacing['3xl']}`,\n position: 'relative',\n\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n },\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n paddingTop: `0`,\n paddingBottom: `${token.spacing['7xl']}`,\n alignSelf: 'flex-start',\n },\n },\n pseudoBefore: {\n content: '\"\"',\n position: 'absolute',\n top: '-100px',\n left: '0',\n bottom: '0',\n width: '200vw',\n transform: 'translateX(-20%)',\n backgroundColor: `${\n isThemeDark ? token.color.black : token.color.gray.lightest\n }`,\n },\n })\n .build();\n};\n\nconst CreatePersonHeroElement = (\n props: PersonHero,\n): ElementModel<HTMLElement> => {\n const { breadcrumbMobile, breadcrumbDesktop } = props;\n const textContainer = CreateTextContainer(props);\n\n const textColumns = new ElementBuilder()\n .withClassName('umd-person-hero-columns')\n .withChild(textContainer)\n .withStyles({\n element: {\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n width: '70%',\n },\n },\n });\n\n if (breadcrumbDesktop) {\n const textColumnBreadcrumb = new ElementBuilder()\n .withClassName('umd-person-hero-breadcrumb-desktop')\n .withChild(breadcrumbDesktop)\n .withStyles({\n element: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n display: 'none',\n },\n },\n })\n .build();\n\n textColumns.withChild(textColumnBreadcrumb);\n }\n\n const textColumnsBuilt = textColumns.build();\n const imageBlock = CreateImageBlock(props);\n\n const elementWrapper = new ElementBuilder()\n .withClassName('umd-person-hero-wrapper')\n .withChild(textColumnsBuilt)\n .withChild(imageBlock)\n .withStyles({\n element: {\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n display: 'flex',\n justifyContent: 'space-between',\n paddingTop: `${token.spacing['7xl']}`,\n },\n },\n })\n .build();\n\n const elementLock = new ElementBuilder()\n .styled(Styles.layout.space.horizontal.larger)\n .withChild(elementWrapper)\n .withStyles({\n element: {\n [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n padding: '0',\n },\n },\n });\n\n if (breadcrumbMobile) {\n const mainBreadcrumb = new ElementBuilder()\n .withClassName('umd-person-hero-breadcrumb-mobile')\n .withChild(breadcrumbMobile)\n .withStyles({\n element: {\n paddingLeft: `${token.spacing.md}`,\n paddingRight: `${token.spacing.md}`,\n\n [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n display: 'none',\n },\n },\n })\n .build();\n\n elementLock.withChild(mainBreadcrumb);\n }\n\n const elementLockBuilt = elementLock.build();\n\n return new ElementBuilder()\n .withClassName('umd-person-hero')\n .withChild(elementLockBuilt)\n .withStyles({\n element: {\n overflow: 'hidden',\n containerType: 'inline-size',\n },\n })\n .build();\n};\n\nexport const createCompositePersonHero = CreatePersonHeroElement;\n"],"names":["textLockup.contact","assets.image.background"],"mappings":"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"}
|