@universityofmaryland/web-elements-library 1.5.6 → 1.5.8

package/dist/composite/footer/elements/main-section/social.d.ts

@@ -1,10 +1,5 @@
-import { BaseProps } from '../../_types';
+import { SocialCampaignColumnsProps } from '../../_types';
 import { UMDElement } from '../../../../_types';
-interface SocialProps extends BaseProps {
-    slotSocialLinks?: HTMLSlotElement;
-}
-export interface SocialCampaignColumnsProps extends SocialProps {
-}
 declare const _default: (props: SocialCampaignColumnsProps) => UMDElement;
 export default _default;
 //# sourceMappingURL=social.d.ts.map

package/dist/composite/footer/elements/main-section/social.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,UAAU,WAAY,SAAQ,SAAS;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,0BAA2B,SAAQ,WAAW;CAAG;yBAwKlD,OAAO,0BAA0B,KAAG,UAAU;AAA9D,wBAgCE"}
+{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,0BAA0B,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;yBA0KrC,OAAO,0BAA0B,KAAG,UAAU;AAA9D,wBAgCE"}

package/dist/composite/footer/elements/main-section/social.js.map

@@ -1 +1 @@
-{"version":3,"file":"social.js","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\ninterface SocialProps extends BaseProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nexport interface SocialCampaignColumnsProps extends SocialProps {}\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (props: SocialProps): UMDElement => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = new ElementBuilder('p')\n    .withClassName('umd-footer-social-container_headline')\n    .withStyles({\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    })\n    .withText('Stay Connected')\n    .build();\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    new ElementBuilder(GetSocialIcon({ link }))\n      .withClassName('umd-footer-social-link')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      })\n      .build(),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = new ElementBuilder()\n    .withClassName('umd-footer-social-container_wrapper')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    })\n    .withChildren(...socialLinkChildren)\n    .withAttribute('count', `${socialLinks.length}`)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-container')\n    .withStyles({\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    })\n    .withChildren(headline, linksWrapper)\n    .withModifier((el) => {\n      if (socialLinks.length >= 4) {\n        el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n      }\n    })\n    .build();\n};\n\nexport default (props: SocialCampaignColumnsProps): UMDElement => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-column_wrapper')\n    .withStyles({\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .withChildren(socialContainer, campaignContainer)\n    .build();\n};\n"],"names":["BREAKPOINTS","iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","ElementBuilder","typography","token","createCampaignRow"],"mappings":"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"}
+{"version":3,"file":"social.js","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { SocialProps, SocialCampaignColumnsProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (\n  props: Pick<SocialProps, 'isThemeLight' | 'slotSocialLinks'>,\n): UMDElement => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = new ElementBuilder('p')\n    .withClassName('umd-footer-social-container_headline')\n    .withStyles({\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    })\n    .withText('Stay Connected')\n    .build();\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    new ElementBuilder(GetSocialIcon({ link }))\n      .withClassName('umd-footer-social-link')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      })\n      .build(),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = new ElementBuilder()\n    .withClassName('umd-footer-social-container_wrapper')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    })\n    .withChildren(...socialLinkChildren)\n    .withAttribute('count', `${socialLinks.length}`)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-container')\n    .withStyles({\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    })\n    .withChildren(headline, linksWrapper)\n    .withModifier((el) => {\n      if (socialLinks.length >= 4) {\n        el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n      }\n    })\n    .build();\n};\n\nexport default (props: SocialCampaignColumnsProps): UMDElement => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-column_wrapper')\n    .withStyles({\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .withChildren(socialContainer, campaignContainer)\n    .build();\n};\n"],"names":["BREAKPOINTS","iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","ElementBuilder","typography","token","createCampaignRow"],"mappings":"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"}

package/dist/composite/footer/elements/main-section/social.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\ninterface SocialProps extends BaseProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nexport interface SocialCampaignColumnsProps extends SocialProps {}\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (props: SocialProps): UMDElement => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = new ElementBuilder('p')\n    .withClassName('umd-footer-social-container_headline')\n    .withStyles({\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    })\n    .withText('Stay Connected')\n    .build();\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    new ElementBuilder(GetSocialIcon({ link }))\n      .withClassName('umd-footer-social-link')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      })\n      .build(),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = new ElementBuilder()\n    .withClassName('umd-footer-social-container_wrapper')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    })\n    .withChildren(...socialLinkChildren)\n    .withAttribute('count', `${socialLinks.length}`)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-container')\n    .withStyles({\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    })\n    .withChildren(headline, linksWrapper)\n    .withModifier((el) => {\n      if (socialLinks.length >= 4) {\n        el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n      }\n    })\n    .build();\n};\n\nexport default (props: SocialCampaignColumnsProps): UMDElement => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-column_wrapper')\n    .withStyles({\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .withChildren(socialContainer, campaignContainer)\n    .build();\n};\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads"],"mappings":"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"}
+{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { SocialProps, SocialCampaignColumnsProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (\n  props: Pick<SocialProps, 'isThemeLight' | 'slotSocialLinks'>,\n): UMDElement => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = new ElementBuilder('p')\n    .withClassName('umd-footer-social-container_headline')\n    .withStyles({\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    })\n    .withText('Stay Connected')\n    .build();\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    new ElementBuilder(GetSocialIcon({ link }))\n      .withClassName('umd-footer-social-link')\n      .withStyles({\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      })\n      .build(),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = new ElementBuilder()\n    .withClassName('umd-footer-social-container_wrapper')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    })\n    .withChildren(...socialLinkChildren)\n    .withAttribute('count', `${socialLinks.length}`)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-container')\n    .withStyles({\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    })\n    .withChildren(headline, linksWrapper)\n    .withModifier((el) => {\n      if (socialLinks.length >= 4) {\n        el.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n      }\n    })\n    .build();\n};\n\nexport default (props: SocialCampaignColumnsProps): UMDElement => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-social-column_wrapper')\n    .withStyles({\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    })\n    .withChildren(socialContainer, campaignContainer)\n    .build();\n};\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads"],"mappings":"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"}

package/dist/composite/footer/elements/utility-section/index.d.ts

@@ -1,7 +1,4 @@
-import { BaseProps } from '../../_types';
-export interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {
-    slotUtilityLinks?: HTMLElement | null;
-}
-declare const _default: (props: UtilityProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+import { UtilityProps } from '../../_types';
+declare const _default: (props: Pick<UtilityProps, "isThemeLight" | "slotUtilityLinks">) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/elements/utility-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACnE,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;yBA2Ce,OAAO,YAAY;AAAnC,wBAqGE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;yBA6C1C,OAAO,IAAI,CAAC,YAAY,EAAE,cAAc,GAAG,kBAAkB,CAAC;AADhE,wBAuGE"}

package/dist/composite/footer/elements/utility-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return new ElementBuilder(link)\n    .withClassName('umd-footer-utility-container-link')\n    .build();\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = new ElementBuilder('span')\n    .withClassName('umd-footer-utility-container-sublink-text')\n    .withText(title)\n    .build();\n\n  const anchor = document.createElement('a');\n  anchor.setAttribute('href', url);\n  anchor.setAttribute('target', '_blank');\n  anchor.setAttribute('rel', 'noopener noreferrer');\n\n  const link = new ElementBuilder(anchor)\n    .withClassName('umd-footer-utility-container-sublink')\n    .withChild(span)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container-link-wrapper')\n    .withChild(createUtilityContainerLink(link.element))\n    .build();\n};\n\nexport default (props: UtilityProps) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: UMDElement[] = [];\n\n  const copyRightPara = document.createElement('p');\n  copyRightPara.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  const copyRightElement = new ElementBuilder(copyRightPara)\n    .withClassName('umd-footer-utility-container-copyright')\n    .build();\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  linkElements.push(copyRight);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-utility-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    })\n    .withChildren(...linkElements)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container')\n    .withStyles({\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["BREAKPOINTS","ElementBuilder","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { BREAKPOINTS } from '../../globals';\nimport { UtilityProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return new ElementBuilder(link)\n    .withClassName('umd-footer-utility-container-link')\n    .build();\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = new ElementBuilder('span')\n    .withClassName('umd-footer-utility-container-sublink-text')\n    .withText(title)\n    .build();\n\n  const anchor = document.createElement('a');\n  anchor.setAttribute('href', url);\n  anchor.setAttribute('target', '_blank');\n  anchor.setAttribute('rel', 'noopener noreferrer');\n\n  const link = new ElementBuilder(anchor)\n    .withClassName('umd-footer-utility-container-sublink')\n    .withChild(span)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container-link-wrapper')\n    .withChild(createUtilityContainerLink(link.element))\n    .build();\n};\n\nexport default (\n  props: Pick<UtilityProps, 'isThemeLight' | 'slotUtilityLinks'>,\n) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: UMDElement[] = [];\n\n  const copyRightPara = document.createElement('p');\n  copyRightPara.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  const copyRightElement = new ElementBuilder(copyRightPara)\n    .withClassName('umd-footer-utility-container-copyright')\n    .build();\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  linkElements.push(copyRight);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-utility-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    })\n    .withChildren(...linkElements)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container')\n    .withStyles({\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["BREAKPOINTS","ElementBuilder","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}

package/dist/composite/footer/elements/utility-section/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { BREAKPOINTS } from '../../globals';\nimport { type BaseProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nexport interface UtilityProps extends Pick<BaseProps, 'isThemeLight'> {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return new ElementBuilder(link)\n    .withClassName('umd-footer-utility-container-link')\n    .build();\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = new ElementBuilder('span')\n    .withClassName('umd-footer-utility-container-sublink-text')\n    .withText(title)\n    .build();\n\n  const anchor = document.createElement('a');\n  anchor.setAttribute('href', url);\n  anchor.setAttribute('target', '_blank');\n  anchor.setAttribute('rel', 'noopener noreferrer');\n\n  const link = new ElementBuilder(anchor)\n    .withClassName('umd-footer-utility-container-sublink')\n    .withChild(span)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container-link-wrapper')\n    .withChild(createUtilityContainerLink(link.element))\n    .build();\n};\n\nexport default (props: UtilityProps) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: UMDElement[] = [];\n\n  const copyRightPara = document.createElement('p');\n  copyRightPara.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  const copyRightElement = new ElementBuilder(copyRightPara)\n    .withClassName('umd-footer-utility-container-copyright')\n    .build();\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  linkElements.push(copyRight);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-utility-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    })\n    .withChildren(...linkElements)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container')\n    .withStyles({\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { BREAKPOINTS } from '../../globals';\nimport { UtilityProps } from '../../_types';\nimport { type UMDElement } from '../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return new ElementBuilder(link)\n    .withClassName('umd-footer-utility-container-link')\n    .build();\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = new ElementBuilder('span')\n    .withClassName('umd-footer-utility-container-sublink-text')\n    .withText(title)\n    .build();\n\n  const anchor = document.createElement('a');\n  anchor.setAttribute('href', url);\n  anchor.setAttribute('target', '_blank');\n  anchor.setAttribute('rel', 'noopener noreferrer');\n\n  const link = new ElementBuilder(anchor)\n    .withClassName('umd-footer-utility-container-sublink')\n    .withChild(span)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container-link-wrapper')\n    .withChild(createUtilityContainerLink(link.element))\n    .build();\n};\n\nexport default (\n  props: Pick<UtilityProps, 'isThemeLight' | 'slotUtilityLinks'>,\n) => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: UMDElement[] = [];\n\n  const copyRightPara = document.createElement('p');\n  copyRightPara.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  const copyRightElement = new ElementBuilder(copyRightPara)\n    .withClassName('umd-footer-utility-container-copyright')\n    .build();\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  linkElements.push(copyRight);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('umd-footer-utility-container-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    })\n    .withChildren(...linkElements)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-footer-utility-container')\n    .withStyles({\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":[],"mappings":";;;;AAYA,MAAM,EAAE,UAAU;AAElB,MAAM,mBAAmB;AAAA,EACvB;AAAA,IACE,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAEA,MAAM,6BAA6B,CAAC,SAAsB;AACxD,SAAO,IAAI,eAAe,IAAI,EAC3B,cAAc,mCAAmC,EACjD,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,EAAE,OAAO,UAA0C;AACxE,QAAM,OAAO,IAAI,eAAe,MAAM,EACnC,cAAc,2CAA2C,EACzD,SAAS,KAAK,EACd,MAAA;AAEH,QAAM,SAAS,SAAS,cAAc,GAAG;AACzC,SAAO,aAAa,QAAQ,GAAG;AAC/B,SAAO,aAAa,UAAU,QAAQ;AACtC,SAAO,aAAa,OAAO,qBAAqB;AAEhD,QAAM,OAAO,IAAI,eAAe,MAAM,EACnC,cAAc,sCAAsC,EACpD,UAAU,IAAI,EACd,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,2CAA2C,EACzD,UAAU,2BAA2B,KAAK,OAAO,CAAC,EAClD,MAAA;AACL;AAEA,MAAA,gBAAe,CACb,UACG;AACH,QAAM,EAAE,cAAc,iBAAA,IAAqB;AAC3C,QAAM,eAA6B,CAAA;AAEnC,QAAM,gBAAgB,SAAS,cAAc,GAAG;AAChD,gBAAc,YAAY,KAAI,oBAAI,QAAO,aAAa;AAEtD,QAAM,mBAAmB,IAAI,eAAe,aAAa,EACtD,cAAc,wCAAwC,EACtD,MAAA;AAEH,MAAI,kBAAkB;AACpB,UAAM,eAAe,MAAM;AAAA,MACzB,iBAAiB,iBAAiB,GAAG;AAAA,IAAA;AAGvC,iBAAa,QAAQ,CAAC,SAAS;AAC7B,2BAAqB,EAAE,SAAS,MAAM;AACtC,mBAAa,KAAK,2BAA2B,IAAI,CAAC;AAAA,IACpD,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,2BAA2B,iBAAiB,OAAO;AAErE,mBAAiB,QAAQ,CAAC,SAAS;AACjC,iBAAa,KAAK,cAAc,IAAI,CAAC;AAAA,EACvC,CAAC;AAED,eAAa,KAAK,SAAS;AAE3B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAG,OAAO,MAAM,WAAW;AAAA,MAE3B,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,QAC1C,2BAA2B;AAAA,UACzB,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAGF,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,QACtC,SAAS;AAAA,QACT,YAAY;AAAA,QAEZ,CAAC,yBAAyB,GAAG;AAAA,UAC3B,YAAY,MAAM,QAAQ;AAAA,UAC1B,aAAa,MAAM,QAAQ;AAAA,UAC3B,oBAAoB,GAAG,MAAM,QAAQ,EAAE;AAAA,UACvC,YAAY,aAAa,MAAM,MAAM,KAAK,IAAI;AAAA,QAAA;AAAA,MAChD;AAAA,MAGF,CAAC,UAAU,GAAG;AAAA,QACZ,OAAO,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAG1B,CAAC,KAAK,GAAG;AAAA,QACP,GAAI,gBAAgB,EAAE,OAAO,MAAM,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,MAGrD,CAAC,KAAK,GAAG;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QAEZ,GAAI,gBAAgB,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,MAAM;AAAA,IACjD;AAAA,EACF,CACD,EACA,aAAa,GAAG,YAAY,EAC5B,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC5B,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,GAAI,gBAAgB;AAAA,QAClB,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAGpC,CAAC,KAAK,GAAG;AAAA,QACP,GAAG,WAAW,KAAK;AAAA,MAAA;AAAA,MAGrB,CAAC,KAAK,GAAG;AAAA,QACP,SAAS;AAAA,QACT,GAAG,UAAU,KAAK;AAAA,QAElB,GAAI,gBAAgB;AAAA,UAClB,OAAO,MAAM,MAAM;AAAA,UACnB,GAAG,UAAU,KAAK;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AACL;"}

package/dist/composite/footer/index.d.ts

@@ -1,2 +1,4 @@
-export { default as options } from './options';
+export { default as mega } from './mega';
+export { default as simple } from './simple';
+export { default as visual } from './visual';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/composite/footer/index.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const options = require("./options.js");
-exports.options = options;
+const mega = require("./mega.js");
+const simple = require("./simple.js");
+const visual = require("./visual.js");
+exports.mega = mega;
+exports.simple = simple;
+exports.visual = visual;
 //# sourceMappingURL=index.js.map

package/dist/composite/footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/composite/footer/index.mjs

@@ -1,5 +1,9 @@
-import { default as default2 } from "./options.mjs";
+import { default as default2 } from "./mega.mjs";
+import { default as default3 } from "./simple.mjs";
+import { default as default4 } from "./visual.mjs";
 export {
-  default2 as options
+  default2 as mega,
+  default3 as simple,
+  default4 as visual
 };
 //# sourceMappingURL=index.mjs.map

package/dist/composite/footer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/composite/footer/mega.d.ts

@@ -0,0 +1,4 @@
+import { FooterProps } from './_types';
+declare const _default: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export default _default;
+//# sourceMappingURL=mega.d.ts.map

package/dist/composite/footer/mega.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mega.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/mega.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;yBAGvB,OAAO,WAAW;AAAlC,wBAKE"}

package/dist/composite/footer/mega.js

@@ -0,0 +1,11 @@
+"use strict";
+const index = require("./elements/main-section/index.js");
+const index$1 = require("./elements/utility-section/index.js");
+const base = require("./base.js");
+const mega = (props) => {
+  const main = index(props);
+  const utility = index$1(props);
+  return base(props, [main, utility]);
+};
+module.exports = mega;
+//# sourceMappingURL=mega.js.map

package/dist/composite/footer/mega.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mega.js","sources":["../../../source/composite/footer/mega.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":["createMain","createUtility","buildFooter"],"mappings":";;;;AAKA,MAAA,OAAe,CAAC,UAAuB;AACrC,QAAM,OAAOA,MAAW,KAAK;AAC7B,QAAM,UAAUC,QAAc,KAAK;AAEnC,SAAOC,KAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;;"}

package/dist/composite/footer/mega.mjs

@@ -0,0 +1,12 @@
+import createMain from "./elements/main-section/index.mjs";
+import createUtility from "./elements/utility-section/index.mjs";
+import buildFooter from "./base.mjs";
+const mega = (props) => {
+  const main = createMain(props);
+  const utility = createUtility(props);
+  return buildFooter(props, [main, utility]);
+};
+export {
+  mega as default
+};
+//# sourceMappingURL=mega.mjs.map

package/dist/composite/footer/mega.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mega.mjs","sources":["../../../source/composite/footer/mega.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":[],"mappings":";;;AAKA,MAAA,OAAe,CAAC,UAAuB;AACrC,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,UAAU,cAAc,KAAK;AAEnC,SAAO,YAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;"}

package/dist/composite/footer/simple.d.ts

@@ -0,0 +1,4 @@
+import { FooterProps } from './_types';
+declare const _default: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export default _default;
+//# sourceMappingURL=simple.d.ts.map

package/dist/composite/footer/simple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/simple.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;yBAGvB,OAAO,WAAW;AAAlC,wBAKE"}

package/dist/composite/footer/simple.js

@@ -0,0 +1,11 @@
+"use strict";
+const index = require("./elements/main-section/index.js");
+const index$1 = require("./elements/utility-section/index.js");
+const base = require("./base.js");
+const simple = (props) => {
+  const main = index(props);
+  const utility = index$1(props);
+  return base(props, [main, utility]);
+};
+module.exports = simple;
+//# sourceMappingURL=simple.js.map

package/dist/composite/footer/simple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.js","sources":["../../../source/composite/footer/simple.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":["createMain","createUtility","buildFooter"],"mappings":";;;;AAKA,MAAA,SAAe,CAAC,UAAuB;AACrC,QAAM,OAAOA,MAAW,KAAK;AAC7B,QAAM,UAAUC,QAAc,KAAK;AAEnC,SAAOC,KAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;;"}

package/dist/composite/footer/simple.mjs

@@ -0,0 +1,12 @@
+import createMain from "./elements/main-section/index.mjs";
+import createUtility from "./elements/utility-section/index.mjs";
+import buildFooter from "./base.mjs";
+const simple = (props) => {
+  const main = createMain(props);
+  const utility = createUtility(props);
+  return buildFooter(props, [main, utility]);
+};
+export {
+  simple as default
+};
+//# sourceMappingURL=simple.mjs.map

package/dist/composite/footer/simple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple.mjs","sources":["../../../source/composite/footer/simple.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":[],"mappings":";;;AAKA,MAAA,SAAe,CAAC,UAAuB;AACrC,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,UAAU,cAAc,KAAK;AAEnC,SAAO,YAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;"}

package/dist/composite/footer/visual.d.ts

@@ -0,0 +1,4 @@
+import { FooterProps } from './_types';
+declare const _default: (props: FooterProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export default _default;
+//# sourceMappingURL=visual.d.ts.map

package/dist/composite/footer/visual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/visual.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;yBAGvB,OAAO,WAAW;AAAlC,wBAKE"}

package/dist/composite/footer/visual.js

@@ -0,0 +1,11 @@
+"use strict";
+const index = require("./elements/main-section/index.js");
+const index$1 = require("./elements/utility-section/index.js");
+const base = require("./base.js");
+const visual = (props) => {
+  const main = index(props);
+  const utility = index$1(props);
+  return base(props, [main, utility]);
+};
+module.exports = visual;
+//# sourceMappingURL=visual.js.map

package/dist/composite/footer/visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual.js","sources":["../../../source/composite/footer/visual.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":["createMain","createUtility","buildFooter"],"mappings":";;;;AAKA,MAAA,SAAe,CAAC,UAAuB;AACrC,QAAM,OAAOA,MAAW,KAAK;AAC7B,QAAM,UAAUC,QAAc,KAAK;AAEnC,SAAOC,KAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;;"}

package/dist/composite/footer/visual.mjs

@@ -0,0 +1,12 @@
+import createMain from "./elements/main-section/index.mjs";
+import createUtility from "./elements/utility-section/index.mjs";
+import buildFooter from "./base.mjs";
+const visual = (props) => {
+  const main = createMain(props);
+  const utility = createUtility(props);
+  return buildFooter(props, [main, utility]);
+};
+export {
+  visual as default
+};
+//# sourceMappingURL=visual.mjs.map

package/dist/composite/footer/visual.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual.mjs","sources":["../../../source/composite/footer/visual.ts"],"sourcesContent":["import createMain from './elements/main-section';\nimport createUtility from './elements/utility-section';\nimport { FooterProps } from './_types';\nimport buildFooter from './base';\n\nexport default (props: FooterProps) => {\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  return buildFooter(props, [main, utility]);\n};\n"],"names":[],"mappings":";;;AAKA,MAAA,SAAe,CAAC,UAAuB;AACrC,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,UAAU,cAAc,KAAK;AAEnC,SAAO,YAAY,OAAO,CAAC,MAAM,OAAO,CAAC;AAC3C;"}

package/dist/composite/layout/section-intro/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA4Pe,OAAO,iBAAiB;;;;;;;;;AAAxC,wBAkBE"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA4Pe,OAAO,iBAAiB;;;;;;;;;AAAxC,wBAkBE"}

package/dist/composite/layout/section-intro/small.js

@@ -64,17 +64,26 @@ const createHeadline = (props) => {
   }).build();
 };
 const createText = (props) => {
-  const { text, isThemeDark } = props;
+  const { text, headline, isThemeDark } = props;
+  const simpleRichTextOptions = {
+    size: "large",
+    theme: theme.theme.fontColor(isThemeDark)
+  };
   if (!text) return null;
-  return new webBuilderLibrary.ElementBuilder(text).styled(
-    Styles__namespace.element.text.rich.composeSimple({
-      size: "large",
-      theme: theme.theme.fontColor(isThemeDark)
-    })
-  ).withStyles({
+  if (!headline) simpleRichTextOptions.size = "largest";
+  return new webBuilderLibrary.ElementBuilder(text).styled(Styles__namespace.element.text.rich.composeSimple(simpleRichTextOptions)).withStyles({
     element: {
       [`* + &`]: {
         marginTop: token__namespace.spacing.sm
+      },
+      [`&, & > *`]: {
+        ...!headline && {
+          ...typography__namespace.sans.transformations.largerBold,
+          color: token__namespace.color.black,
+          ...isThemeDark && {
+            color: token__namespace.color.white
+          }
+        }
       }
     }
   }).build();
@@ -95,22 +104,13 @@ const createActions = (props) => {
 const createTextContainer = (props) => {
   const { headline, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline, isThemeDark });
-  const textElement = createText({ text, isThemeDark });
+  const textElement = createText({ text, headline, isThemeDark });
   const actionsElement = createActions({ actions });
   const container = new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container-text").withStyles({
     element: {
       ...includesAnimation && {
         opacity: 0
       },
-      ["& > *, p"]: {
-        ...!headline && {
-          ...typography__namespace.sans.transformations.largerBold,
-          color: token__namespace.color.black,
-          ...isThemeDark && {
-            color: token__namespace.color.white
-          }
-        }
-      },
       [".intro-default-animated &"]: {
         transform: "translateY(100px)",
         animation: "intro-fade-in 1s forwards",

package/dist/composite/layout/section-intro/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.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 Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, isThemeDark } = props;\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(\n      Styles.element.text.rich.composeSimple({\n        size: 'large',\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder()\n    .withClassName('intro-default-container-text')\n    .withStyles({\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    });\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","ElementBuilder","Styles","theme","typography","observer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA;AAAA;AAAA;AAAA,gCAIwBA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,kBAG9BA,iBAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYV;AAEA,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAIC,kBAAAA,eAAe,QAAQ,EAC/B;AAAA,IACCC,kBAAO,WAAW,KAAK,QAAQ,WAAW;AAAA,MACxC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CACjB,UACqC;AACrC,QAAM,EAAE,MAAM,YAAA,IAAgB;AAC9B,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO,IAAIF,kBAAAA,eAAe,IAAI,EAC3B;AAAA,IACCC,kBAAO,QAAQ,KAAK,KAAK,cAAc;AAAA,MACrC,MAAM;AAAA,MACN,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAWH,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAIC,kBAAAA,eAAe,OAAO,EAC9B,OAAOC,kBAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,CAAC,OAAO,GAAG;AAAA,QACT,WAAWF,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,sBAAsB,CAC1B,UAI8B;AAC9B,QAAM,EAAE,UAAU,MAAM,SAAS,mBAAmB,gBAAgB;AAEpE,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,cAAc,WAAW,EAAE,MAAM,aAAa;AACpD,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,YAAY,IAAIC,kBAAAA,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAI,qBAAqB;AAAA,QACvB,SAAS;AAAA,MAAA;AAAA,MAGX,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,CAAC,YAAY;AAAA,UACf,GAAGG,sBAAW,KAAK,gBAAgB;AAAA,UACnC,OAAOJ,iBAAM,MAAM;AAAA,UAEnB,GAAI,eAAe;AAAA,YACjB,OAAOA,iBAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,MAGF,CAAC,2BAA2B,GAAG;AAAA,QAC7B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAGlB,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,qBAAqB;AAAA,UACvB,QAAQ;AAAA,UACR,WAAW,cAAcA,iBAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,iBAAiB;AACnB,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,aAAa;AACf,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,gBAAgB;AAClB,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,gBAAgB,CACpB,UAI8B;AAC9B,QAAM,uBAAuB,oBAAoB,KAAK;AAEtD,SAAO,IAAIC,kBAAAA,iBACR,cAAc,iCAAiC,EAC/C,UAAU,oBAAoB,EAC9B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AACL;AAEA,MAAM,kBAAkB,CACtB,UAS8B;AAC9B,QAAM,EAAE,aAAa,cAAc,kBAAA,IAAsB;AAEzD,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAIA,kBAAAA,iBACR,cAAc,yBAAyB,EACvC,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAUD,iBAAM,QAAQ,SAAS;AAAA,MACjC,QAAQ;AAAA,MAER,GAAI,gBAAgB;AAAA,QAClB,YAAYA,iBAAM,QAAQ,KAAK;AAAA,QAC/B,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,gBAAgB;AAAA,UAClB,SAAS;AAAA,UACT,iBAAiBA,iBAAM,MAAM;AAAA,UAC7B,UAAU;AAAA,UACV,QAAQA,iBAAM,QAAQ,KAAK;AAAA,UAC3B,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,CAAC,iCAAiC,GAAG;AAAA,QACnC,GAAI,qBAAqB;AAAA,UACvB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UAGG;AACH,QAAM,EAAE,mBAAmB,UAAA,IAAc;AACzC,MAAI,CAAC,kBAAmB;AAExB,QAAM,YAA0C,CAAC,SAASK,cAAa;AACrE,YAAQ,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,MAAM;AAErB,UAAI,MAAM,gBAAgB;AACxB,eAAO,UAAU,IAAI,wBAAwB;AAC7CA,kBAAS,UAAU,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,IAAI,qBAAqB,WAAW;AAAA,IACnD,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW,CAAC,IAAI;AAAA,EAAA,CACjB;AAED,WAAS,QAAQ,SAAS;AAC5B;AAEA,MAAA,QAAe,CAAC,UAA6B;AAC3C,QAAM,mBAAmB,gBAAgB,KAAK;AAE9C,QAAM,gBAAgB,MACpB,eAAe;AAAA,IACb,mBAAmB,MAAM;AAAA,IACzB,WAAW,iBAAiB;AAAA,EAAA,CAC7B;AAEH,MAAI,MAAM,mBAAmB;AAC3B,qBAAiB,UAAU,kBAAkB;AAC7C,qBAAiB,UAAU,kBAAkB;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,cAAA;AAAA,EAAc;AAE5B;;"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.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 Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, headline, isThemeDark } = props;\n  const simpleRichTextOptions: SimpleRichTextOptions = {\n    size: 'large',\n    theme: theme.fontColor(isThemeDark),\n  };\n  if (!text) return null;\n  if (!headline) simpleRichTextOptions.size = 'largest';\n\n  return new ElementBuilder(text)\n    .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n\n        [`&, & > *`]: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder()\n    .withClassName('intro-default-container-text')\n    .withStyles({\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    });\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","ElementBuilder","Styles","theme","typography","observer"],"mappings":"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"}

package/dist/composite/layout/section-intro/small.mjs

@@ -44,17 +44,26 @@ const createHeadline = (props) => {
   }).build();
 };
 const createText = (props) => {
-  const { text, isThemeDark } = props;
+  const { text, headline, isThemeDark } = props;
+  const simpleRichTextOptions = {
+    size: "large",
+    theme: theme.fontColor(isThemeDark)
+  };
   if (!text) return null;
-  return new ElementBuilder(text).styled(
-    Styles.element.text.rich.composeSimple({
-      size: "large",
-      theme: theme.fontColor(isThemeDark)
-    })
-  ).withStyles({
+  if (!headline) simpleRichTextOptions.size = "largest";
+  return new ElementBuilder(text).styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions)).withStyles({
     element: {
       [`* + &`]: {
         marginTop: token.spacing.sm
+      },
+      [`&, & > *`]: {
+        ...!headline && {
+          ...typography.sans.transformations.largerBold,
+          color: token.color.black,
+          ...isThemeDark && {
+            color: token.color.white
+          }
+        }
       }
     }
   }).build();
@@ -75,22 +84,13 @@ const createActions = (props) => {
 const createTextContainer = (props) => {
   const { headline, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline, isThemeDark });
-  const textElement = createText({ text, isThemeDark });
+  const textElement = createText({ text, headline, isThemeDark });
   const actionsElement = createActions({ actions });
   const container = new ElementBuilder().withClassName("intro-default-container-text").withStyles({
     element: {
       ...includesAnimation && {
         opacity: 0
       },
-      ["& > *, p"]: {
-        ...!headline && {
-          ...typography.sans.transformations.largerBold,
-          color: token.color.black,
-          ...isThemeDark && {
-            color: token.color.white
-          }
-        }
-      },
       [".intro-default-animated &"]: {
         transform: "translateY(100px)",
         animation: "intro-fade-in 1s forwards",