@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

package/dist/layout/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Utility.theme.convertJSSObjectToStyles","typography","token"],"mappings":";;;AAGA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAGhC,MAAM,yBAAyB;AAAA,KAC1B,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxBA,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,SAAS,GAAGC,OAAAA,WAAW,KAAK;AAAA,EAAA;AAE5D,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMbC,OAAAA,MAAM,QAAQ,GAAG;AAAA;AAAA,aAEnBA,OAAAA,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;;"}
+{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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":["jssToCSS","typography","token"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAGhC,MAAM,yBAAyB;AAAA,KAC1B,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxBA,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,SAAS,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE5D,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMbC,iBAAM,QAAQ,GAAG;AAAA;AAAA,aAEnBA,iBAAM,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/image.mjs

@@ -1,5 +1,6 @@
-import { token, typography } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+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";
@@ -9,7 +10,7 @@ const STYLES_IMAGE_CONTAINER = `
     display: inline-block;
   }
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min
   }

package/dist/layout/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../source/layout/image.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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":["Utility.theme.convertJSSObjectToStyles"],"mappings":";;AAGA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,0BAA0B;AAGhC,MAAM,yBAAyB;AAAA,KAC1B,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxBA,yBAAuC;AAAA,EACvC,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;"}
+{"version":3,"file":"image.mjs","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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/model/modifiers/index.d.ts

@@ -17,7 +17,7 @@ declare const CONFIG: {
         };
         animationLine: {
             styleModifiers: (props: StyleModifierProps) => string;
-            elementModifiers: ((element: HTMLElement) => Element | undefined)[];
+            elementModifiers: ((element: HTMLElement) => HTMLElement | HTMLAnchorElement | HTMLButtonElement | undefined)[];
         };
         base: {
             styleModifiers: (props: StyleModifierProps) => string;

package/dist/model/modifiers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/model/modifiers/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EAExB,MAAM,UAAU,CAAC;AAElB,UAAU,WAAW;IACnB,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAGD,QAAA,MAAM,MAAM;;sBAEM,kBAAkB;yBAOf,kBAAkB;+BAKZ,kBAAkB;mCAId,kBAAkB;kCAInB,kBAAkB;;;;oCAOlB,kBAAkB;;;oCAOlB,kBAAkB;yCAK9B,WAAW;;;oCAMC,kBAAkB;;;oCAKlB,kBAAkB;;;oCAKlB,kBAAkB;;;CAI/C,CAAC;AAoEF,QAAA,MAAM,kBAAkB,GACtB,OAAO,kBAAkB,EACzB,QAAQ,aAAa;;;;CActB,CAAC;AA2BF,KAAK,gBAAgB,GAAG,CACtB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,WAAW,KACnB,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE3C,KAAK,oBAAoB,GAAG,gBAAgB,GAAG;KAC5C,CAAC,IAAI,MAAM,OAAO,MAAM,CAAC,QAAQ,GAAG,gBAAgB;CACtD,CAAC;AAcF,eAAO,MAAM,mBAAmB,sBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/model/modifiers/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EAExB,MAAM,UAAU,CAAC;AAElB,UAAU,WAAW;IACnB,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAGD,QAAA,MAAM,MAAM;;sBAEM,kBAAkB;yBAOf,kBAAkB;+BAKZ,kBAAkB;mCAId,kBAAkB;kCAInB,kBAAkB;;;;oCAOlB,kBAAkB;;;oCAOlB,kBAAkB;yCAK9B,WAAW;;;oCAMC,kBAAkB;;;oCAKlB,kBAAkB;;;oCAKlB,kBAAkB;;;CAI/C,CAAC;AAoEF,QAAA,MAAM,kBAAkB,GACtB,OAAO,kBAAkB,EACzB,QAAQ,aAAa;;;;CActB,CAAC;AA2BF,KAAK,gBAAgB,GAAG,CACtB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,WAAW,KACnB,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE3C,KAAK,oBAAoB,GAAG,gBAAgB,GAAG;KAC5C,CAAC,IAAI,MAAM,OAAO,MAAM,CAAC,QAAQ,GAAG,gBAAgB;CACtD,CAAC;AAcF,eAAO,MAAM,mBAAmB,sBAAwB,CAAC"}

package/dist/model/modifiers/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modify = require("../../utilities/markup/modify.js");
-const index = require("../../utilities/theme/index.js");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const webUtilitiesLibrary = require("@universityofmaryland/web-utilities-library");
 const style = require("./style.js");
 const CONFIG = {
   modifiers: {
@@ -31,26 +31,26 @@ const CONFIG = {
   },
   builders: {
     action: {
-      styleModifiers: (props) => index.combineStyles(
+      styleModifiers: (props) => styles.combineStyles(
         ...CONFIG.modifiers.withoutTextColor(props)
       )
     },
     animationLine: {
-      styleModifiers: (props) => index.combineStyles(
+      styleModifiers: (props) => styles.combineStyles(
         ...CONFIG.modifiers.withAnimationLink(props)
       ),
       elementModifiers: [
-        (element) => modify.wrapTextNodeInSpan(element)
+        (element) => webUtilitiesLibrary.wrapTextNodeInSpan(element)
       ]
     },
     base: {
-      styleModifiers: (props) => index.combineStyles(...CONFIG.modifiers.base(props))
+      styleModifiers: (props) => styles.combineStyles(...CONFIG.modifiers.base(props))
     },
     childLink: {
-      styleModifiers: (props) => index.combineStyles(...CONFIG.modifiers.withChildLink(props))
+      styleModifiers: (props) => styles.combineStyles(...CONFIG.modifiers.withChildLink(props))
     },
     default: {
-      styleModifiers: (props) => index.combineStyles(...CONFIG.modifiers.default(props))
+      styleModifiers: (props) => styles.combineStyles(...CONFIG.modifiers.default(props))
     }
   }
 };
@@ -66,9 +66,9 @@ class ElementBuilder {
     if (!className || !element) {
       throw new Error(`element & className is required for Element Builder`);
     }
-    let styles = "";
+    let styles2 = "";
     if (config.styleModifiers) {
-      styles += config.styleModifiers({ className, ...options });
+      styles2 += config.styleModifiers({ className, ...options });
     }
     if (config.elementModifiers) {
       for (const modifier of config.elementModifiers) {
@@ -86,13 +86,13 @@ class ElementBuilder {
     if (children && children.length > 0) {
       children.forEach((child) => {
         element.appendChild(child.element);
-        styles += child.styles;
+        styles2 += child.styles;
       });
     }
     return {
       element,
       className,
-      styles
+      styles: styles2
     };
   }
 }

package/dist/model/modifiers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../source/model/modifiers/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { modifiers } from './style';\nimport {\n  type ElementProps,\n  type BuilderProps,\n  type BuilderConfig,\n  type StyleModifierProps,\n  type ConfigurationProps,\n  type CompositeChild,\n} from './_types';\n\ninterface styleObject {\n  className: string | string[];\n  [key: string]: any;\n}\n\n// Configuration\nconst CONFIG = {\n  modifiers: {\n    base: (props: StyleModifierProps) => [\n      modifiers.baseStyles(props),\n      modifiers.element(props),\n      modifiers.elementBefore(props),\n      modifiers.elementChild(props),\n      modifiers.elementSiblingAfter(props),\n    ],\n    default: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n      modifiers.textColor(props),\n      modifiers.iconColor(props),\n    ],\n    withChildLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.childLink(props),\n    ],\n    withAnimationLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.animationLink(props),\n    ],\n    withoutTextColor: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n    ],\n  },\n\n  builders: {\n    action: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(\n          ...CONFIG.modifiers.withoutTextColor(props),\n        ),\n    },\n\n    animationLine: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(\n          ...CONFIG.modifiers.withAnimationLink(props),\n        ),\n      elementModifiers: [\n        (element: HTMLElement) =>\n          Utility.markup.modify.wrapTextNodeInSpan(element),\n      ],\n    },\n\n    base: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.base(props)),\n    },\n\n    childLink: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.withChildLink(props)),\n    },\n\n    default: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.default(props)),\n    },\n  },\n};\n\n// Model\n\nclass ElementBuilder {\n  private className: string;\n  private element: HTMLElement;\n\n  constructor(className: string, element: HTMLElement) {\n    this.className = className;\n    this.element = element;\n  }\n\n  createElement(\n    props: BuilderProps & {\n      children?: CompositeChild[];\n      attributes?: Record<string, string>[];\n    },\n  ) {\n    const { config, options = {}, children, attributes } = props;\n    const className = this.className;\n    const element = this.element;\n\n    if (!className || !element) {\n      throw new Error(`element & className is required for Element Builder`);\n    }\n\n    let styles = '';\n\n    if (config.styleModifiers) {\n      styles += config.styleModifiers({ className, ...options });\n    }\n\n    if (config.elementModifiers) {\n      for (const modifier of config.elementModifiers) {\n        modifier(element);\n      }\n    }\n\n    element.classList.add(className);\n\n    // Apply attributes if provided\n    if (attributes && attributes.length > 0) {\n      attributes.forEach((attrObject) => {\n        Object.entries(attrObject).forEach(([key, value]) => {\n          element.setAttribute(key, value);\n        });\n      });\n    }\n\n    // Process children if provided\n    if (children && children.length > 0) {\n      children.forEach((child) => {\n        element.appendChild(child.element);\n        styles += child.styles;\n      });\n    }\n\n    return {\n      element,\n      className,\n      styles,\n    };\n  }\n}\n\n// Helper Functions\n\nconst createElementBuild = (\n  props: ConfigurationProps,\n  config: BuilderConfig,\n) => {\n  const { element, className, elementStyles, children, attributes, ...rest } =\n    props;\n\n  return new ElementBuilder(className, element).createElement({\n    config,\n    options: {\n      ...elementStyles,\n      ...rest,\n    },\n    children,\n    attributes,\n  });\n};\n\nconst createElementWithConfig = (\n  props: ElementProps,\n  stylesObj: styleObject,\n  builderType: keyof typeof CONFIG.builders,\n) => {\n  const { className, ...baseStyles } = stylesObj;\n  const config = CONFIG.builders[builderType];\n\n  if (Array.isArray(className)) {\n    return createElementBuild(\n      { ...props, className: className[0], baseStyles },\n      config,\n    );\n  }\n\n  return createElementBuild({ ...props, className, baseStyles }, config);\n};\n\nconst createElementFactory = (builderType: keyof typeof CONFIG.builders) => {\n  return (props: ElementProps, stylesObj: styleObject) =>\n    createElementWithConfig(props, stylesObj, builderType);\n};\n\n// Create Elements\n\ntype ElementFactoryFn = (\n  props: ElementProps,\n  stylesObj: styleObject,\n) => ReturnType<typeof createElementBuild>;\n\ntype StyledElementCreator = ElementFactoryFn & {\n  [K in keyof typeof CONFIG.builders]: ElementFactoryFn;\n};\n\nconst createStyledElementFn = createElementFactory(\n  'default',\n) as StyledElementCreator;\n\n(Object.keys(CONFIG.builders) as Array<keyof typeof CONFIG.builders>).forEach(\n  (key) => {\n    createStyledElementFn[key] = createElementFactory(key);\n  },\n);\n\ncreateStyledElementFn.default = createStyledElementFn;\n\nexport const createStyledElement = createStyledElementFn;\n"],"names":["modifiers","Utility.theme.combineStyles","Utility.markup.modify.wrapTextNodeInSpan"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../source/model/modifiers/index.ts"],"sourcesContent":["import { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library';\nimport { modifiers } from './style';\nimport {\n  type ElementProps,\n  type BuilderProps,\n  type BuilderConfig,\n  type StyleModifierProps,\n  type ConfigurationProps,\n  type CompositeChild,\n} from './_types';\n\ninterface styleObject {\n  className: string | string[];\n  [key: string]: any;\n}\n\n// Configuration\nconst CONFIG = {\n  modifiers: {\n    base: (props: StyleModifierProps) => [\n      modifiers.baseStyles(props),\n      modifiers.element(props),\n      modifiers.elementBefore(props),\n      modifiers.elementChild(props),\n      modifiers.elementSiblingAfter(props),\n    ],\n    default: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n      modifiers.textColor(props),\n      modifiers.iconColor(props),\n    ],\n    withChildLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.childLink(props),\n    ],\n    withAnimationLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.animationLink(props),\n    ],\n    withoutTextColor: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n    ],\n  },\n\n  builders: {\n    action: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(\n          ...CONFIG.modifiers.withoutTextColor(props),\n        ),\n    },\n\n    animationLine: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(\n          ...CONFIG.modifiers.withAnimationLink(props),\n        ),\n      elementModifiers: [\n        (element: HTMLElement) =>\n          wrapTextNodeInSpan(element),\n      ],\n    },\n\n    base: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.base(props)),\n    },\n\n    childLink: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.withChildLink(props)),\n    },\n\n    default: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.default(props)),\n    },\n  },\n};\n\n// Model\n\nclass ElementBuilder {\n  private className: string;\n  private element: HTMLElement;\n\n  constructor(className: string, element: HTMLElement) {\n    this.className = className;\n    this.element = element;\n  }\n\n  createElement(\n    props: BuilderProps & {\n      children?: CompositeChild[];\n      attributes?: Record<string, string>[];\n    },\n  ) {\n    const { config, options = {}, children, attributes } = props;\n    const className = this.className;\n    const element = this.element;\n\n    if (!className || !element) {\n      throw new Error(`element & className is required for Element Builder`);\n    }\n\n    let styles = '';\n\n    if (config.styleModifiers) {\n      styles += config.styleModifiers({ className, ...options });\n    }\n\n    if (config.elementModifiers) {\n      for (const modifier of config.elementModifiers) {\n        modifier(element);\n      }\n    }\n\n    element.classList.add(className);\n\n    // Apply attributes if provided\n    if (attributes && attributes.length > 0) {\n      attributes.forEach((attrObject) => {\n        Object.entries(attrObject).forEach(([key, value]) => {\n          element.setAttribute(key, value);\n        });\n      });\n    }\n\n    // Process children if provided\n    if (children && children.length > 0) {\n      children.forEach((child) => {\n        element.appendChild(child.element);\n        styles += child.styles;\n      });\n    }\n\n    return {\n      element,\n      className,\n      styles,\n    };\n  }\n}\n\n// Helper Functions\n\nconst createElementBuild = (\n  props: ConfigurationProps,\n  config: BuilderConfig,\n) => {\n  const { element, className, elementStyles, children, attributes, ...rest } =\n    props;\n\n  return new ElementBuilder(className, element).createElement({\n    config,\n    options: {\n      ...elementStyles,\n      ...rest,\n    },\n    children,\n    attributes,\n  });\n};\n\nconst createElementWithConfig = (\n  props: ElementProps,\n  stylesObj: styleObject,\n  builderType: keyof typeof CONFIG.builders,\n) => {\n  const { className, ...baseStyles } = stylesObj;\n  const config = CONFIG.builders[builderType];\n\n  if (Array.isArray(className)) {\n    return createElementBuild(\n      { ...props, className: className[0], baseStyles },\n      config,\n    );\n  }\n\n  return createElementBuild({ ...props, className, baseStyles }, config);\n};\n\nconst createElementFactory = (builderType: keyof typeof CONFIG.builders) => {\n  return (props: ElementProps, stylesObj: styleObject) =>\n    createElementWithConfig(props, stylesObj, builderType);\n};\n\n// Create Elements\n\ntype ElementFactoryFn = (\n  props: ElementProps,\n  stylesObj: styleObject,\n) => ReturnType<typeof createElementBuild>;\n\ntype StyledElementCreator = ElementFactoryFn & {\n  [K in keyof typeof CONFIG.builders]: ElementFactoryFn;\n};\n\nconst createStyledElementFn = createElementFactory(\n  'default',\n) as StyledElementCreator;\n\n(Object.keys(CONFIG.builders) as Array<keyof typeof CONFIG.builders>).forEach(\n  (key) => {\n    createStyledElementFn[key] = createElementFactory(key);\n  },\n);\n\ncreateStyledElementFn.default = createStyledElementFn;\n\nexport const createStyledElement = createStyledElementFn;\n"],"names":["modifiers","combineStyles","wrapTextNodeInSpan","styles"],"mappings":"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"}

package/dist/model/modifiers/index.mjs

@@ -1,5 +1,5 @@
-import { wrapTextNodeInSpan } from "../../utilities/markup/modify.mjs";
-import { combineStyles } from "../../utilities/theme/index.mjs";
+import { combineStyles } from "@universityofmaryland/web-utilities-library/styles";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library";
 import { modifiers } from "./style.mjs";
 const CONFIG = {
   modifiers: {

package/dist/model/modifiers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../source/model/modifiers/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\nimport { modifiers } from './style';\nimport {\n  type ElementProps,\n  type BuilderProps,\n  type BuilderConfig,\n  type StyleModifierProps,\n  type ConfigurationProps,\n  type CompositeChild,\n} from './_types';\n\ninterface styleObject {\n  className: string | string[];\n  [key: string]: any;\n}\n\n// Configuration\nconst CONFIG = {\n  modifiers: {\n    base: (props: StyleModifierProps) => [\n      modifiers.baseStyles(props),\n      modifiers.element(props),\n      modifiers.elementBefore(props),\n      modifiers.elementChild(props),\n      modifiers.elementSiblingAfter(props),\n    ],\n    default: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n      modifiers.textColor(props),\n      modifiers.iconColor(props),\n    ],\n    withChildLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.childLink(props),\n    ],\n    withAnimationLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.animationLink(props),\n    ],\n    withoutTextColor: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n    ],\n  },\n\n  builders: {\n    action: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(\n          ...CONFIG.modifiers.withoutTextColor(props),\n        ),\n    },\n\n    animationLine: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(\n          ...CONFIG.modifiers.withAnimationLink(props),\n        ),\n      elementModifiers: [\n        (element: HTMLElement) =>\n          Utility.markup.modify.wrapTextNodeInSpan(element),\n      ],\n    },\n\n    base: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.base(props)),\n    },\n\n    childLink: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.withChildLink(props)),\n    },\n\n    default: {\n      styleModifiers: (props: StyleModifierProps) =>\n        Utility.theme.combineStyles(...CONFIG.modifiers.default(props)),\n    },\n  },\n};\n\n// Model\n\nclass ElementBuilder {\n  private className: string;\n  private element: HTMLElement;\n\n  constructor(className: string, element: HTMLElement) {\n    this.className = className;\n    this.element = element;\n  }\n\n  createElement(\n    props: BuilderProps & {\n      children?: CompositeChild[];\n      attributes?: Record<string, string>[];\n    },\n  ) {\n    const { config, options = {}, children, attributes } = props;\n    const className = this.className;\n    const element = this.element;\n\n    if (!className || !element) {\n      throw new Error(`element & className is required for Element Builder`);\n    }\n\n    let styles = '';\n\n    if (config.styleModifiers) {\n      styles += config.styleModifiers({ className, ...options });\n    }\n\n    if (config.elementModifiers) {\n      for (const modifier of config.elementModifiers) {\n        modifier(element);\n      }\n    }\n\n    element.classList.add(className);\n\n    // Apply attributes if provided\n    if (attributes && attributes.length > 0) {\n      attributes.forEach((attrObject) => {\n        Object.entries(attrObject).forEach(([key, value]) => {\n          element.setAttribute(key, value);\n        });\n      });\n    }\n\n    // Process children if provided\n    if (children && children.length > 0) {\n      children.forEach((child) => {\n        element.appendChild(child.element);\n        styles += child.styles;\n      });\n    }\n\n    return {\n      element,\n      className,\n      styles,\n    };\n  }\n}\n\n// Helper Functions\n\nconst createElementBuild = (\n  props: ConfigurationProps,\n  config: BuilderConfig,\n) => {\n  const { element, className, elementStyles, children, attributes, ...rest } =\n    props;\n\n  return new ElementBuilder(className, element).createElement({\n    config,\n    options: {\n      ...elementStyles,\n      ...rest,\n    },\n    children,\n    attributes,\n  });\n};\n\nconst createElementWithConfig = (\n  props: ElementProps,\n  stylesObj: styleObject,\n  builderType: keyof typeof CONFIG.builders,\n) => {\n  const { className, ...baseStyles } = stylesObj;\n  const config = CONFIG.builders[builderType];\n\n  if (Array.isArray(className)) {\n    return createElementBuild(\n      { ...props, className: className[0], baseStyles },\n      config,\n    );\n  }\n\n  return createElementBuild({ ...props, className, baseStyles }, config);\n};\n\nconst createElementFactory = (builderType: keyof typeof CONFIG.builders) => {\n  return (props: ElementProps, stylesObj: styleObject) =>\n    createElementWithConfig(props, stylesObj, builderType);\n};\n\n// Create Elements\n\ntype ElementFactoryFn = (\n  props: ElementProps,\n  stylesObj: styleObject,\n) => ReturnType<typeof createElementBuild>;\n\ntype StyledElementCreator = ElementFactoryFn & {\n  [K in keyof typeof CONFIG.builders]: ElementFactoryFn;\n};\n\nconst createStyledElementFn = createElementFactory(\n  'default',\n) as StyledElementCreator;\n\n(Object.keys(CONFIG.builders) as Array<keyof typeof CONFIG.builders>).forEach(\n  (key) => {\n    createStyledElementFn[key] = createElementFactory(key);\n  },\n);\n\ncreateStyledElementFn.default = createStyledElementFn;\n\nexport const createStyledElement = createStyledElementFn;\n"],"names":["Utility.theme.combineStyles","Utility.markup.modify.wrapTextNodeInSpan"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../source/model/modifiers/index.ts"],"sourcesContent":["import { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library';\nimport { modifiers } from './style';\nimport {\n  type ElementProps,\n  type BuilderProps,\n  type BuilderConfig,\n  type StyleModifierProps,\n  type ConfigurationProps,\n  type CompositeChild,\n} from './_types';\n\ninterface styleObject {\n  className: string | string[];\n  [key: string]: any;\n}\n\n// Configuration\nconst CONFIG = {\n  modifiers: {\n    base: (props: StyleModifierProps) => [\n      modifiers.baseStyles(props),\n      modifiers.element(props),\n      modifiers.elementBefore(props),\n      modifiers.elementChild(props),\n      modifiers.elementSiblingAfter(props),\n    ],\n    default: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n      modifiers.textColor(props),\n      modifiers.iconColor(props),\n    ],\n    withChildLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.childLink(props),\n    ],\n    withAnimationLink: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.default(props),\n      modifiers.animationLink(props),\n    ],\n    withoutTextColor: (props: StyleModifierProps) => [\n      ...CONFIG.modifiers.base(props),\n    ],\n  },\n\n  builders: {\n    action: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(\n          ...CONFIG.modifiers.withoutTextColor(props),\n        ),\n    },\n\n    animationLine: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(\n          ...CONFIG.modifiers.withAnimationLink(props),\n        ),\n      elementModifiers: [\n        (element: HTMLElement) =>\n          wrapTextNodeInSpan(element),\n      ],\n    },\n\n    base: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.base(props)),\n    },\n\n    childLink: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.withChildLink(props)),\n    },\n\n    default: {\n      styleModifiers: (props: StyleModifierProps) =>\n        combineStyles(...CONFIG.modifiers.default(props)),\n    },\n  },\n};\n\n// Model\n\nclass ElementBuilder {\n  private className: string;\n  private element: HTMLElement;\n\n  constructor(className: string, element: HTMLElement) {\n    this.className = className;\n    this.element = element;\n  }\n\n  createElement(\n    props: BuilderProps & {\n      children?: CompositeChild[];\n      attributes?: Record<string, string>[];\n    },\n  ) {\n    const { config, options = {}, children, attributes } = props;\n    const className = this.className;\n    const element = this.element;\n\n    if (!className || !element) {\n      throw new Error(`element & className is required for Element Builder`);\n    }\n\n    let styles = '';\n\n    if (config.styleModifiers) {\n      styles += config.styleModifiers({ className, ...options });\n    }\n\n    if (config.elementModifiers) {\n      for (const modifier of config.elementModifiers) {\n        modifier(element);\n      }\n    }\n\n    element.classList.add(className);\n\n    // Apply attributes if provided\n    if (attributes && attributes.length > 0) {\n      attributes.forEach((attrObject) => {\n        Object.entries(attrObject).forEach(([key, value]) => {\n          element.setAttribute(key, value);\n        });\n      });\n    }\n\n    // Process children if provided\n    if (children && children.length > 0) {\n      children.forEach((child) => {\n        element.appendChild(child.element);\n        styles += child.styles;\n      });\n    }\n\n    return {\n      element,\n      className,\n      styles,\n    };\n  }\n}\n\n// Helper Functions\n\nconst createElementBuild = (\n  props: ConfigurationProps,\n  config: BuilderConfig,\n) => {\n  const { element, className, elementStyles, children, attributes, ...rest } =\n    props;\n\n  return new ElementBuilder(className, element).createElement({\n    config,\n    options: {\n      ...elementStyles,\n      ...rest,\n    },\n    children,\n    attributes,\n  });\n};\n\nconst createElementWithConfig = (\n  props: ElementProps,\n  stylesObj: styleObject,\n  builderType: keyof typeof CONFIG.builders,\n) => {\n  const { className, ...baseStyles } = stylesObj;\n  const config = CONFIG.builders[builderType];\n\n  if (Array.isArray(className)) {\n    return createElementBuild(\n      { ...props, className: className[0], baseStyles },\n      config,\n    );\n  }\n\n  return createElementBuild({ ...props, className, baseStyles }, config);\n};\n\nconst createElementFactory = (builderType: keyof typeof CONFIG.builders) => {\n  return (props: ElementProps, stylesObj: styleObject) =>\n    createElementWithConfig(props, stylesObj, builderType);\n};\n\n// Create Elements\n\ntype ElementFactoryFn = (\n  props: ElementProps,\n  stylesObj: styleObject,\n) => ReturnType<typeof createElementBuild>;\n\ntype StyledElementCreator = ElementFactoryFn & {\n  [K in keyof typeof CONFIG.builders]: ElementFactoryFn;\n};\n\nconst createStyledElementFn = createElementFactory(\n  'default',\n) as StyledElementCreator;\n\n(Object.keys(CONFIG.builders) as Array<keyof typeof CONFIG.builders>).forEach(\n  (key) => {\n    createStyledElementFn[key] = createElementFactory(key);\n  },\n);\n\ncreateStyledElementFn.default = createStyledElementFn;\n\nexport const createStyledElement = createStyledElementFn;\n"],"names":[],"mappings":"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"}

package/dist/model/modifiers/style.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../utilities/theme/index.js");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -68,14 +68,14 @@ const createSelector = (className, type) => {
   };
   return selectors[type];
 };
-const createStyles = (selector, styles) => {
-  if (styles === null) return "";
-  return index.convertJSSObjectToStyles({
-    styleObj: { [selector]: styles }
+const createStyles = (selector, styles$1) => {
+  if (styles$1 === null) return "";
+  return styles.jssToCSS({
+    styleObj: { [selector]: styles$1 }
   });
 };
-const createStyleGenerator = (type) => (className, styles) => {
-  return createStyles(createSelector(className, type), styles);
+const createStyleGenerator = (type) => (className, styles2) => {
+  return createStyles(createSelector(className, type), styles2);
 };
 const createModifier = (type, styleGetter) => {
   const generateStyles = createStyleGenerator(type);

package/dist/model/modifiers/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../source/model/modifiers/style.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { StyleModifierProps } from './_types';\n\nexport enum StyleType {\n  Element = 'element',\n  Child = 'child',\n  SiblingAfter = 'sibling-after',\n  PseudoBefore = 'pseudo-before',\n}\n\nconst textColors = {\n  white: { color: 'white' },\n} as const;\n\nconst iconColors = {\n  white: { fill: 'white' },\n} as const;\n\nconst getTextColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return textColors.white;\n  if (isThemeDark) return textColors.white;\n  return null;\n};\n\nconst getIconColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return iconColors.white;\n  if (isThemeDark) return iconColors.white;\n  return null;\n};\n\nconst getLinkAnimationColor = ({\n  isThemeDark,\n  isAnimationLineRed,\n}: {\n  isThemeDark?: boolean;\n  isAnimationLineRed?: boolean;\n}) => {\n  if (isAnimationLineRed) return Styles.animation.line.slideUnderRed;\n  if (isThemeDark) return Styles.animation.line.slideUnderWhite;\n\n  return Styles.animation.line.slideUnderBlack;\n};\n\nconst getLinkColor = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  if (isThemeDark) return Styles.element.text.link.white;\n\n  return Styles.element.text.link.red;\n};\n\nconst createSelector = (className: string, type: StyleType) => {\n  const selectors = {\n    [StyleType.Element]: `.${className}`,\n    [StyleType.Child]: `.${className} *`,\n    [StyleType.PseudoBefore]: `.${className}:before`,\n    [StyleType.SiblingAfter]: `.${className} + *`,\n  };\n  return selectors[type];\n};\n\nconst createStyles = (selector: string, styles: Record<string, any> | null) => {\n  if (styles === null) return '';\n\n  return Utility.theme.convertJSSObjectToStyles({\n    styleObj: { [selector]: styles },\n  });\n};\n\nconst createStyleGenerator =\n  (type: StyleType) =>\n  (className: string, styles: Record<string, any> | null) => {\n    return createStyles(createSelector(className, type), styles);\n  };\n\nconst createModifier = (\n  type: StyleType,\n  styleGetter: (props: StyleModifierProps) => Record<string, any> | null,\n) => {\n  const generateStyles = createStyleGenerator(type);\n\n  return (props: StyleModifierProps) =>\n    generateStyles(props.className, styleGetter(props));\n};\n\nconst styleGetters = {\n  animationLink: ({ isThemeDark, isAnimationLineRed }: StyleModifierProps) => ({\n    a: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n    [`&a`]: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n  }),\n  baseStyles: ({ baseStyles }: StyleModifierProps) => baseStyles || {},\n  child: ({ subElement }: StyleModifierProps) => subElement || {},\n  childLink: ({ isThemeDark }: StyleModifierProps) =>\n    getLinkColor({ isThemeDark }),\n  element: ({ element }: StyleModifierProps) => element || {},\n  iconColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    svg: getIconColor(isTextColorWhite, isThemeDark),\n    path: getIconColor(isTextColorWhite, isThemeDark),\n  }),\n  pseudoBefore: ({ pseudoBefore }: StyleModifierProps) => pseudoBefore || {},\n  sibling: ({ siblingAfter }: StyleModifierProps) => siblingAfter || {},\n  textColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    ['&']: getTextColor(isTextColorWhite, isThemeDark),\n    ['& *']: getTextColor(isTextColorWhite, isThemeDark),\n  }),\n};\n\nexport const modifiers = {\n  animationLink: createModifier(StyleType.Element, styleGetters.animationLink),\n  baseStyles: createModifier(StyleType.Element, styleGetters.baseStyles),\n  childLink: createModifier(StyleType.Element, styleGetters.childLink),\n  element: createModifier(StyleType.Element, styleGetters.element),\n  elementBefore: createModifier(\n    StyleType.PseudoBefore,\n    styleGetters.pseudoBefore,\n  ),\n  elementSiblingAfter: createModifier(\n    StyleType.SiblingAfter,\n    styleGetters.sibling,\n  ),\n  elementChild: createModifier(StyleType.Child, styleGetters.child),\n  iconColor: createModifier(StyleType.Child, styleGetters.iconColor),\n  textColor: createModifier(StyleType.Element, styleGetters.textColor),\n};\n"],"names":["Styles","Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../source/model/modifiers/style.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { StyleModifierProps } from './_types';\n\nexport enum StyleType {\n  Element = 'element',\n  Child = 'child',\n  SiblingAfter = 'sibling-after',\n  PseudoBefore = 'pseudo-before',\n}\n\nconst textColors = {\n  white: { color: 'white' },\n} as const;\n\nconst iconColors = {\n  white: { fill: 'white' },\n} as const;\n\nconst getTextColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return textColors.white;\n  if (isThemeDark) return textColors.white;\n  return null;\n};\n\nconst getIconColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return iconColors.white;\n  if (isThemeDark) return iconColors.white;\n  return null;\n};\n\nconst getLinkAnimationColor = ({\n  isThemeDark,\n  isAnimationLineRed,\n}: {\n  isThemeDark?: boolean;\n  isAnimationLineRed?: boolean;\n}) => {\n  if (isAnimationLineRed) return Styles.animation.line.slideUnderRed;\n  if (isThemeDark) return Styles.animation.line.slideUnderWhite;\n\n  return Styles.animation.line.slideUnderBlack;\n};\n\nconst getLinkColor = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  if (isThemeDark) return Styles.element.text.link.white;\n\n  return Styles.element.text.link.red;\n};\n\nconst createSelector = (className: string, type: StyleType) => {\n  const selectors = {\n    [StyleType.Element]: `.${className}`,\n    [StyleType.Child]: `.${className} *`,\n    [StyleType.PseudoBefore]: `.${className}:before`,\n    [StyleType.SiblingAfter]: `.${className} + *`,\n  };\n  return selectors[type];\n};\n\nconst createStyles = (selector: string, styles: Record<string, any> | null) => {\n  if (styles === null) return '';\n\n  return jssToCSS({\n    styleObj: { [selector]: styles },\n  });\n};\n\nconst createStyleGenerator =\n  (type: StyleType) =>\n  (className: string, styles: Record<string, any> | null) => {\n    return createStyles(createSelector(className, type), styles);\n  };\n\nconst createModifier = (\n  type: StyleType,\n  styleGetter: (props: StyleModifierProps) => Record<string, any> | null,\n) => {\n  const generateStyles = createStyleGenerator(type);\n\n  return (props: StyleModifierProps) =>\n    generateStyles(props.className, styleGetter(props));\n};\n\nconst styleGetters = {\n  animationLink: ({ isThemeDark, isAnimationLineRed }: StyleModifierProps) => ({\n    a: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n    [`&a`]: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n  }),\n  baseStyles: ({ baseStyles }: StyleModifierProps) => baseStyles || {},\n  child: ({ subElement }: StyleModifierProps) => subElement || {},\n  childLink: ({ isThemeDark }: StyleModifierProps) =>\n    getLinkColor({ isThemeDark }),\n  element: ({ element }: StyleModifierProps) => element || {},\n  iconColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    svg: getIconColor(isTextColorWhite, isThemeDark),\n    path: getIconColor(isTextColorWhite, isThemeDark),\n  }),\n  pseudoBefore: ({ pseudoBefore }: StyleModifierProps) => pseudoBefore || {},\n  sibling: ({ siblingAfter }: StyleModifierProps) => siblingAfter || {},\n  textColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    ['&']: getTextColor(isTextColorWhite, isThemeDark),\n    ['& *']: getTextColor(isTextColorWhite, isThemeDark),\n  }),\n};\n\nexport const modifiers = {\n  animationLink: createModifier(StyleType.Element, styleGetters.animationLink),\n  baseStyles: createModifier(StyleType.Element, styleGetters.baseStyles),\n  childLink: createModifier(StyleType.Element, styleGetters.childLink),\n  element: createModifier(StyleType.Element, styleGetters.element),\n  elementBefore: createModifier(\n    StyleType.PseudoBefore,\n    styleGetters.pseudoBefore,\n  ),\n  elementSiblingAfter: createModifier(\n    StyleType.SiblingAfter,\n    styleGetters.sibling,\n  ),\n  elementChild: createModifier(StyleType.Child, styleGetters.child),\n  iconColor: createModifier(StyleType.Child, styleGetters.iconColor),\n  textColor: createModifier(StyleType.Element, styleGetters.textColor),\n};\n"],"names":["Styles","styles","jssToCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,aAAa;AAAA,EACjB,OAAO,EAAE,OAAO,QAAA;AAClB;AAEA,MAAM,aAAa;AAAA,EACjB,OAAO,EAAE,MAAM,QAAA;AACjB;AAEA,MAAM,eAAe,CAAC,kBAA4B,gBAA0B;AAC1E,MAAI,yBAAyB,WAAW;AACxC,MAAI,oBAAoB,WAAW;AACnC,SAAO;AACT;AAEA,MAAM,eAAe,CAAC,kBAA4B,gBAA0B;AAC1E,MAAI,yBAAyB,WAAW;AACxC,MAAI,oBAAoB,WAAW;AACnC,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AACF,MAGM;AACJ,MAAI,mBAAoB,QAAOA,kBAAO,UAAU,KAAK;AACrD,MAAI,YAAa,QAAOA,kBAAO,UAAU,KAAK;AAE9C,SAAOA,kBAAO,UAAU,KAAK;AAC/B;AAEA,MAAM,eAAe,CAAC,EAAE,kBAA6C;AACnE,MAAI,YAAa,QAAOA,kBAAO,QAAQ,KAAK,KAAK;AAEjD,SAAOA,kBAAO,QAAQ,KAAK,KAAK;AAClC;AAEA,MAAM,iBAAiB,CAAC,WAAmB,SAAoB;AAC7D,QAAM,YAAY;AAAA,IAChB;AAAA,MAAC;AAAA;AAAA,IAAA,GAAoB,IAAI,SAAS;AAAA,IAClC;AAAA,MAAC;AAAA;AAAA,IAAA,GAAkB,IAAI,SAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,IAAA,GAAyB,IAAI,SAAS;AAAA,IACvC;AAAA,MAAC;AAAA;AAAA,IAAA,GAAyB,IAAI,SAAS;AAAA,EAAA;AAEzC,SAAO,UAAU,IAAI;AACvB;AAEA,MAAM,eAAe,CAAC,UAAkBC,aAAuC;AAC7E,MAAIA,aAAW,KAAM,QAAO;AAE5B,SAAOC,gBAAS;AAAA,IACd,UAAU,EAAE,CAAC,QAAQ,GAAGD,SAAA;AAAA,EAAO,CAChC;AACH;AAEA,MAAM,uBACJ,CAAC,SACD,CAAC,WAAmBA,YAAuC;AACzD,SAAO,aAAa,eAAe,WAAW,IAAI,GAAGA,OAAM;AAC7D;AAEF,MAAM,iBAAiB,CACrB,MACA,gBACG;AACH,QAAM,iBAAiB,qBAAqB,IAAI;AAEhD,SAAO,CAAC,UACN,eAAe,MAAM,WAAW,YAAY,KAAK,CAAC;AACtD;AAEA,MAAM,eAAe;AAAA,EACnB,eAAe,CAAC,EAAE,aAAa,0BAA8C;AAAA,IAC3E,GAAG,sBAAsB,EAAE,aAAa,oBAAoB;AAAA,IAC5D,CAAC,IAAI,GAAG,sBAAsB,EAAE,aAAa,oBAAoB;AAAA,EAAA;AAAA,EAEnE,YAAY,CAAC,EAAE,WAAA,MAAqC,cAAc,CAAA;AAAA,EAClE,OAAO,CAAC,EAAE,WAAA,MAAqC,cAAc,CAAA;AAAA,EAC7D,WAAW,CAAC,EAAE,YAAA,MACZ,aAAa,EAAE,aAAa;AAAA,EAC9B,SAAS,CAAC,EAAE,QAAA,MAAkC,WAAW,CAAA;AAAA,EACzD,WAAW,CAAC,EAAE,kBAAkB,mBAAuC;AAAA,IACrE,KAAK,aAAa,kBAAkB,WAAW;AAAA,IAC/C,MAAM,aAAa,kBAAkB,WAAW;AAAA,EAAA;AAAA,EAElD,cAAc,CAAC,EAAE,aAAA,MAAuC,gBAAgB,CAAA;AAAA,EACxE,SAAS,CAAC,EAAE,aAAA,MAAuC,gBAAgB,CAAA;AAAA,EACnE,WAAW,CAAC,EAAE,kBAAkB,mBAAuC;AAAA,IACrE,CAAC,GAAG,GAAG,aAAa,kBAAkB,WAAW;AAAA,IACjD,CAAC,KAAK,GAAG,aAAa,kBAAkB,WAAW;AAAA,EAAA;AAEvD;AAEO,MAAM,YAAY;AAAA,EACvB,eAAe,eAAe,WAAmB,aAAa,aAAa;AAAA,EAC3E,YAAY,eAAe,WAAmB,aAAa,UAAU;AAAA,EACrE,WAAW,eAAe,WAAmB,aAAa,SAAS;AAAA,EACnE,SAAS,eAAe,WAAmB,aAAa,OAAO;AAAA,EAC/D,eAAe;AAAA,IACb;AAAA,IACA,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,EAAA;AAAA,EAEf,cAAc,eAAe,SAAiB,aAAa,KAAK;AAAA,EAChE,WAAW,eAAe,SAAiB,aAAa,SAAS;AAAA,EACjE,WAAW,eAAe,WAAmB,aAAa,SAAS;AACrE;;"}

package/dist/model/modifiers/style.mjs

@@ -1,5 +1,5 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../utilities/theme/index.mjs";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const textColors = {
   white: { color: "white" }
 };
@@ -51,7 +51,7 @@ const createSelector = (className, type) => {
 };
 const createStyles = (selector, styles) => {
   if (styles === null) return "";
-  return convertJSSObjectToStyles({
+  return jssToCSS({
     styleObj: { [selector]: styles }
   });
 };

package/dist/model/modifiers/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../source/model/modifiers/style.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { StyleModifierProps } from './_types';\n\nexport enum StyleType {\n  Element = 'element',\n  Child = 'child',\n  SiblingAfter = 'sibling-after',\n  PseudoBefore = 'pseudo-before',\n}\n\nconst textColors = {\n  white: { color: 'white' },\n} as const;\n\nconst iconColors = {\n  white: { fill: 'white' },\n} as const;\n\nconst getTextColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return textColors.white;\n  if (isThemeDark) return textColors.white;\n  return null;\n};\n\nconst getIconColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return iconColors.white;\n  if (isThemeDark) return iconColors.white;\n  return null;\n};\n\nconst getLinkAnimationColor = ({\n  isThemeDark,\n  isAnimationLineRed,\n}: {\n  isThemeDark?: boolean;\n  isAnimationLineRed?: boolean;\n}) => {\n  if (isAnimationLineRed) return Styles.animation.line.slideUnderRed;\n  if (isThemeDark) return Styles.animation.line.slideUnderWhite;\n\n  return Styles.animation.line.slideUnderBlack;\n};\n\nconst getLinkColor = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  if (isThemeDark) return Styles.element.text.link.white;\n\n  return Styles.element.text.link.red;\n};\n\nconst createSelector = (className: string, type: StyleType) => {\n  const selectors = {\n    [StyleType.Element]: `.${className}`,\n    [StyleType.Child]: `.${className} *`,\n    [StyleType.PseudoBefore]: `.${className}:before`,\n    [StyleType.SiblingAfter]: `.${className} + *`,\n  };\n  return selectors[type];\n};\n\nconst createStyles = (selector: string, styles: Record<string, any> | null) => {\n  if (styles === null) return '';\n\n  return Utility.theme.convertJSSObjectToStyles({\n    styleObj: { [selector]: styles },\n  });\n};\n\nconst createStyleGenerator =\n  (type: StyleType) =>\n  (className: string, styles: Record<string, any> | null) => {\n    return createStyles(createSelector(className, type), styles);\n  };\n\nconst createModifier = (\n  type: StyleType,\n  styleGetter: (props: StyleModifierProps) => Record<string, any> | null,\n) => {\n  const generateStyles = createStyleGenerator(type);\n\n  return (props: StyleModifierProps) =>\n    generateStyles(props.className, styleGetter(props));\n};\n\nconst styleGetters = {\n  animationLink: ({ isThemeDark, isAnimationLineRed }: StyleModifierProps) => ({\n    a: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n    [`&a`]: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n  }),\n  baseStyles: ({ baseStyles }: StyleModifierProps) => baseStyles || {},\n  child: ({ subElement }: StyleModifierProps) => subElement || {},\n  childLink: ({ isThemeDark }: StyleModifierProps) =>\n    getLinkColor({ isThemeDark }),\n  element: ({ element }: StyleModifierProps) => element || {},\n  iconColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    svg: getIconColor(isTextColorWhite, isThemeDark),\n    path: getIconColor(isTextColorWhite, isThemeDark),\n  }),\n  pseudoBefore: ({ pseudoBefore }: StyleModifierProps) => pseudoBefore || {},\n  sibling: ({ siblingAfter }: StyleModifierProps) => siblingAfter || {},\n  textColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    ['&']: getTextColor(isTextColorWhite, isThemeDark),\n    ['& *']: getTextColor(isTextColorWhite, isThemeDark),\n  }),\n};\n\nexport const modifiers = {\n  animationLink: createModifier(StyleType.Element, styleGetters.animationLink),\n  baseStyles: createModifier(StyleType.Element, styleGetters.baseStyles),\n  childLink: createModifier(StyleType.Element, styleGetters.childLink),\n  element: createModifier(StyleType.Element, styleGetters.element),\n  elementBefore: createModifier(\n    StyleType.PseudoBefore,\n    styleGetters.pseudoBefore,\n  ),\n  elementSiblingAfter: createModifier(\n    StyleType.SiblingAfter,\n    styleGetters.sibling,\n  ),\n  elementChild: createModifier(StyleType.Child, styleGetters.child),\n  iconColor: createModifier(StyleType.Child, styleGetters.iconColor),\n  textColor: createModifier(StyleType.Element, styleGetters.textColor),\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../source/model/modifiers/style.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { StyleModifierProps } from './_types';\n\nexport enum StyleType {\n  Element = 'element',\n  Child = 'child',\n  SiblingAfter = 'sibling-after',\n  PseudoBefore = 'pseudo-before',\n}\n\nconst textColors = {\n  white: { color: 'white' },\n} as const;\n\nconst iconColors = {\n  white: { fill: 'white' },\n} as const;\n\nconst getTextColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return textColors.white;\n  if (isThemeDark) return textColors.white;\n  return null;\n};\n\nconst getIconColor = (isTextColorWhite?: boolean, isThemeDark?: boolean) => {\n  if (isTextColorWhite) return iconColors.white;\n  if (isThemeDark) return iconColors.white;\n  return null;\n};\n\nconst getLinkAnimationColor = ({\n  isThemeDark,\n  isAnimationLineRed,\n}: {\n  isThemeDark?: boolean;\n  isAnimationLineRed?: boolean;\n}) => {\n  if (isAnimationLineRed) return Styles.animation.line.slideUnderRed;\n  if (isThemeDark) return Styles.animation.line.slideUnderWhite;\n\n  return Styles.animation.line.slideUnderBlack;\n};\n\nconst getLinkColor = ({ isThemeDark }: { isThemeDark?: boolean }) => {\n  if (isThemeDark) return Styles.element.text.link.white;\n\n  return Styles.element.text.link.red;\n};\n\nconst createSelector = (className: string, type: StyleType) => {\n  const selectors = {\n    [StyleType.Element]: `.${className}`,\n    [StyleType.Child]: `.${className} *`,\n    [StyleType.PseudoBefore]: `.${className}:before`,\n    [StyleType.SiblingAfter]: `.${className} + *`,\n  };\n  return selectors[type];\n};\n\nconst createStyles = (selector: string, styles: Record<string, any> | null) => {\n  if (styles === null) return '';\n\n  return jssToCSS({\n    styleObj: { [selector]: styles },\n  });\n};\n\nconst createStyleGenerator =\n  (type: StyleType) =>\n  (className: string, styles: Record<string, any> | null) => {\n    return createStyles(createSelector(className, type), styles);\n  };\n\nconst createModifier = (\n  type: StyleType,\n  styleGetter: (props: StyleModifierProps) => Record<string, any> | null,\n) => {\n  const generateStyles = createStyleGenerator(type);\n\n  return (props: StyleModifierProps) =>\n    generateStyles(props.className, styleGetter(props));\n};\n\nconst styleGetters = {\n  animationLink: ({ isThemeDark, isAnimationLineRed }: StyleModifierProps) => ({\n    a: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n    [`&a`]: getLinkAnimationColor({ isThemeDark, isAnimationLineRed }),\n  }),\n  baseStyles: ({ baseStyles }: StyleModifierProps) => baseStyles || {},\n  child: ({ subElement }: StyleModifierProps) => subElement || {},\n  childLink: ({ isThemeDark }: StyleModifierProps) =>\n    getLinkColor({ isThemeDark }),\n  element: ({ element }: StyleModifierProps) => element || {},\n  iconColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    svg: getIconColor(isTextColorWhite, isThemeDark),\n    path: getIconColor(isTextColorWhite, isThemeDark),\n  }),\n  pseudoBefore: ({ pseudoBefore }: StyleModifierProps) => pseudoBefore || {},\n  sibling: ({ siblingAfter }: StyleModifierProps) => siblingAfter || {},\n  textColor: ({ isTextColorWhite, isThemeDark }: StyleModifierProps) => ({\n    ['&']: getTextColor(isTextColorWhite, isThemeDark),\n    ['& *']: getTextColor(isTextColorWhite, isThemeDark),\n  }),\n};\n\nexport const modifiers = {\n  animationLink: createModifier(StyleType.Element, styleGetters.animationLink),\n  baseStyles: createModifier(StyleType.Element, styleGetters.baseStyles),\n  childLink: createModifier(StyleType.Element, styleGetters.childLink),\n  element: createModifier(StyleType.Element, styleGetters.element),\n  elementBefore: createModifier(\n    StyleType.PseudoBefore,\n    styleGetters.pseudoBefore,\n  ),\n  elementSiblingAfter: createModifier(\n    StyleType.SiblingAfter,\n    styleGetters.sibling,\n  ),\n  elementChild: createModifier(StyleType.Child, styleGetters.child),\n  iconColor: createModifier(StyleType.Child, styleGetters.iconColor),\n  textColor: createModifier(StyleType.Element, styleGetters.textColor),\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.4.7",
+  "version": "1.5.0-beta.0",
   "description": "UMD Web Elements",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,29 +12,24 @@
       "require": "./dist/index.js"
     },
     "./atomic": {
-      "types": "./dist/atomic/index.d.ts",
-      "import": "./dist/atomic/index.mjs",
-      "require": "./dist/atomic/index.js"
+      "types": "./dist/atomic.d.ts",
+      "import": "./dist/atomic.mjs",
+      "require": "./dist/atomic.js"
     },
     "./composite": {
-      "types": "./dist/composite/index.d.ts",
-      "import": "./dist/composite/index.mjs",
-      "require": "./dist/composite/index.js"
+      "types": "./dist/composite.d.ts",
+      "import": "./dist/composite.mjs",
+      "require": "./dist/composite.js"
     },
     "./layout": {
-      "types": "./dist/layout/index.d.ts",
-      "import": "./dist/layout/index.mjs",
-      "require": "./dist/layout/index.js"
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.mjs",
+      "require": "./dist/layout.js"
     },
     "./model": {
-      "types": "./dist/model/index.d.ts",
-      "import": "./dist/model/index.mjs",
-      "require": "./dist/model/index.js"
-    },
-    "./utilities": {
-      "types": "./dist/utilities/index.d.ts",
-      "import": "./dist/utilities/index.mjs",
-      "require": "./dist/utilities/index.js"
+      "types": "./dist/model.d.ts",
+      "import": "./dist/model.mjs",
+      "require": "./dist/model.js"
     }
   },
   "license": "MIT",
@@ -59,6 +54,10 @@
   "dependencies": {
     "@types/postcss-js": "^4.0.4"
   },
+  "peerDependencies": {
+    "@universityofmaryland/web-styles-library": "^1.0.0",
+    "@universityofmaryland/web-icons-library": "^1.0.0"
+  },
   "devDependencies": {
     "@vitejs/plugin-legacy": "^7.2.1",
     "vite": "^7.1.4",

package/dist/_virtual/___vite-browser-external.js

@@ -1,8 +0,0 @@
-"use strict";
-const __viteBrowserExternal = require("./__vite-browser-external.js");
-const _commonjsHelpers = require("./_commonjsHelpers.js");
-const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
-const __viteBrowserExternal__namespace = /* @__PURE__ */ _interopNamespaceDefaultOnly(__viteBrowserExternal);
-const require$$2 = /* @__PURE__ */ _commonjsHelpers.getAugmentedNamespace(__viteBrowserExternal__namespace);
-module.exports = require$$2;
-//# sourceMappingURL=___vite-browser-external.js.map

package/dist/_virtual/___vite-browser-external.js.map

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

package/dist/_virtual/___vite-browser-external.mjs

@@ -1,7 +0,0 @@
-import * as __viteBrowserExternal from "./__vite-browser-external.mjs";
-import { getAugmentedNamespace } from "./_commonjsHelpers.mjs";
-const require$$2 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal);
-export {
-  require$$2 as default
-};
-//# sourceMappingURL=___vite-browser-external.mjs.map

package/dist/_virtual/___vite-browser-external.mjs.map

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

package/dist/_virtual/__vite-browser-external.js

@@ -1,4 +0,0 @@
-"use strict";
-const __viteBrowserExternal = {};
-module.exports = __viteBrowserExternal;
-//# sourceMappingURL=__vite-browser-external.js.map

package/dist/_virtual/__vite-browser-external.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"__vite-browser-external.js","sources":["../../__vite-browser-external"],"sourcesContent":["export default {}"],"names":[],"mappings":";AAAA,MAAA,wBAAe,CAAA;;"}

package/dist/_virtual/__vite-browser-external.mjs

@@ -1,5 +0,0 @@
-const __viteBrowserExternal = {};
-export {
-  __viteBrowserExternal as default
-};
-//# sourceMappingURL=__vite-browser-external.mjs.map

package/dist/_virtual/__vite-browser-external.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"__vite-browser-external.mjs","sources":["../../__vite-browser-external"],"sourcesContent":["export default {}"],"names":[],"mappings":"AAAA,MAAA,wBAAe,CAAA;"}

package/dist/_virtual/_commonjsHelpers.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-function getAugmentedNamespace(n) {
-  if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n;
-  var f = n.default;
-  if (typeof f == "function") {
-    var a = function a2() {
-      var isInstance = false;
-      try {
-        isInstance = this instanceof a2;
-      } catch {
-      }
-      if (isInstance) {
-        return Reflect.construct(f, arguments, this.constructor);
-      }
-      return f.apply(this, arguments);
-    };
-    a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, "__esModule", { value: true });
-  Object.keys(n).forEach(function(k) {
-    var d = Object.getOwnPropertyDescriptor(n, k);
-    Object.defineProperty(a, k, d.get ? d : {
-      enumerable: true,
-      get: function() {
-        return n[k];
-      }
-    });
-  });
-  return a;
-}
-exports.commonjsGlobal = commonjsGlobal;
-exports.getAugmentedNamespace = getAugmentedNamespace;
-exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

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

package/dist/_virtual/_commonjsHelpers.mjs

@@ -1,39 +0,0 @@
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-function getAugmentedNamespace(n) {
-  if (Object.prototype.hasOwnProperty.call(n, "__esModule")) return n;
-  var f = n.default;
-  if (typeof f == "function") {
-    var a = function a2() {
-      var isInstance = false;
-      try {
-        isInstance = this instanceof a2;
-      } catch {
-      }
-      if (isInstance) {
-        return Reflect.construct(f, arguments, this.constructor);
-      }
-      return f.apply(this, arguments);
-    };
-    a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, "__esModule", { value: true });
-  Object.keys(n).forEach(function(k) {
-    var d = Object.getOwnPropertyDescriptor(n, k);
-    Object.defineProperty(a, k, d.get ? d : {
-      enumerable: true,
-      get: function() {
-        return n[k];
-      }
-    });
-  });
-  return a;
-}
-export {
-  commonjsGlobal,
-  getAugmentedNamespace,
-  getDefaultExportFromCjs
-};
-//# sourceMappingURL=_commonjsHelpers.mjs.map

package/dist/_virtual/_commonjsHelpers.mjs.map

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

package/dist/_virtual/attribute.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var attribute = {};
-exports.__exports = attribute;
-//# sourceMappingURL=attribute.js.map

package/dist/_virtual/attribute.js.map

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

package/dist/_virtual/attribute.mjs

@@ -1,5 +0,0 @@
-var attribute = {};
-export {
-  attribute as __exports
-};
-//# sourceMappingURL=attribute.mjs.map

package/dist/_virtual/attribute.mjs.map

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

package/dist/_virtual/className.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var className = { exports: {} };
-exports.__module = className;
-//# sourceMappingURL=className.js.map

package/dist/_virtual/className.js.map

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

package/dist/_virtual/className.mjs

@@ -1,5 +0,0 @@
-var className = { exports: {} };
-export {
-  className as __module
-};
-//# sourceMappingURL=className.mjs.map

package/dist/_virtual/className.mjs.map

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