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

package/dist/composite/social/sharing.d.ts

@@ -1,18 +1,4 @@
-type TypeSocialSharingProps = {
-    isFixed?: boolean;
-    includeFacebook?: boolean;
-    includeTwitter?: boolean;
-    includeEmail?: boolean;
-    includePrint?: boolean;
-    title?: string | null;
-    url?: string | null;
-};
-declare const CreateSocialSharingElement: (props: TypeSocialSharingProps) => {
-    element: HTMLDivElement;
-    events: {
-        load: () => void;
-    };
-    styles: string;
-};
-export default CreateSocialSharingElement;
+import { ElementModel } from '../../_types';
+import { SocialSharingProps } from './_types';
+export declare const createCompositeSocialSharing: (props: SocialSharingProps) => ElementModel<HTMLElement>;
 //# sourceMappingURL=sharing.d.ts.map

package/dist/composite/social/sharing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AAMA,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB,CAAC;AAqJF,QAAA,MAAM,0BAA0B,GAAI,OAAO,sBAAsB;;;;;;CA4H3D,CAAC;AAEP,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"sharing.d.ts","sourceRoot":"","sources":["../../../source/composite/social/sharing.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA6TnD,eAAO,MAAM,4BAA4B,UA9BE,kBAAkB,8BA8BS,CAAC"}

package/dist/composite/social/sharing.js

@@ -1,178 +1,160 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const social = require("@universityofmaryland/web-icons-library/social");
-const communication = require("@universityofmaryland/web-icons-library/communication");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { email } from "@universityofmaryland/web-icons-library/communication";
+import { print } from "@universityofmaryland/web-icons-library/controls";
+import { facebook, x } from "@universityofmaryland/web-icons-library/social";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+const createFacebookButton = () => {
+  const model = new ElementBuilder("button").withClassName("social-sharing-facebook").withHTML(facebook).withStyles({
+    element: {
+      ["& svg"]: {
+        width: "34px",
+        height: "30px"
       }
     }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const ATTRIBUTE_FIXED = "fixed";
-const IS_FIXED = `[${ATTRIBUTE_FIXED}]`;
-const ELEMENT_NAME = "umd-element-social-sharing";
-const ELEMENT_SOCIAL_SHARING_DECLARATION = "social-sharing-declarion";
-const ELEMENT_SOCIAL_SHARING_CONTAINER = "social-sharing-container";
-const OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;
-const OverwriteFixed = `
-  @media (${token__namespace.media.queries.tablet.min}) {
-    ${OVERWRITE_FIXED_CONTAINER} {
-      flex-direction: column;
+  }).withAria({ label: "share this page on facebook" }).withEvents({
+    click: () => {
+      const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
+        window.location.toString()
+      )}`;
+      window.open(
+        shareURL,
+        "Facebook",
+        "toolbar=0,status=0,width=626,height=436"
+      );
     }
-  }
-
-  @media (${token__namespace.media.queries.tablet.min}) {
-    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {
-      border-right: 1px solid ${token__namespace.color.gray.light};
-      border-bottom: none;
+  }).build();
+  return model;
+};
+const createTwitterButton = ({
+  url,
+  title
+}) => {
+  const model = new ElementBuilder("button").withHTML(x).withAria({ label: "share this page on twitter" }).withEvents({
+    click: () => {
+      const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
+      window.open(
+        shareURL,
+        "sharer",
+        "toolbar=0,status=0,width=626,height=436"
+      );
     }
-  }
-`;
-const ContainerStyles = `
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {
-    display: flex;
-    transition: transform 250ms ease-in-out;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {
-    height: ${token__namespace.spacing["2xl"]};
-    width: ${token__namespace.spacing["2xl"]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid ${token__namespace.color.gray.light};
-    background-color: ${token__namespace.color.white};
-    transition: background-color 250ms ease-in-out;
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {
-    background-color: ${token__namespace.color.gray.dark};
-
-    & svg path {
-      fill: ${token__namespace.color.white};
+  }).build();
+  return model;
+};
+const createEmailLink = ({
+  url,
+  title
+}) => new ElementBuilder("a").withClassName("social-sharing-email").withStyles({
+  element: {
+    ["& svg"]: {
+      width: "21px",
+      height: "20px"
     }
   }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {
-    border-right: none;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {
-    display: block;
-    transition: fill 250ms ease-in-out;
-  }
-  
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {
-    fill: ${token__namespace.color.black};
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {
-    width: 34px;
-    height: 30px;
-  }
-
-  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {
-    width: 21px;
-    height: 20px;
-  }
-`;
-const STYLES_SOCIAL_SHARING_ELEMENT = `
-  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${ContainerStyles}
-  ${OverwriteFixed}
-`;
-const CreateFacebook = () => {
-  const button = document.createElement("button");
-  button.innerHTML = social.facebook;
-  button.setAttribute("aria-label", "share this page on facebook");
-  button.addEventListener("click", () => {
-    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
-      window.location.toString()
-    )}`;
-    window.open(
-      shareURL,
-      "Facebook",
-      "toolbar=0,status=0,width=626,height=436"
-    );
-  });
-  return button;
-};
-const CreateTwitter = ({ url, title }) => {
-  const button = document.createElement("button");
-  button.innerHTML = social.x;
-  button.setAttribute("aria-label", "share this page on twitter");
-  button.addEventListener("click", () => {
-    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
-    window.open(shareURL, "sharer", "toolbar=0,status=0,width=626,height=436");
-  });
-  return button;
-};
-const CreateEmail = ({ url, title }) => {
-  const link = document.createElement("a");
-  link.href = `mailto:?subject=${title}&body=${url}`;
-  link.setAttribute("aria-label", "email this page");
-  link.setAttribute("target", "_blank");
-  link.innerHTML = communication.email;
-  return link;
+}).withHTML(email).withAttributes({
+  href: `mailto:?subject=${title}&body=${url}`,
+  target: "_blank"
+}).withAria({ label: "email this page" }).build();
+const createPrintButton = () => {
+  const model = new ElementBuilder("button").withHTML(print).withAria({ label: "print this page" }).withEvents({
+    click: () => window.print()
+  }).build();
+  return model;
 };
-const CreatePrint = () => {
-  const button = document.createElement("button");
-  button.innerHTML = controls.print;
-  button.setAttribute("aria-label", "print this page");
-  button.addEventListener("click", () => window.print());
-  return button;
-};
-const CreateSocialSharingElement = (props) => (() => {
+const createContainer = (props) => {
   const {
     includeFacebook = true,
     includeTwitter = true,
     includeEmail = false,
     includePrint = false,
+    isFixed = false,
     title: defaultTitle,
-    url: defaultUrl,
-    isFixed = false
+    url: defaultUrl
   } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const defaultStartingPosition = `translateX(-100vh)`;
   const title = defaultTitle || document.title;
   const url = defaultUrl || window.location.toString();
-  const getSpacing = () => window.innerWidth > 768 ? 40 : 8;
-  let startingPosition = null;
-  let isShowing = false;
-  const eventResize = () => {
-    startingPosition = declaration.getBoundingClientRect().left;
-  };
-  const eventScroll = () => {
-    const windowHeight = window.innerHeight;
-    const pagePosition = window.scrollY;
-    const isNearBottom = pagePosition + windowHeight >= document.body.scrollHeight - windowHeight / 2;
-    const showWindow = !isNearBottom;
-    if (showWindow) {
-      setVisiblePosition();
-    } else {
-      setHiddenPosition();
+  const container = new ElementBuilder().withClassName("social-sharing-container").withStyles({
+    element: {
+      display: "flex",
+      transition: "transform 250ms ease-in-out",
+      ["& > *"]: {
+        height: token.spacing["2xl"],
+        width: token.spacing["2xl"],
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: `1px solid ${token.color.gray.light}`,
+        backgroundColor: token.color.white,
+        transition: "background-color 250ms ease-in-out"
+      },
+      ["& > button:hover, & > button:focus, & > a:hover, & > a:focus"]: {
+        backgroundColor: token.color.gray.dark,
+        ["svg path"]: {
+          fill: token.color.white
+        }
+      },
+      ["& > *:not(:last-child)"]: {
+        borderRight: "none"
+      },
+      ["& svg"]: {
+        display: "block",
+        transition: "fill 250ms ease-in-out"
+      },
+      ["& svg path"]: {
+        fill: token.color.black
+      },
+      [`@media (${token.media.queries.tablet.min})`]: {
+        ["&[fixed]"]: {
+          flexDirection: "column"
+        },
+        ["&[fixed] > *:not(:last-child)"]: {
+          borderRight: `1px solid ${token.color.gray.light}`,
+          borderBottom: "none"
+        }
+      }
+    }
+  });
+  if (isFixed) {
+    container.withAttribute("fixed", "");
+  }
+  if (includeFacebook) {
+    container.withChild(createFacebookButton());
+  }
+  if (includeTwitter) {
+    container.withChild(
+      createTwitterButton({
+        title,
+        url
+      })
+    );
+  }
+  if (includeEmail) {
+    container.withChild(
+      createEmailLink({
+        title,
+        url
+      })
+    );
+  }
+  if (includePrint) {
+    container.withChild(createPrintButton());
+  }
+  return container.build();
+};
+const setupFixedBehaviour = ({
+  container,
+  declaration
+}) => {
+  const defaultStartingPosition = -100;
+  const getSpacing = () => {
+    if (window.innerWidth > 768) {
+      return 40;
     }
+    return 8;
   };
+  let startingPosition = null;
+  let isShowing = false;
   const setVisiblePosition = () => {
     if (!isShowing) {
       container.style.transform = "translateX(0)";
@@ -188,10 +170,24 @@ const CreateSocialSharingElement = (props) => (() => {
         const position = translateAmount + spacing + container.offsetWidth;
         container.style.transform = `translateX(-${position}px)`;
       } else {
-        container.style.transform = defaultStartingPosition;
+        container.style.transform = `translateX(${defaultStartingPosition}vh)`;
       }
     }
   };
+  const eventResize = () => {
+    startingPosition = declaration.getBoundingClientRect().left;
+  };
+  const eventScroll = () => {
+    const windowHeight = window.innerHeight;
+    const pagePosition = window.scrollY;
+    const isNearBottom = pagePosition + windowHeight >= document.body.scrollHeight - windowHeight / 2;
+    const shouldShow = !isNearBottom;
+    if (shouldShow) {
+      setVisiblePosition();
+    } else {
+      setHiddenPosition();
+    }
+  };
   const load = () => {
     startingPosition = declaration.getBoundingClientRect().left;
     container.style.transition = "none";
@@ -200,49 +196,43 @@ const CreateSocialSharingElement = (props) => (() => {
       container.style.transition = "transform 250ms ease-in-out";
     }, 100);
   };
-  container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);
-  if (includeFacebook) {
-    container.appendChild(CreateFacebook());
-  }
-  if (includeTwitter) {
-    container.appendChild(
-      CreateTwitter({
-        title,
-        url
-      })
-    );
-  }
-  if (includeEmail) {
-    container.appendChild(
-      CreateEmail({
-        title,
-        url
-      })
-    );
-  }
-  if (includePrint) {
-    container.appendChild(CreatePrint());
-  }
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);
-  if (isFixed) {
-    container.setAttribute(ATTRIBUTE_FIXED, "");
-    window.addEventListener(
-      "scroll",
-      performance.debounce(() => eventScroll(), 20)
-    );
-    window.addEventListener(
-      "resize",
-      performance.debounce(() => eventResize(), 20)
-    );
-  }
+  window.addEventListener(
+    "scroll",
+    debounce(() => eventScroll(), 20)
+  );
+  window.addEventListener(
+    "resize",
+    debounce(() => eventResize(), 20)
+  );
   return {
-    element: declaration,
-    events: {
-      load
-    },
-    styles: STYLES_SOCIAL_SHARING_ELEMENT
+    load,
+    onScroll: eventScroll,
+    onResize: eventResize,
+    setHiddenPosition
   };
-})();
-module.exports = CreateSocialSharingElement;
+};
+const CreateSocialSharingElement = (props) => {
+  const { isFixed = false } = props;
+  const containerModel = createContainer(props);
+  const declarationModel = new ElementBuilder().withClassName("social-sharing-declarion").withChild(containerModel).withStyles({
+    element: {
+      container: "umd-element-social-sharing / inline-size"
+    }
+  }).build();
+  const model = {
+    ...declarationModel
+  };
+  if (isFixed) {
+    const { load } = setupFixedBehaviour({
+      container: containerModel.element,
+      declaration: declarationModel.element
+    });
+    model.events = { load };
+  }
+  return model;
+};
+const createCompositeSocialSharing = CreateSocialSharingElement;
+export {
+  createCompositeSocialSharing
+};
 //# sourceMappingURL=sharing.js.map

package/dist/composite/social/sharing.js.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["token","iconFacebook","iconX","iconEmail","iconPrint","debounce"],"mappings":"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"}
+{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n} from '@universityofmaryland/web-icons-library/social';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport type { ElementModel } from '../../_types';\nimport type { SocialSharingProps } from './_types';\n\nconst createFacebookButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withClassName('social-sharing-facebook')\n    .withHTML(iconFacebook)\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '34px',\n          height: '30px',\n        },\n      },\n    })\n    .withAria({ label: 'share this page on facebook' })\n    .withEvents({\n      click: () => {\n        const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n          window.location.toString(),\n        )}`;\n\n        window.open(\n          shareURL,\n          'Facebook',\n          'toolbar=0,status=0,width=626,height=436',\n        );\n      },\n    })\n    .build();\n\n  return model;\n};\n\nconst createTwitterButton = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconX)\n    .withAria({ label: 'share this page on twitter' })\n    .withEvents({\n      click: () => {\n        const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n        window.open(\n          shareURL,\n          'sharer',\n          'toolbar=0,status=0,width=626,height=436',\n        );\n      },\n    })\n    .build();\n\n  return model;\n};\n\nconst createEmailLink = ({\n  url,\n  title,\n}: Pick<\n  SocialSharingProps,\n  'url' | 'title'\n>): ElementModel<HTMLAnchorElement> =>\n  new ElementBuilder<HTMLAnchorElement>('a')\n    .withClassName('social-sharing-email')\n    .withStyles({\n      element: {\n        ['& svg']: {\n          width: '21px',\n          height: '20px',\n        },\n      },\n    })\n    .withHTML(iconEmail)\n    .withAttributes({\n      href: `mailto:?subject=${title}&body=${url}`,\n      target: '_blank',\n    })\n    .withAria({ label: 'email this page' })\n    .build();\n\nconst createPrintButton = (): ElementModel<HTMLButtonElement> => {\n  const model = new ElementBuilder<HTMLButtonElement>('button')\n    .withHTML(iconPrint)\n    .withAria({ label: 'print this page' })\n    .withEvents({\n      click: () => window.print(),\n    })\n    .build();\n\n  return model;\n};\n\nconst createContainer = (\n  props: SocialSharingProps,\n): ElementModel<HTMLElement> => {\n  const {\n    includeFacebook = true,\n    includeTwitter = true,\n    includeEmail = false,\n    includePrint = false,\n    isFixed = false,\n    title: defaultTitle,\n    url: defaultUrl,\n  } = props;\n\n  const title = defaultTitle || document.title;\n  const url = defaultUrl || window.location.toString();\n\n  const container = new ElementBuilder()\n    .withClassName('social-sharing-container')\n    .withStyles({\n      element: {\n        display: 'flex',\n        transition: 'transform 250ms ease-in-out',\n\n        ['& > *']: {\n          height: token.spacing['2xl'],\n          width: token.spacing['2xl'],\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          border: `1px solid ${token.color.gray.light}`,\n          backgroundColor: token.color.white,\n          transition: 'background-color 250ms ease-in-out',\n        },\n\n        ['& > button:hover, & > button:focus, & > a:hover, & > a:focus']: {\n          backgroundColor: token.color.gray.dark,\n\n          ['svg path']: {\n            fill: token.color.white,\n          },\n        },\n\n        ['& > *:not(:last-child)']: {\n          borderRight: 'none',\n        },\n\n        ['& svg']: {\n          display: 'block',\n          transition: 'fill 250ms ease-in-out',\n        },\n\n        ['& svg path']: {\n          fill: token.color.black,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          ['&[fixed]']: {\n            flexDirection: 'column',\n          },\n\n          ['&[fixed] > *:not(:last-child)']: {\n            borderRight: `1px solid ${token.color.gray.light}`,\n            borderBottom: 'none',\n          },\n        },\n      },\n    });\n\n  if (isFixed) {\n    container.withAttribute('fixed', '');\n  }\n\n  if (includeFacebook) {\n    container.withChild(createFacebookButton());\n  }\n\n  if (includeTwitter) {\n    container.withChild(\n      createTwitterButton({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includeEmail) {\n    container.withChild(\n      createEmailLink({\n        title,\n        url,\n      }),\n    );\n  }\n\n  if (includePrint) {\n    container.withChild(createPrintButton());\n  }\n\n  return container.build();\n};\n\nconst setupFixedBehaviour = ({\n  container,\n  declaration,\n}: {\n  container: HTMLElement;\n  declaration: HTMLElement;\n}) => {\n  const defaultStartingPosition = -100;\n\n  const getSpacing = () => {\n    if (window.innerWidth > 768) {\n      return 40;\n    }\n\n    return 8;\n  };\n  let startingPosition: number | null = null;\n  let isShowing = false;\n\n  const setVisiblePosition = () => {\n    if (!isShowing) {\n      container.style.transform = 'translateX(0)';\n      isShowing = true;\n    }\n  };\n\n  const setHiddenPosition = () => {\n    if (isShowing) {\n      isShowing = false;\n\n      if (startingPosition) {\n        const spacing = getSpacing();\n        const translateAmount = window.innerWidth - startingPosition;\n        const position = translateAmount + spacing + container.offsetWidth;\n\n        container.style.transform = `translateX(-${position}px)`;\n      } else {\n        container.style.transform = `translateX(${defaultStartingPosition}vh)`;\n      }\n    }\n  };\n\n  const eventResize = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n  };\n\n  const eventScroll = () => {\n    const windowHeight = window.innerHeight;\n    const pagePosition = window.scrollY;\n    const isNearBottom =\n      pagePosition + windowHeight >=\n      document.body.scrollHeight - windowHeight / 2;\n\n    const shouldShow = !isNearBottom;\n\n    if (shouldShow) {\n      setVisiblePosition();\n    } else {\n      setHiddenPosition();\n    }\n  };\n\n  const load = () => {\n    startingPosition = declaration.getBoundingClientRect().left;\n    container.style.transition = 'none';\n    setHiddenPosition();\n\n    setTimeout(() => {\n      container.style.transition = 'transform 250ms ease-in-out';\n    }, 100);\n  };\n\n  window.addEventListener(\n    'scroll',\n    debounce(() => eventScroll(), 20),\n  );\n\n  window.addEventListener(\n    'resize',\n    debounce(() => eventResize(), 20),\n  );\n\n  return {\n    load,\n    onScroll: eventScroll,\n    onResize: eventResize,\n    setHiddenPosition,\n  };\n};\n\nconst CreateSocialSharingElement = (props: SocialSharingProps) => {\n  const { isFixed = false } = props;\n  const containerModel = createContainer(props);\n\n  const declarationModel = new ElementBuilder()\n    .withClassName('social-sharing-declarion')\n    .withChild(containerModel)\n    .withStyles({\n      element: {\n        container: 'umd-element-social-sharing / inline-size',\n      },\n    })\n    .build();\n\n  const model: ElementModel<HTMLElement> = {\n    ...declarationModel,\n  };\n\n  if (isFixed) {\n    const { load } = setupFixedBehaviour({\n      container: containerModel.element,\n      declaration: declarationModel.element,\n    });\n\n    model.events = { load };\n  }\n\n  return model;\n};\n\nexport const createCompositeSocialSharing = CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}

package/dist/composite/tabs/elements/dom-structure.d.ts

@@ -1,7 +1,6 @@
-declare const _default: {
+export declare const createCompositeTabsDomStructure: {
     ModifyElement: ({ markup, }: {
         markup: Element | HTMLElement | HTMLSlotElement;
     }) => HTMLDivElement;
 };
-export default _default;
 //# sourceMappingURL=dom-structure.d.ts.map

package/dist/composite/tabs/elements/dom-structure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-structure.d.ts","sourceRoot":"","sources":["../../../../source/composite/tabs/elements/dom-structure.ts"],"names":[],"mappings":";iCA4BG;QACD,MAAM,EAAE,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;KACjD;;AA0BD,wBAEE"}
+{"version":3,"file":"dom-structure.d.ts","sourceRoot":"","sources":["../../../../source/composite/tabs/elements/dom-structure.ts"],"names":[],"mappings":"AAwDA,eAAO,MAAM,+BAA+B;iCA5BzC;QACD,MAAM,EAAE,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;KACjD;CA4BA,CAAC"}

package/dist/composite/tabs/elements/dom-structure.js

@@ -1,4 +1,3 @@
-"use strict";
 const ATTRIBUTE_BUTTON_TITLE = "data-title";
 const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
 const ATTRIBUTE_ARIA_CONTROLS = "aria-controls";
@@ -38,8 +37,10 @@ const ModifyTabsDomStrcuture = ({
   });
   return container;
 };
-const DomStrcuture = {
+const createCompositeTabsDomStructure = {
   ModifyElement: ModifyTabsDomStrcuture
 };
-module.exports = DomStrcuture;
+export {
+  createCompositeTabsDomStructure
+};
 //# sourceMappingURL=dom-structure.js.map

package/dist/composite/tabs/elements/dom-structure.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom-structure.js","sources":["../../../../source/composite/tabs/elements/dom-structure.ts"],"sourcesContent":["const ATTRIBUTE_BUTTON_TITLE = 'data-title';\n\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';\n\nconst ELEMENT_TABS_CONTENT_WRAPPER = 'tabs-content-wrapper';\nconst ELEMENT_TABS_BUTTON_WRAPPER = 'tabs-button-wrapper';\n\nconst CreateButtons = ({ tabs }: { tabs: HTMLElement[] }) =>\n  tabs.map((tab, index) => {\n    const title = tab.getAttribute(ATTRIBUTE_BUTTON_TITLE);\n\n    if (!title) return;\n\n    const tabButtonWrapper = document.createElement('div');\n    const tabButton = document.createElement('button');\n\n    tabButton.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n    tabButton.setAttribute(ATTRIBUTE_ARIA_CONTROLS, index.toString());\n    tabButton.innerHTML = title;\n    tabButtonWrapper.classList.add(ELEMENT_TABS_BUTTON_WRAPPER);\n    tabButtonWrapper.appendChild(tabButton);\n\n    return tabButtonWrapper;\n  });\n\nconst ModifyTabsDomStrcuture = ({\n  markup,\n}: {\n  markup: Element | HTMLElement | HTMLSlotElement;\n}) => {\n  const container = document.createElement('div');\n\n  container.innerHTML = markup.innerHTML;\n  container.classList.add(ELEMENT_TABS_CONTENT_WRAPPER);\n\n  const tabs = Array.from(\n    container.querySelectorAll(':scope > *'),\n  ) as HTMLElement[];\n  const buttons = CreateButtons({ tabs });\n\n  tabs.forEach((tab, index) => {\n    const buttonWrapper = buttons[index] as HTMLDivElement;\n    const button = buttonWrapper.querySelector('button');\n    if (buttonWrapper) container.insertBefore(buttonWrapper, tab);\n\n    if (button) {\n      const ref = `${button.innerHTML.replace(/\\s/g, '')}-${index}`;\n      button.setAttribute(ATTRIBUTE_ARIA_CONTROLS, ref);\n      tab.setAttribute('id', ref);\n    }\n  });\n\n  return container;\n};\n\nexport default {\n  ModifyElement: ModifyTabsDomStrcuture,\n};\n"],"names":[],"mappings":";AAAA,MAAM,yBAAyB;AAE/B,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAEhC,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AAEpC,MAAM,gBAAgB,CAAC,EAAE,KAAA,MACvB,KAAK,IAAI,CAAC,KAAK,UAAU;AACvB,QAAM,QAAQ,IAAI,aAAa,sBAAsB;AAErD,MAAI,CAAC,MAAO;AAEZ,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,YAAU,aAAa,yBAAyB,OAAO;AACvD,YAAU,aAAa,yBAAyB,MAAM,SAAA,CAAU;AAChE,YAAU,YAAY;AACtB,mBAAiB,UAAU,IAAI,2BAA2B;AAC1D,mBAAiB,YAAY,SAAS;AAEtC,SAAO;AACT,CAAC;AAEH,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,YAAY,OAAO;AAC7B,YAAU,UAAU,IAAI,4BAA4B;AAEpD,QAAM,OAAO,MAAM;AAAA,IACjB,UAAU,iBAAiB,YAAY;AAAA,EAAA;AAEzC,QAAM,UAAU,cAAc,EAAE,MAAM;AAEtC,OAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,UAAM,gBAAgB,QAAQ,KAAK;AACnC,UAAM,SAAS,cAAc,cAAc,QAAQ;AACnD,QAAI,cAAe,WAAU,aAAa,eAAe,GAAG;AAE5D,QAAI,QAAQ;AACV,YAAM,MAAM,GAAG,OAAO,UAAU,QAAQ,OAAO,EAAE,CAAC,IAAI,KAAK;AAC3D,aAAO,aAAa,yBAAyB,GAAG;AAChD,UAAI,aAAa,MAAM,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe;AAAA,EACb,eAAe;AACjB;;"}
+{"version":3,"file":"dom-structure.js","sources":["../../../../source/composite/tabs/elements/dom-structure.ts"],"sourcesContent":["const ATTRIBUTE_BUTTON_TITLE = 'data-title';\n\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';\n\nconst ELEMENT_TABS_CONTENT_WRAPPER = 'tabs-content-wrapper';\nconst ELEMENT_TABS_BUTTON_WRAPPER = 'tabs-button-wrapper';\n\nconst CreateButtons = ({ tabs }: { tabs: HTMLElement[] }) =>\n  tabs.map((tab, index) => {\n    const title = tab.getAttribute(ATTRIBUTE_BUTTON_TITLE);\n\n    if (!title) return;\n\n    const tabButtonWrapper = document.createElement('div');\n    const tabButton = document.createElement('button');\n\n    tabButton.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n    tabButton.setAttribute(ATTRIBUTE_ARIA_CONTROLS, index.toString());\n    tabButton.innerHTML = title;\n    tabButtonWrapper.classList.add(ELEMENT_TABS_BUTTON_WRAPPER);\n    tabButtonWrapper.appendChild(tabButton);\n\n    return tabButtonWrapper;\n  });\n\nconst ModifyTabsDomStrcuture = ({\n  markup,\n}: {\n  markup: Element | HTMLElement | HTMLSlotElement;\n}) => {\n  const container = document.createElement('div');\n\n  container.innerHTML = markup.innerHTML;\n  container.classList.add(ELEMENT_TABS_CONTENT_WRAPPER);\n\n  const tabs = Array.from(\n    container.querySelectorAll(':scope > *'),\n  ) as HTMLElement[];\n  const buttons = CreateButtons({ tabs });\n\n  tabs.forEach((tab, index) => {\n    const buttonWrapper = buttons[index] as HTMLDivElement;\n    const button = buttonWrapper.querySelector('button');\n    if (buttonWrapper) container.insertBefore(buttonWrapper, tab);\n\n    if (button) {\n      const ref = `${button.innerHTML.replace(/\\s/g, '')}-${index}`;\n      button.setAttribute(ATTRIBUTE_ARIA_CONTROLS, ref);\n      tab.setAttribute('id', ref);\n    }\n  });\n\n  return container;\n};\n\nexport const createCompositeTabsDomStructure = {\n  ModifyElement: ModifyTabsDomStrcuture,\n};\n"],"names":[],"mappings":"AAAA,MAAM,yBAAyB;AAE/B,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAEhC,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AAEpC,MAAM,gBAAgB,CAAC,EAAE,KAAA,MACvB,KAAK,IAAI,CAAC,KAAK,UAAU;AACvB,QAAM,QAAQ,IAAI,aAAa,sBAAsB;AAErD,MAAI,CAAC,MAAO;AAEZ,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,YAAU,aAAa,yBAAyB,OAAO;AACvD,YAAU,aAAa,yBAAyB,MAAM,SAAA,CAAU;AAChE,YAAU,YAAY;AACtB,mBAAiB,UAAU,IAAI,2BAA2B;AAC1D,mBAAiB,YAAY,SAAS;AAEtC,SAAO;AACT,CAAC;AAEH,MAAM,yBAAyB,CAAC;AAAA,EAC9B;AACF,MAEM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,YAAY,OAAO;AAC7B,YAAU,UAAU,IAAI,4BAA4B;AAEpD,QAAM,OAAO,MAAM;AAAA,IACjB,UAAU,iBAAiB,YAAY;AAAA,EAAA;AAEzC,QAAM,UAAU,cAAc,EAAE,MAAM;AAEtC,OAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,UAAM,gBAAgB,QAAQ,KAAK;AACnC,UAAM,SAAS,cAAc,cAAc,QAAQ;AACnD,QAAI,cAAe,WAAU,aAAa,eAAe,GAAG;AAE5D,QAAI,QAAQ;AACV,YAAM,MAAM,GAAG,OAAO,UAAU,QAAQ,OAAO,EAAE,CAAC,IAAI,KAAK;AAC3D,aAAO,aAAa,yBAAyB,GAAG;AAChD,UAAI,aAAa,MAAM,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEO,MAAM,kCAAkC;AAAA,EAC7C,eAAe;AACjB;"}

package/dist/composite/tabs/elements/index.d.ts

@@ -1,9 +1,8 @@
-declare const _default: {
+export declare const createCompositeTabsElements: {
     DomStrcuture: {
         ModifyElement: ({ markup, }: {
             markup: Element | HTMLElement | HTMLSlotElement;
         }) => HTMLDivElement;
     };
 };
-export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/tabs/elements/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/tabs/elements/index.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAEE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/tabs/elements/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B;;;;;;CAEvC,CAAC"}

package/dist/composite/tabs/elements/index.js

@@ -1,7 +1,8 @@
-"use strict";
-const domStructure = require("./dom-structure.js");
-const index = {
-  DomStrcuture: domStructure
+import { createCompositeTabsDomStructure } from "./dom-structure.js";
+const createCompositeTabsElements = {
+  DomStrcuture: createCompositeTabsDomStructure
+};
+export {
+  createCompositeTabsElements
 };
-module.exports = index;
 //# sourceMappingURL=index.js.map

package/dist/composite/tabs/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/tabs/elements/index.ts"],"sourcesContent":["import DomStrcuture from './dom-structure';\n\nexport default {\n  DomStrcuture,\n};\n"],"names":["DomStrcuture"],"mappings":";;AAEA,MAAA,QAAe;AAAA,EAAA,cACbA;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/tabs/elements/index.ts"],"sourcesContent":["import { createCompositeTabsDomStructure as DomStrcuture } from './dom-structure';\n\nexport const createCompositeTabsElements = {\n  DomStrcuture,\n};\n"],"names":["DomStrcuture"],"mappings":";AAEO,MAAM,8BAA8B;AAAA,EAAA,cACzCA;AACF;"}

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

@@ -1,3 +1,3 @@
-export { default as elements } from './elements';
-export { default as standard } from './standard';
+export { createCompositeTabsElements as elements } from './elements';
+export { createCompositeTabsStandard as standard } from './standard';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,2BAA2B,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/composite/tabs/index.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./elements/index.js");
-const standard = require("./standard.js");
-exports.elements = index;
-exports.standard = standard;
+import { createCompositeTabsElements } from "./elements/index.js";
+import { createCompositeTabsStandard } from "./standard.js";
+export {
+  createCompositeTabsElements as elements,
+  createCompositeTabsStandard as standard
+};
 //# sourceMappingURL=index.js.map

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

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