@universityofmaryland/web-elements-library 1.6.10-beta.0 → 1.6.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/atomic/layout/block/stacked.d.ts +2 -1
- package/dist/atomic/layout/block/stacked.d.ts.map +1 -1
- package/dist/atomic/layout/block/stacked.js +8 -3
- package/dist/atomic/layout/block/stacked.js.map +1 -1
- package/dist/composite/card/block.d.ts.map +1 -1
- package/dist/composite/card/block.js +2 -1
- package/dist/composite/card/block.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# University of Maryland Web Elements Library
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
|
|
4
4
|
|
|
5
5
|
Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
|
|
6
6
|
|
|
@@ -3,12 +3,13 @@ interface BoxProps {
|
|
|
3
3
|
hasBorder?: boolean;
|
|
4
4
|
isThemeDark?: boolean;
|
|
5
5
|
isTransparent?: boolean;
|
|
6
|
+
hasImage?: boolean;
|
|
6
7
|
}
|
|
7
8
|
export declare const image: ({ customStyles, children, hasBorder, isThemeDark, }: BoxProps & {
|
|
8
9
|
children: ElementModel[];
|
|
9
10
|
customStyles?: Record<string, any>;
|
|
10
11
|
}) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
11
|
-
export declare const textContainer: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, }: BoxProps & {
|
|
12
|
+
export declare const textContainer: ({ children, customStyles, hasBorder, isThemeDark, isTransparent, hasImage, }: BoxProps & {
|
|
12
13
|
customStyles?: Record<string, any>;
|
|
13
14
|
children: ElementModel[];
|
|
14
15
|
}) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC,kFAgDA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,8EAO3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAiCA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B,kFAyCA,CAAC"}
|
|
@@ -53,16 +53,21 @@ const textContainer = ({
|
|
|
53
53
|
customStyles = {},
|
|
54
54
|
hasBorder = false,
|
|
55
55
|
isThemeDark = false,
|
|
56
|
-
isTransparent = false
|
|
56
|
+
isTransparent = false,
|
|
57
|
+
hasImage = true
|
|
57
58
|
}) => {
|
|
58
59
|
return new ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
|
|
59
60
|
element: {
|
|
60
61
|
maxWidth: `${token.spacing.maxWidth.smallest}`,
|
|
61
62
|
...createMediaQuery("min-width", mediumBreakpointStart, {
|
|
62
|
-
|
|
63
|
+
...hasImage && {
|
|
64
|
+
paddingTop: token.spacing.md
|
|
65
|
+
}
|
|
63
66
|
}),
|
|
64
67
|
...createMediaQuery("min-width", mediumBreakpointStart, {
|
|
65
|
-
|
|
68
|
+
...hasImage && {
|
|
69
|
+
paddingTop: token.spacing.lg
|
|
70
|
+
},
|
|
66
71
|
...hasBorder && {
|
|
67
72
|
padding: token.spacing.md
|
|
68
73
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingTop: token.spacing.md,\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n paddingTop: token.spacing.lg,\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-container')\n .withStyles({\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${token.color.gray.darker}`,\n }),\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n"],"names":["assetElement"],"mappings":";;;;AASA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;
|
|
1
|
+
{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n createMediaQuery,\n createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n hasBorder?: boolean;\n isThemeDark?: boolean;\n isTransparent?: boolean;\n hasImage?: boolean;\n}\n\nexport const image = ({\n customStyles = {},\n children,\n hasBorder = false,\n isThemeDark = false,\n}: BoxProps & {\n children: ElementModel[];\n customStyles?: Record<string, any>;\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-image')\n .withStyles({\n element: {\n height: 'auto',\n position: 'relative',\n zIndex: 99,\n\n // Gif Overwrite\n [`&:has(.${assetElement.gif.toggle.className})`]: {\n aspectRatio: '4 / 3',\n },\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginLeft: token.spacing.sm,\n marginBottom: token.spacing.md,\n width: '120px',\n float: 'right',\n alignSelf: 'flex-start',\n\n ...(isThemeDark && {\n marginRight: 0,\n marginTop: 0,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n display: 'block',\n }),\n\n ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n ...(hasBorder && {\n marginLeft: token.spacing.sm,\n }),\n }),\n\n ...customStyles,\n\n '& img': {\n ...createMediaQuery('max-width', smallBreakpoint, {\n height: 'auto !important',\n }),\n },\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const textContainer = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n hasImage = true,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-text')\n .withStyles({\n element: {\n maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.md,\n }),\n }),\n\n ...createMediaQuery('min-width', mediumBreakpointStart, {\n ...(hasImage && {\n paddingTop: token.spacing.lg,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n\nexport const container = ({\n children,\n customStyles = {},\n hasBorder = false,\n isThemeDark = false,\n isTransparent = false,\n}: BoxProps & {\n customStyles?: Record<string, any>;\n children: ElementModel[];\n}) => {\n return new ElementBuilder()\n .withClassName('layout-block-stacked-container')\n .withStyles({\n element: {\n containerType: 'inline-size',\n height: '100%',\n\n ...(isThemeDark && {\n backgroundColor: token.color.gray.darker,\n }),\n\n ...(isTransparent && {\n backgroundColor: 'transparent',\n }),\n\n ...(hasBorder && {\n border: `1px solid ${token.color.gray.light}`,\n }),\n\n ...(hasBorder &&\n isThemeDark && {\n border: `1px solid ${token.color.gray.darker}`,\n }),\n\n ...createMediaQuery('max-width', smallBreakpoint, {\n ...(isThemeDark &&\n !isTransparent && {\n padding: token.spacing.md,\n }),\n\n ...(hasBorder && {\n padding: token.spacing.md,\n }),\n }),\n\n ...customStyles,\n },\n })\n .withChildren(...children)\n .build();\n};\n"],"names":["assetElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,
|
|
1
|
+
{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA+D7D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n const {\n dateSign,\n hasBorder,\n hasEyebrowRibbon,\n image,\n imageLoading = 'lazy',\n isAligned,\n isThemeDark,\n isTransparent,\n newsId,\n } = props;\n const shouldImageBeFullWidth = hasEyebrowRibbon;\n const children: UMDElement[] = [];\n const sizingProps = {\n isThemeDark,\n isTransparent,\n hasBorder,\n };\n\n if (image) {\n children.push(\n layout.block.stacked.image({\n children: [\n assets.image.background({\n element: image,\n isScaled: true,\n isAspectStandard: isAligned,\n dateSign,\n imageLoading,\n }),\n ],\n customStyles: {\n ...(shouldImageBeFullWidth && {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginBottom: token.spacing.md,\n width: '100%',\n }),\n }),\n },\n ...sizingProps,\n }),\n );\n }\n\n children.push(\n layout.block.stacked.textContainer({\n children: [textLockup.smallScaling(props)],\n ...sizingProps,\n }),\n );\n\n const composite = layout.block.stacked.container({\n children,\n ...sizingProps,\n });\n\n if (newsId) {\n composite?.element.setAttribute('news-id', newsId);\n }\n\n return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,
|
|
1
|
+
{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n const {\n dateSign,\n hasBorder,\n hasEyebrowRibbon,\n image,\n imageLoading = 'lazy',\n isAligned,\n isThemeDark,\n isTransparent,\n newsId,\n } = props;\n const shouldImageBeFullWidth = hasEyebrowRibbon;\n const children: UMDElement[] = [];\n const sizingProps = {\n isThemeDark,\n isTransparent,\n hasBorder,\n };\n\n if (image) {\n children.push(\n layout.block.stacked.image({\n children: [\n assets.image.background({\n element: image,\n isScaled: true,\n isAspectStandard: isAligned,\n dateSign,\n imageLoading,\n }),\n ],\n customStyles: {\n ...(shouldImageBeFullWidth && {\n ...createMediaQuery('max-width', smallBreakpoint, {\n marginBottom: token.spacing.md,\n width: '100%',\n }),\n }),\n },\n ...sizingProps,\n }),\n );\n }\n\n children.push(\n layout.block.stacked.textContainer({\n children: [textLockup.smallScaling(props)],\n ...sizingProps,\n hasImage: !!image,\n }),\n );\n\n const composite = layout.block.stacked.container({\n children,\n ...sizingProps,\n });\n\n if (newsId) {\n composite?.element.setAttribute('news-id', newsId);\n }\n\n return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,MACH,UAAU,CAAC,CAACJ;AAAAA,IAAA,CACb;AAAA,EAAA;AAGH,QAAM,YAAYK,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universityofmaryland/web-elements-library",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.11",
|
|
4
4
|
"description": "UMD Web Elements",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@types/postcss-js": "^4.0.4",
|
|
42
|
-
"@universityofmaryland/web-builder-library": "^1.0.3
|
|
43
|
-
"@universityofmaryland/web-icons-library": "^1.0.4
|
|
42
|
+
"@universityofmaryland/web-builder-library": "^1.0.3",
|
|
43
|
+
"@universityofmaryland/web-icons-library": "^1.0.4",
|
|
44
|
+
"@universityofmaryland/web-styles-library": "^1.8.6",
|
|
44
45
|
"@universityofmaryland/web-token-library": "^1.0.1",
|
|
45
|
-
"@universityofmaryland/web-utilities-library": "^1.0.5
|
|
46
|
-
"@universityofmaryland/web-styles-library": "^1.8.6-beta.0"
|
|
46
|
+
"@universityofmaryland/web-utilities-library": "^1.0.5"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@universityofmaryland/web-builder-library": "^1.0.0",
|