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

package/dist/layout/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../source/layout/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridLayoutProps {\n  columns?: 2 | 3 | 4;\n  minHeight?: string;\n  enableContainerQueries?: boolean;\n}\n\n/**\n * Creates a responsive column grid layout\n *\n * Provides a multi-column grid layout that adapts to screen size.\n * Columns are responsive and collapse to single column on mobile.\n *\n * @param props - Configuration for grid layout\n * @returns ElementModel with grid layout container and styles\n *\n * @example\n * ```typescript\n * const gridLayout = grid({\n *   columns: 3,\n *   minHeight: '400px'\n * });\n *\n * // Add items to the grid\n * gridLayout.element.appendChild(item1);\n * gridLayout.element.appendChild(item2);\n * gridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(gridLayout.element);\n * document.head.appendChild(createStyleElement(gridLayout.styles));\n * ```\n */\nexport function createLayoutGrid({\n  columns = 2,\n  minHeight,\n  enableContainerQueries = true,\n}: GridLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.columnsTwo;\n  if (columns === 3) gridStyle = layout.grid.columnsThree;\n  if (columns === 4) gridStyle = layout.grid.columnsFour;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const minHeightStyles = minHeight\n    ? {\n        [`@media (${token.media.queries.tablet.min})`]: {\n          minHeight: `${minHeight} !important`,\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          ...containerQueryStyles,\n          ...minHeightStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;AAqCO,SAAS,iBAAiB;AAAA,EAC/B,UAAU;AAAA,EACV;AAAA,EACA,yBAAyB;AAC3B,IAAqB,IAAkB;AACrC,MAAI,YAAY,OAAO,KAAK;AAC5B,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK;AAC3C,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK;AAE3C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,kBAAkB,YACpB;AAAA,IACE,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,MAC9C,WAAW,GAAG,SAAS;AAAA,IAAA;AAAA,EACzB,IAEF,CAAA;AAEJ,SAAO,IAAI,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;"}

package/dist/layout/image.d.ts

@@ -1,4 +1,4 @@
-declare const _default: {
+export declare const layoutImage: {
     CreateElement: ({ image, showCaption, }: {
         image: HTMLImageElement | HTMLElement | string;
         showCaption?: boolean;
@@ -8,5 +8,4 @@ declare const _default: {
         container: string;
     };
 };
-export default _default;
 //# sourceMappingURL=image.d.ts.map

package/dist/layout/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":";6CA6DG;QACD,KAAK,EAAE,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;QAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;;;;;;AAsCD,wBAME"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":"AAsGA,eAAO,MAAM,WAAW;6CAzCrB;QACD,KAAK,EAAE,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;QAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;;;;;CA4CA,CAAC"}

package/dist/layout/image.js

@@ -1,25 +1,6 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const typography = require("@universityofmaryland/web-styles-library/typography");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-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]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 const ATTRIBUTE_CAPTION = "data-caption";
 const ATTRIBUTE_CREDIT = "data-credit";
 const ELEMENT_IMAGE_CONTAINER = "image-container";
@@ -29,9 +10,9 @@ const STYLES_IMAGE_CONTAINER = `
     display: inline-block;
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography__namespace.sans.min
+    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min
   }
 })}
 
@@ -41,9 +22,9 @@ const STYLES_IMAGE_CONTAINER = `
     right: 0;
     height: auto !important;
     width: auto !important;
-    padding: ${token__namespace.spacing.min};
+    padding: ${token.spacing.min};
     background-color: rgba(0, 0, 0, 0.5);
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
     z-index: 99;
   }
 
@@ -101,12 +82,14 @@ const CreateImageContainer = ({
   container.appendChild(image);
   return container;
 };
-const LayoutImage = {
+const layoutImage = {
   CreateElement: CreateImageContainer,
   Styles: STYLES_IMAGE_CONTAINER,
   Elements: {
     container: ELEMENT_IMAGE_CONTAINER
   }
 };
-module.exports = LayoutImage;
+export {
+  layoutImage
+};
 //# sourceMappingURL=image.js.map

package/dist/layout/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\nconst ELEMENT_IMAGE_CONTAINER = 'image-container';\n\n// prettier-ignore\nconst STYLES_IMAGE_CONTAINER = `\n  .${ELEMENT_IMAGE_CONTAINER} {\n    position: relative;\n    display: inline-block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_IMAGE_CONTAINER} > span {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    height: auto !important;\n    width: auto !important;\n    padding: ${token.spacing.min};\n    background-color: rgba(0, 0, 0, 0.5);\n    color: ${token.color.white};\n    z-index: 99;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > img {\n    display: block;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a {\n    display: block;\n    line-height: 0;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a img {\n    object-fit: cover;\n    object-position: center;\n    transform: scale(1);\n    transition: transform 0.5s;\n    width: 100%;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,\n  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {\n    transform: scale(1.025);\n  }\n`;\n\nconst CreateImageContainer = ({\n  image,\n  showCaption = false,\n}: {\n  image: HTMLImageElement | HTMLElement | string;\n  showCaption?: boolean;\n}) => {\n  const container = document.createElement('div');\n  const isString = typeof image === 'string';\n  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);\n  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);\n  const attributeCaption = hasCaption\n    ? image.getAttribute(ATTRIBUTE_CAPTION)\n    : null;\n  const attributeCredit = hasCredit\n    ? image.getAttribute(ATTRIBUTE_CREDIT)\n    : null;\n\n  container.classList.add(ELEMENT_IMAGE_CONTAINER);\n\n  if (isString) {\n    container.innerHTML = image;\n    return container;\n  }\n\n  if (showCaption) {\n    if (attributeCaption) {\n      console.log(\n        `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n      );\n    }\n\n    if (attributeCaption || attributeCredit) {\n      const text = attributeCaption || attributeCredit;\n      const caption = document.createElement('span');\n      caption.textContent = text;\n      container.appendChild(caption);\n    }\n  }\n\n  container.appendChild(image);\n  return container;\n};\n\nexport default {\n  CreateElement: CreateImageContainer,\n  Styles: STYLES_IMAGE_CONTAINER,\n  Elements: {\n    container: ELEMENT_IMAGE_CONTAINER,\n  },\n};\n"],"names":["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;;"}
+{"version":3,"file":"image.js","sources":["../../source/layout/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\nconst ELEMENT_IMAGE_CONTAINER = 'image-container';\n\n// prettier-ignore\nconst STYLES_IMAGE_CONTAINER = `\n  .${ELEMENT_IMAGE_CONTAINER} {\n    position: relative;\n    display: inline-block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_IMAGE_CONTAINER} > span {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    height: auto !important;\n    width: auto !important;\n    padding: ${token.spacing.min};\n    background-color: rgba(0, 0, 0, 0.5);\n    color: ${token.color.white};\n    z-index: 99;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > img {\n    display: block;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a {\n    display: block;\n    line-height: 0;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a img {\n    object-fit: cover;\n    object-position: center;\n    transform: scale(1);\n    transition: transform 0.5s;\n    width: 100%;\n  }\n\n  .${ELEMENT_IMAGE_CONTAINER} > a:hover img,\n  .${ELEMENT_IMAGE_CONTAINER} > a:focus img {\n    transform: scale(1.025);\n  }\n`;\n\nconst CreateImageContainer = ({\n  image,\n  showCaption = false,\n}: {\n  image: HTMLImageElement | HTMLElement | string;\n  showCaption?: boolean;\n}) => {\n  const container = document.createElement('div');\n  const isString = typeof image === 'string';\n  const hasCaption = !isString && image.hasAttribute(ATTRIBUTE_CAPTION);\n  const hasCredit = !isString && image.hasAttribute(ATTRIBUTE_CREDIT);\n  const attributeCaption = hasCaption\n    ? image.getAttribute(ATTRIBUTE_CAPTION)\n    : null;\n  const attributeCredit = hasCredit\n    ? image.getAttribute(ATTRIBUTE_CREDIT)\n    : null;\n\n  container.classList.add(ELEMENT_IMAGE_CONTAINER);\n\n  if (isString) {\n    container.innerHTML = image;\n    return container;\n  }\n\n  if (showCaption) {\n    if (attributeCaption) {\n      console.log(\n        `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n      );\n    }\n\n    if (attributeCaption || attributeCredit) {\n      const text = attributeCaption || attributeCredit;\n      const caption = document.createElement('span');\n      caption.textContent = text;\n      container.appendChild(caption);\n    }\n  }\n\n  container.appendChild(image);\n  return container;\n};\n\nexport const layoutImage = {\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;AAEO,MAAM,cAAc;AAAA,EACzB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,EAAA;AAEf;"}

package/dist/layout/index.d.ts

@@ -1,2 +1,7 @@
-export { default as Image } from './image';
+export { layoutImage as Image } from './image';
+export { createLayoutStacked as stacked } from './stacked';
+export { createLayoutGrid as grid } from './grid';
+export { createLayoutGridGap as gridGap } from './grid-gap';
+export { createLayoutGridBorder as gridBorder } from './grid-border';
+export { createLayoutGridOffset as gridOffset } from './grid-offset';
 //# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,gBAAgB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,sBAAsB,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/layout/stacked.d.ts

@@ -0,0 +1,10 @@
+import { ElementModel } from '../_types';
+export interface StackedLayoutProps {
+    isThemeDark?: boolean;
+    gap?: string;
+    spacing?: string;
+    showDividers?: boolean;
+    dividerColor?: string;
+}
+export declare function createLayoutStacked({ isThemeDark, gap, spacing, showDividers, dividerColor, }?: StackedLayoutProps): ElementModel;
+//# sourceMappingURL=stacked.d.ts.map

package/dist/layout/stacked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../source/layout/stacked.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2BD,wBAAgB,mBAAmB,CAAC,EAClC,WAAmB,EACnB,GAAsB,EACtB,OAA0B,EAC1B,YAAmB,EACnB,YAAY,GACb,GAAE,kBAAuB,GAAG,YAAY,CA2BxC"}

package/dist/layout/stacked.js

@@ -0,0 +1,29 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { token, layout } from "@universityofmaryland/web-styles-library";
+function createLayoutStacked({
+  isThemeDark = false,
+  gap = token.spacing.md,
+  spacing = token.spacing.md,
+  showDividers = true,
+  dividerColor
+} = {}) {
+  const defaultDividerColor = isThemeDark ? token.color.gray.dark : token.color.gray.light;
+  const borderColor = dividerColor || defaultDividerColor;
+  const dividerStyles = showDividers ? {
+    [` > *:not(:last-child)`]: {
+      paddingBottom: spacing,
+      marginBottom: spacing,
+      borderBottom: `1px solid ${borderColor}`
+    }
+  } : {};
+  return new ElementBuilder().styled(layout.grid.stacked).withStyles({
+    element: {
+      gridGap: gap,
+      ...dividerStyles
+    }
+  }).build();
+}
+export {
+  createLayoutStacked
+};
+//# sourceMappingURL=stacked.js.map

package/dist/layout/stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.js","sources":["../../source/layout/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface StackedLayoutProps {\n  isThemeDark?: boolean;\n  gap?: string;\n  spacing?: string;\n  showDividers?: boolean;\n  dividerColor?: string;\n}\n\n/**\n * Creates a stacked vertical layout with optional dividers\n *\n * Provides a vertical stack layout using CSS Grid with configurable\n * spacing and optional dividing borders between items.\n *\n * @param props - Configuration for stacked layout\n * @returns ElementModel with stacked layout container and styles\n *\n * @example\n * ```typescript\n * const stackedLayout = stacked({\n *   isThemeDark: false,\n *   showDividers: true\n * });\n *\n * // Add items to the container\n * stackedLayout.element.appendChild(item1);\n * stackedLayout.element.appendChild(item2);\n *\n * // Inject into DOM\n * document.body.appendChild(stackedLayout.element);\n * document.head.appendChild(createStyleElement(stackedLayout.styles));\n * ```\n */\nexport function createLayoutStacked({\n  isThemeDark = false,\n  gap = token.spacing.md,\n  spacing = token.spacing.md,\n  showDividers = true,\n  dividerColor,\n}: StackedLayoutProps = {}): ElementModel {\n  const defaultDividerColor = isThemeDark\n    ? token.color.gray.dark\n    : token.color.gray.light;\n\n  const borderColor = dividerColor || defaultDividerColor;\n\n  const dividerStyles = showDividers\n    ? {\n        [` > *:not(:last-child)`]: {\n          paddingBottom: spacing,\n          marginBottom: spacing,\n          borderBottom: `1px solid ${borderColor}`,\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(layout.grid.stacked)\n    .withStyles({\n      element: {\n        gridGap: gap,\n\n        ...dividerStyles,\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;AAsCO,SAAS,oBAAoB;AAAA,EAClC,cAAc;AAAA,EACd,MAAM,MAAM,QAAQ;AAAA,EACpB,UAAU,MAAM,QAAQ;AAAA,EACxB,eAAe;AAAA,EACf;AACF,IAAwB,IAAkB;AACxC,QAAM,sBAAsB,cACxB,MAAM,MAAM,KAAK,OACjB,MAAM,MAAM,KAAK;AAErB,QAAM,cAAc,gBAAgB;AAEpC,QAAM,gBAAgB,eAClB;AAAA,IACE,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc,aAAa,WAAW;AAAA,IAAA;AAAA,EACxC,IAEF,CAAA;AAEJ,SAAO,IAAI,iBACR,OAAO,OAAO,KAAK,OAAO,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,GAAG;AAAA,IAAA;AAAA,EACL,CACD,EACA,MAAA;AACL;"}

package/dist/layout.js

@@ -1,5 +1,15 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const image = require("./layout/image.js");
-exports.Image = image;
+import { layoutImage } from "./layout/image.js";
+import { createLayoutStacked } from "./layout/stacked.js";
+import { createLayoutGrid } from "./layout/grid.js";
+import { createLayoutGridGap } from "./layout/grid-gap.js";
+import { createLayoutGridBorder } from "./layout/grid-border.js";
+import { createLayoutGridOffset } from "./layout/grid-offset.js";
+export {
+  layoutImage as Image,
+  createLayoutGrid as grid,
+  createLayoutGridBorder as gridBorder,
+  createLayoutGridGap as gridGap,
+  createLayoutGridOffset as gridOffset,
+  createLayoutStacked as stacked
+};
 //# sourceMappingURL=layout.js.map

package/dist/layout.js.map

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

package/package.json

@@ -1,30 +1,27 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.5.9",
+  "version": "1.6.0-beta.1",
   "description": "UMD Web Elements",
+  "type": "module",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js"
     },
     "./atomic": {
       "types": "./dist/atomic.d.ts",
-      "import": "./dist/atomic.mjs",
-      "require": "./dist/atomic.js"
+      "import": "./dist/atomic.js"
     },
     "./composite": {
       "types": "./dist/composite.d.ts",
-      "import": "./dist/composite.mjs",
-      "require": "./dist/composite.js"
+      "import": "./dist/composite.js"
     },
     "./layout": {
       "types": "./dist/layout.d.ts",
-      "import": "./dist/layout.mjs",
-      "require": "./dist/layout.js"
+      "import": "./dist/layout.js"
     }
   },
   "license": "MIT",

package/dist/atomic/actions/icon.mjs

@@ -1,76 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import { external_link } from "@universityofmaryland/web-icons-library/controls";
-import { document } from "@universityofmaryland/web-icons-library/files";
-import { arrow_long } from "@universityofmaryland/web-icons-library/arrows";
-const icon = ({ ctaIcon, isThemeLight }) => {
-  const href = ctaIcon.getAttribute("href");
-  const message = `Open Link to ${href}`;
-  const hasIcon = ctaIcon.querySelector("svg");
-  const label = ctaIcon.getAttribute("aria-label") || message;
-  ctaIcon.setAttribute("aria-label", label);
-  if (!hasIcon) {
-    const isExternalLink = ctaIcon.getAttribute("target") === "_blank";
-    const isDownloadLink = ctaIcon.getAttribute("download") === "";
-    if (isExternalLink) {
-      ctaIcon.innerHTML = external_link;
-    }
-    if (isDownloadLink) {
-      ctaIcon.innerHTML = document;
-    }
-    if (!isExternalLink && !isDownloadLink) {
-      ctaIcon.innerHTML = arrow_long;
-    }
-  }
-  return new ElementBuilder().withClassName("actions-cta-icon").withStyles({
-    element: {
-      position: "absolute",
-      bottom: token.spacing.sm,
-      right: token.spacing.sm,
-      zIndex: 9999,
-      ["& a"]: {
-        borderRadius: "50%",
-        height: "40px",
-        width: "40px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: token.color.white,
-        transition: "background-color 0.3s ease-in-out",
-        ...isThemeLight && {
-          backgroundColor: `${token.color.gray.darker}`
-        }
-      },
-      ["& a:hover, & a:focus"]: {
-        backgroundColor: `${token.color.gray.darker}`,
-        border: `1px solid ${token.color.white}`,
-        ...isThemeLight && {
-          backgroundColor: `${token.color.white}`,
-          border: `1px solid ${token.color.gray.darker}`
-        },
-        [`& svg, & path`]: {
-          fill: token.color.white,
-          ...isThemeLight && {
-            fill: `${token.color.gray.darker}`
-          }
-        }
-      },
-      ["& svg"]: {
-        height: "15px",
-        width: "15px",
-        fill: token.color.gray.darker,
-        transition: "background-color 0.3s ease-in-out"
-      },
-      ["& svg, & path"]: {
-        fill: `${token.color.gray.darker}`,
-        ...isThemeLight && {
-          fill: `${token.color.white}`
-        }
-      }
-    }
-  }).withChild(ctaIcon).build();
-};
-export {
-  icon as default
-};
-//# sourceMappingURL=icon.mjs.map

package/dist/atomic/actions/icon.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.mjs","sources":["../../../source/atomic/actions/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { arrow_long as iconArrowLong } from '@universityofmaryland/web-icons-library/arrows';\n\ninterface ActionIconProps {\n  ctaIcon: HTMLElement;\n  isThemeLight?: boolean;\n}\n\nexport default ({ ctaIcon, isThemeLight }: ActionIconProps) => {\n  const href = ctaIcon.getAttribute('href');\n  const message = `Open Link to ${href}`;\n  const hasIcon = ctaIcon.querySelector('svg');\n  const label = ctaIcon.getAttribute('aria-label') || message;\n\n  ctaIcon.setAttribute('aria-label', label);\n\n  if (!hasIcon) {\n    const isExternalLink = ctaIcon.getAttribute('target') === '_blank';\n    const isDownloadLink = ctaIcon.getAttribute('download') === '';\n\n    if (isExternalLink) {\n      ctaIcon.innerHTML = iconExternalLink;\n    }\n\n    if (isDownloadLink) {\n      ctaIcon.innerHTML = iconDocument;\n    }\n\n    if (!isExternalLink && !isDownloadLink) {\n      ctaIcon.innerHTML = iconArrowLong;\n    }\n  }\n\n  return new ElementBuilder()\n    .withClassName('actions-cta-icon')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        bottom: token.spacing.sm,\n        right: token.spacing.sm,\n        zIndex: 9999,\n\n        ['& a']: {\n          borderRadius: '50%',\n          height: '40px',\n          width: '40px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: token.color.white,\n          transition: 'background-color 0.3s ease-in-out',\n\n          ...(isThemeLight && {\n            backgroundColor: `${token.color.gray.darker}`,\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          backgroundColor: `${token.color.gray.darker}`,\n          border: `1px solid ${token.color.white}`,\n\n          ...(isThemeLight && {\n            backgroundColor: `${token.color.white}`,\n            border: `1px solid ${token.color.gray.darker}`,\n          }),\n\n          [`& svg, & path`]: {\n            fill: token.color.white,\n\n            ...(isThemeLight && {\n              fill: `${token.color.gray.darker}`,\n            }),\n          },\n        },\n\n        ['& svg']: {\n          height: '15px',\n          width: '15px',\n          fill: token.color.gray.darker,\n          transition: 'background-color 0.3s ease-in-out',\n        },\n\n        ['& svg, & path']: {\n          fill: `${token.color.gray.darker}`,\n\n          ...(isThemeLight && {\n            fill: `${token.color.white}`,\n          }),\n        },\n      },\n    })\n    .withChild(ctaIcon)\n    .build();\n};\n"],"names":["iconExternalLink","iconDocument","iconArrowLong"],"mappings":";;;;;AAWA,MAAA,OAAe,CAAC,EAAE,SAAS,mBAAoC;AAC7D,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,QAAM,UAAU,gBAAgB,IAAI;AACpC,QAAM,UAAU,QAAQ,cAAc,KAAK;AAC3C,QAAM,QAAQ,QAAQ,aAAa,YAAY,KAAK;AAEpD,UAAQ,aAAa,cAAc,KAAK;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,iBAAiB,QAAQ,aAAa,QAAQ,MAAM;AAC1D,UAAM,iBAAiB,QAAQ,aAAa,UAAU,MAAM;AAE5D,QAAI,gBAAgB;AAClB,cAAQ,YAAYA;AAAAA,IACtB;AAEA,QAAI,gBAAgB;AAClB,cAAQ,YAAYC;AAAAA,IACtB;AAEA,QAAI,CAAC,kBAAkB,CAAC,gBAAgB;AACtC,cAAQ,YAAYC;AAAAA,IACtB;AAAA,EACF;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,kBAAkB,EAChC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ,MAAM,QAAQ;AAAA,MACtB,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ;AAAA,MAER,CAAC,KAAK,GAAG;AAAA,QACP,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,iBAAiB,MAAM,MAAM;AAAA,QAC7B,YAAY;AAAA,QAEZ,GAAI,gBAAgB;AAAA,UAClB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,QAAA;AAAA,MAC7C;AAAA,MAGF,CAAC,sBAAsB,GAAG;AAAA,QACxB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,QAC3C,QAAQ,aAAa,MAAM,MAAM,KAAK;AAAA,QAEtC,GAAI,gBAAgB;AAAA,UAClB,iBAAiB,GAAG,MAAM,MAAM,KAAK;AAAA,UACrC,QAAQ,aAAa,MAAM,MAAM,KAAK,MAAM;AAAA,QAAA;AAAA,QAG9C,CAAC,eAAe,GAAG;AAAA,UACjB,MAAM,MAAM,MAAM;AAAA,UAElB,GAAI,gBAAgB;AAAA,YAClB,MAAM,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,QAClC;AAAA,MACF;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM,MAAM,MAAM,KAAK;AAAA,QACvB,YAAY;AAAA,MAAA;AAAA,MAGd,CAAC,eAAe,GAAG;AAAA,QACjB,MAAM,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,QAEhC,GAAI,gBAAgB;AAAA,UAClB,MAAM,GAAG,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AACL;"}

package/dist/atomic/actions/index.mjs

@@ -1,10 +0,0 @@
-import { options, outline, primary, secondary } from "./text.mjs";
-import { default as default2 } from "./icon.mjs";
-export {
-  default2 as icon,
-  options,
-  outline,
-  primary,
-  secondary
-};
-//# sourceMappingURL=index.mjs.map

package/dist/atomic/actions/index.mjs.map

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

package/dist/atomic/actions/text.mjs

@@ -1,129 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import * as layout from "@universityofmaryland/web-styles-library/layout";
-import * as animation from "@universityofmaryland/web-styles-library/animation";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { parseSvgString } from "@universityofmaryland/web-utilities-library/media";
-import { wrapTextNodeInSpan, extractIconElement } from "@universityofmaryland/web-utilities-library/dom";
-import { external_link } from "@universityofmaryland/web-icons-library/controls";
-import { email } from "@universityofmaryland/web-icons-library/communication";
-import { document } from "@universityofmaryland/web-icons-library/files";
-import { fearless } from "@universityofmaryland/web-icons-library/brand";
-const createLinkIcon = (element, type) => {
-  const existingIcon = extractIconElement({ element });
-  const ICONS = {
-    email,
-    newWindow: external_link,
-    document,
-    fearless
-  };
-  if (existingIcon) {
-    element.insertBefore(existingIcon, element.firstChild);
-    return;
-  }
-  const href = element.getAttribute("href");
-  const isExternalTab = element.getAttribute("target") === "_blank";
-  const isDownload = element.getAttribute("download") !== null;
-  const isMail = href?.includes("mailto:");
-  const insertIcon = (element2, svg) => {
-    const icon = parseSvgString(svg);
-    if (icon) element2.insertBefore(icon, element2.firstChild);
-  };
-  if (isMail) {
-    insertIcon(element, ICONS.email);
-  } else if (isExternalTab) {
-    insertIcon(element, ICONS.newWindow);
-  } else if (isDownload) {
-    insertIcon(element, ICONS.document);
-  } else if (type === "secondary") {
-    insertIcon(element, ICONS.fearless);
-  }
-};
-const createPlainText = ({
-  isThemeDark,
-  isTypeSecondary,
-  plainText
-}) => {
-  if (!plainText) return null;
-  return new ElementBuilder(plainText).styled(
-    typography.sans.compose("min", { theme: isThemeDark ? "dark" : "light" })
-  ).withStyles({
-    element: {
-      textDecoration: "underline",
-      ...isTypeSecondary && {
-        marginLeft: `${token.spacing.lg}`,
-        alignSelf: "baseline"
-      }
-    }
-  }).build();
-};
-const createElement = (type, props) => {
-  createLinkIcon(props.element, type);
-  const size = props.isSizeLarge ? "large" : "normal";
-  let styleObject;
-  if (type === "primary") {
-    styleObject = elementStyles.action.primary.composePrimary({ size });
-  } else if (type === "secondary") {
-    let color = "default";
-    if (props.isThemeGold) {
-      color = "gold";
-    } else if (props.isThemeDark) {
-      color = "white";
-    }
-    styleObject = {
-      ...elementStyles.action.secondary.composeSecondary({
-        size,
-        color
-      }),
-      ...animation.line.slideUnderRed
-    };
-  } else if (type === "outline") {
-    const color = props.isThemeDark ? "white" : "default";
-    styleObject = elementStyles.action.outline.composeOutline({ size, color });
-  }
-  const element = new ElementBuilder(props.element).styled(styleObject).withStylesIf(!!props.elementStyles, props.elementStyles || {});
-  if (type === "secondary") {
-    element.withModifier((el) => {
-      wrapTextNodeInSpan(el);
-    });
-  }
-  return element.build();
-};
-const primary = (props) => createElement("primary", props);
-const secondary = (props) => createElement("secondary", props);
-const outline = (props) => createElement("outline", props);
-const options = (props) => {
-  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;
-  let actionModel;
-  if (isTypePrimary) {
-    actionModel = primary(props);
-  } else if (isTypeSecondary) {
-    actionModel = secondary(props);
-  } else if (isTypeOutline) {
-    actionModel = outline(props);
-  }
-  if (plainText) {
-    const plainTextElement = createPlainText(props);
-    if (plainTextElement) {
-      return new ElementBuilder().styled(layout.grid.stacked).withStyles({
-        element: {
-          display: "grid",
-          gap: token.spacing.sm,
-          ["& > *"]: {
-            marginBottom: "0 !important",
-            ...!isTypeSecondary && { justifySelf: "center" }
-          }
-        }
-      }).withChild(actionModel).withChild(plainTextElement).build();
-    }
-  }
-  return new ElementBuilder().withChild(actionModel).build();
-};
-export {
-  options,
-  outline,
-  primary,
-  secondary
-};
-//# sourceMappingURL=text.mjs.map

package/dist/atomic/actions/text.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"text.mjs","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as layoutStyles from '@universityofmaryland/web-styles-library/layout';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { parseSvgString } from '@universityofmaryland/web-utilities-library/media';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  extractIconElement,\n  wrapTextNodeInSpan,\n} from '@universityofmaryland/web-utilities-library/dom';\nimport { external_link as iconExternalLink } from '@universityofmaryland/web-icons-library/controls';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { document as iconDocument } from '@universityofmaryland/web-icons-library/files';\nimport { fearless as iconFearless } from '@universityofmaryland/web-icons-library/brand';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\nconst createLinkIcon = (element: HTMLElement, type: ElementType): void => {\n  const existingIcon = extractIconElement({ element });\n  const ICONS: Record<IconType, string> = {\n    email: iconEmail,\n    newWindow: iconExternalLink,\n    document: iconDocument,\n    fearless: iconFearless,\n  };\n\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n  const insertIcon = (element: HTMLElement, svg: string): void => {\n    const icon = parseSvgString(svg);\n    if (icon) element.insertBefore(icon, element.firstChild);\n  };\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n};\n\nconst createPlainText = ({\n  isThemeDark,\n  isTypeSecondary,\n  plainText,\n}: Pick<OptionProps, 'isThemeDark' | 'isTypeSecondary' | 'plainText'>) => {\n  if (!plainText) return null;\n\n  return new ElementBuilder(plainText)\n    .styled(\n      typography.sans.compose('min', { theme: isThemeDark ? 'dark' : 'light' }),\n    )\n    .withStyles({\n      element: {\n        textDecoration: 'underline',\n\n        ...(isTypeSecondary && {\n          marginLeft: `${token.spacing.lg}`,\n          alignSelf: 'baseline',\n        }),\n      },\n    })\n    .build();\n};\n\nconst createElement = (type: ElementType, props: ElementProps) => {\n  createLinkIcon(props.element, type);\n\n  const size = props.isSizeLarge ? 'large' : 'normal';\n  let styleObject;\n\n  if (type === 'primary') {\n    styleObject = elementStyles.action.primary.composePrimary({ size });\n  } else if (type === 'secondary') {\n    let color: 'default' | 'white' | 'gold' = 'default';\n    if (props.isThemeGold) {\n      color = 'gold';\n    } else if (props.isThemeDark) {\n      color = 'white';\n    }\n    styleObject = {\n      ...elementStyles.action.secondary.composeSecondary({\n        size,\n        color,\n      }),\n      ...animation.line.slideUnderRed,\n    };\n  } else if (type === 'outline') {\n    const color = props.isThemeDark ? 'white' : 'default';\n    styleObject = elementStyles.action.outline.composeOutline({ size, color });\n  }\n\n  const element = new ElementBuilder(props.element)\n    .styled(styleObject!)\n    .withStylesIf(!!props.elementStyles, props.elementStyles || {});\n\n  if (type === 'secondary') {\n    element.withModifier((el) => {\n      wrapTextNodeInSpan(el);\n    });\n  }\n\n  return element.build();\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n\n  let actionModel;\n\n  if (isTypePrimary) {\n    actionModel = primary(props);\n  } else if (isTypeSecondary) {\n    actionModel = secondary(props);\n  } else if (isTypeOutline) {\n    actionModel = outline(props);\n  }\n\n  if (plainText) {\n    const plainTextElement = createPlainText(props);\n\n    if (plainTextElement) {\n      return new ElementBuilder()\n        .styled(layoutStyles.grid.stacked)\n        .withStyles({\n          element: {\n            display: 'grid',\n            gap: token.spacing.sm,\n\n            ['& > *']: {\n              marginBottom: '0 !important',\n              ...(!isTypeSecondary && { justifySelf: 'center' }),\n            },\n          },\n        })\n        .withChild(actionModel)\n        .withChild(plainTextElement)\n        .build();\n    }\n  }\n\n  return new ElementBuilder().withChild(actionModel).build();\n};\n"],"names":["iconExternalLink","element","layoutStyles"],"mappings":"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"}

package/dist/atomic/animations/actions/index.mjs

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

package/dist/atomic/animations/actions/index.mjs.map

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