@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/tabs/standard.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"standard.mjs","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: 9;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n    z-index: 99;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":[],"mappings":"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"}

package/dist/composite.mjs

@@ -1,35 +0,0 @@
-import * as index from "./composite/accordion/index.mjs";
-import * as index$1 from "./composite/banner/index.mjs";
-import * as index$2 from "./composite/alert/index.mjs";
-import * as index$3 from "./composite/card/index.mjs";
-import * as index$4 from "./composite/carousel/index.mjs";
-import * as index$5 from "./composite/footer/index.mjs";
-import * as index$6 from "./composite/hero/index.mjs";
-import * as index$7 from "./composite/layout/index.mjs";
-import * as index$8 from "./composite/media/index.mjs";
-import * as index$9 from "./composite/navigation/index.mjs";
-import * as index$a from "./composite/pathway/index.mjs";
-import * as index$b from "./composite/person/index.mjs";
-import * as index$c from "./composite/quote/index.mjs";
-import * as index$d from "./composite/slider/index.mjs";
-import * as index$e from "./composite/social/index.mjs";
-import * as index$f from "./composite/tabs/index.mjs";
-export {
-  index as accordion,
-  index$2 as alert,
-  index$1 as banner,
-  index$3 as card,
-  index$4 as carousel,
-  index$5 as footer,
-  index$6 as hero,
-  index$7 as layout,
-  index$8 as media,
-  index$9 as navigation,
-  index$a as pathway,
-  index$b as person,
-  index$c as quote,
-  index$d as slider,
-  index$e as social,
-  index$f as tabs
-};
-//# sourceMappingURL=composite.mjs.map

package/dist/composite.mjs.map

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

package/dist/index.mjs

@@ -1,9 +0,0 @@
-import * as atomic from "./atomic.mjs";
-import * as composite from "./composite.mjs";
-import * as layout from "./layout.mjs";
-export {
-  atomic as Atomic,
-  composite as Composite,
-  layout as Layout
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

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

package/dist/layout/image.mjs

@@ -1,95 +0,0 @@
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-const ATTRIBUTE_CAPTION = "data-caption";
-const ATTRIBUTE_CREDIT = "data-credit";
-const ELEMENT_IMAGE_CONTAINER = "image-container";
-const STYLES_IMAGE_CONTAINER = `
-  .${ELEMENT_IMAGE_CONTAINER} {
-    position: relative;
-    display: inline-block;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min
-  }
-})}
-
-  .${ELEMENT_IMAGE_CONTAINER} > span {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: auto !important;
-    width: auto !important;
-    padding: ${token.spacing.min};
-    background-color: rgba(0, 0, 0, 0.5);
-    color: ${token.color.white};
-    z-index: 99;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > img {
-    display: block;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a {
-    display: block;
-    line-height: 0;
-    overflow: hidden;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a img {
-    object-fit: cover;
-    object-position: center;
-    transform: scale(1);
-    transition: transform 0.5s;
-    width: 100%;
-  }
-
-  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,
-  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {
-    transform: scale(1.025);
-  }
-`;
-const CreateImageContainer = ({
-  image,
-  showCaption = false
-}) => {
-  const container = document.createElement("div");
-  const isString = typeof image === "string";
-  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);
-  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);
-  const attributeCaption = hasCaption ? image.getAttribute(ATTRIBUTE_CAPTION) : null;
-  const attributeCredit = hasCredit ? image.getAttribute(ATTRIBUTE_CREDIT) : null;
-  container.classList.add(ELEMENT_IMAGE_CONTAINER);
-  if (isString) {
-    container.innerHTML = image;
-    return container;
-  }
-  if (showCaption) {
-    if (attributeCaption) {
-      console.log(
-        `Attribute "data-caption" is deprecated. Use "data-credit" instead. This attribute will be removed in version 2.0.`
-      );
-    }
-    if (attributeCaption || attributeCredit) {
-      const text = attributeCaption || attributeCredit;
-      const caption = document.createElement("span");
-      caption.textContent = text;
-      container.appendChild(caption);
-    }
-  }
-  container.appendChild(image);
-  return container;
-};
-const LayoutImage = {
-  CreateElement: CreateImageContainer,
-  Styles: STYLES_IMAGE_CONTAINER,
-  Elements: {
-    container: ELEMENT_IMAGE_CONTAINER
-  }
-};
-export {
-  LayoutImage as default
-};
-//# sourceMappingURL=image.mjs.map

package/dist/layout/image.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.mjs","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\nconst ELEMENT_IMAGE_CONTAINER = 'image-container';\n\n// prettier-ignore\nconst STYLES_IMAGE_CONTAINER = `\n  .${ELEMENT_IMAGE_CONTAINER} {\n    position: relative;\n    display: inline-block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_IMAGE_CONTAINER} > span {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    height: auto !important;\n    width: auto !important;\n    padding: ${token.spacing.min};\n    background-color: rgba(0, 0, 0, 0.5);\n    color: ${token.color.white};\n    z-index: 99;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > img {\n    display: block;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a {\n    display: block;\n    line-height: 0;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a img {\n    object-fit: cover;\n    object-position: center;\n    transform: scale(1);\n    transition: transform 0.5s;\n    width: 100%;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,\n  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {\n    transform: scale(1.025);\n  }\n`;\n\nconst CreateImageContainer = ({\n  image,\n  showCaption = false,\n}: {\n  image: HTMLImageElement | HTMLElement | string;\n  showCaption?: boolean;\n}) => {\n  const container = document.createElement('div');\n  const isString = typeof image === 'string';\n  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);\n  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);\n  const attributeCaption = hasCaption\n    ? image.getAttribute(ATTRIBUTE_CAPTION)\n    : null;\n  const attributeCredit = hasCredit\n    ? image.getAttribute(ATTRIBUTE_CREDIT)\n    : null;\n\n  container.classList.add(ELEMENT_IMAGE_CONTAINER);\n\n  if (isString) {\n    container.innerHTML = image;\n    return container;\n  }\n\n  if (showCaption) {\n    if (attributeCaption) {\n      console.log(\n        `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n      );\n    }\n\n    if (attributeCaption || attributeCredit) {\n      const text = attributeCaption || attributeCredit;\n      const caption = document.createElement('span');\n      caption.textContent = text;\n      container.appendChild(caption);\n    }\n  }\n\n  container.appendChild(image);\n  return container;\n};\n\nexport default {\n  CreateElement: CreateImageContainer,\n  Styles: STYLES_IMAGE_CONTAINER,\n  Elements: {\n    container: ELEMENT_IMAGE_CONTAINER,\n  },\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAGhC,MAAM,yBAAyB;AAAA,KAC1B,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,SAAS,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5D,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMb,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEnB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAIzB,uBAAuB;AAAA;AAAA;AAAA;AAAA,KAIvB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQvB,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAK5B,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,cAAc;AAChB,MAGM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,WAAW,OAAO,UAAU;AAClC,QAAM,aAAa,CAAC,YAAY,MAAM,aAAa,iBAAiB;AACpE,QAAM,YAAY,CAAC,YAAY,MAAM,aAAa,gBAAgB;AAClE,QAAM,mBAAmB,aACrB,MAAM,aAAa,iBAAiB,IACpC;AACJ,QAAM,kBAAkB,YACpB,MAAM,aAAa,gBAAgB,IACnC;AAEJ,YAAU,UAAU,IAAI,uBAAuB;AAE/C,MAAI,UAAU;AACZ,cAAU,YAAY;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,aAAa;AACf,QAAI,kBAAkB;AACpB,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,oBAAoB,iBAAiB;AACvC,YAAM,OAAO,oBAAoB;AACjC,YAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,cAAQ,cAAc;AACtB,gBAAU,YAAY,OAAO;AAAA,IAC/B;AAAA,EACF;AAEA,YAAU,YAAY,KAAK;AAC3B,SAAO;AACT;AAEA,MAAA,cAAe;AAAA,EACb,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}

package/dist/layout.mjs

@@ -1,5 +0,0 @@
-import { default as default2 } from "./layout/image.mjs";
-export {
-  default2 as Image
-};
-//# sourceMappingURL=layout.mjs.map

package/dist/layout.mjs.map

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