@guardian/stand 0.0.64 → 0.0.66

package/dist/Badge.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_badge = require("./styleD/build/typescript/component/badge.cjs");
+const require_Badge = require("./components/Badge/Badge.cjs");
+exports.Badge = require_Badge.Badge;
+exports.componentBadge = require_badge.componentBadge;

package/dist/Badge.d.cts

@@ -0,0 +1,5 @@
+import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.cjs";
+import { PartialBadgeTheme } from "./components/Badge/styles.cjs";
+import { BadgeProps } from "./components/Badge/types.cjs";
+import { Badge } from "./components/Badge/Badge.cjs";
+export { Badge, type BadgeProps, type PartialBadgeTheme as BadgeTheme, type ComponentBadge, componentBadge };

package/dist/Badge.d.ts

@@ -0,0 +1,5 @@
+import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.js";
+import { PartialBadgeTheme } from "./components/Badge/styles.js";
+import { BadgeProps } from "./components/Badge/types.js";
+import { Badge } from "./components/Badge/Badge.js";
+export { Badge, type BadgeProps, type PartialBadgeTheme as BadgeTheme, type ComponentBadge, componentBadge };

package/dist/Badge.js

@@ -0,0 +1,3 @@
+import { componentBadge } from "./styleD/build/typescript/component/badge.js";
+import { Badge } from "./components/Badge/Badge.js";
+export { Badge, componentBadge };

package/dist/components/Badge/Badge.cjs

@@ -0,0 +1,17 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/Badge/Badge.tsx
+const Badge = ({ size = "md", color = "green", weight = "strong", theme = {}, cssOverrides, children, ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+		css: [require_styles.badgeStyles(require_mergeDeep.mergeDeep(require_styles.defaultBadgeTheme, theme), {
+			color,
+			size,
+			weight
+		}), cssOverrides],
+		...props,
+		children
+	});
+};
+//#endregion
+exports.Badge = Badge;

package/dist/components/Badge/Badge.d.cts

@@ -0,0 +1,5 @@
+import { BadgeProps } from "./types.cjs";
+//#region src/components/Badge/Badge.d.ts
+declare const Badge: ({ size, color, weight, theme, cssOverrides, children, ...props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Badge };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,5 @@
+import { BadgeProps } from "./types.js";
+//#region src/components/Badge/Badge.d.ts
+declare const Badge: ({ size, color, weight, theme, cssOverrides, children, ...props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Badge };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,17 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { badgeStyles, defaultBadgeTheme } from "./styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+const Badge = ({ size = "md", color = "green", weight = "strong", theme = {}, cssOverrides, children, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		css: [badgeStyles(mergeDeep(defaultBadgeTheme, theme), {
+			color,
+			size,
+			weight
+		}), cssOverrides],
+		...props,
+		children
+	});
+};
+//#endregion
+export { Badge };

package/dist/components/Badge/styles.cjs

@@ -0,0 +1,26 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_badge = require("../../styleD/build/typescript/component/badge.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Badge/styles.ts
+const defaultBadgeTheme = require_badge.componentBadge;
+const badgeStyles = (theme, { size = "md", color = "green", weight = "strong" }) => {
+	const sizeVariant = theme.size[size];
+	const padding = sizeVariant.padding;
+	const typography = sizeVariant.weight[weight].typography;
+	const colorVariant = theme.color[color].weight[weight];
+	return _emotion_react.css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
+		padding-top: ${padding.top};
+		padding-right: ${padding.right};
+		padding-bottom: ${padding.bottom};
+		padding-left: ${padding.left};
+		${require_typography.convertTypographyToEmotionStringStyle(typography)}
+		color: ${colorVariant.color};
+		background-color: ${colorVariant.background};
+	`;
+};
+//#endregion
+exports.badgeStyles = badgeStyles;
+exports.defaultBadgeTheme = defaultBadgeTheme;

package/dist/components/Badge/styles.d.cts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentBadge } from "../../styleD/build/typescript/component/badge.cjs";
+import "./types.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Badge/styles.d.ts
+type BadgeTheme = Prettify<Pick<ComponentBadge, 'size' | 'color' | 'shared'>>;
+type PartialBadgeTheme = Prettify<DeepPartial<BadgeTheme>>;
+//#endregion
+export { BadgeTheme, PartialBadgeTheme };

package/dist/components/Badge/styles.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentBadge } from "../../styleD/build/typescript/component/badge.js";
+import "./types.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Badge/styles.d.ts
+type BadgeTheme = Prettify<Pick<ComponentBadge, 'size' | 'color' | 'shared'>>;
+type PartialBadgeTheme = Prettify<DeepPartial<BadgeTheme>>;
+//#endregion
+export { BadgeTheme, PartialBadgeTheme };

package/dist/components/Badge/styles.js

@@ -0,0 +1,25 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentBadge } from "../../styleD/build/typescript/component/badge.js";
+import { css } from "@emotion/react";
+//#region src/components/Badge/styles.ts
+const defaultBadgeTheme = componentBadge;
+const badgeStyles = (theme, { size = "md", color = "green", weight = "strong" }) => {
+	const sizeVariant = theme.size[size];
+	const padding = sizeVariant.padding;
+	const typography = sizeVariant.weight[weight].typography;
+	const colorVariant = theme.color[color].weight[weight];
+	return css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
+		padding-top: ${padding.top};
+		padding-right: ${padding.right};
+		padding-bottom: ${padding.bottom};
+		padding-left: ${padding.left};
+		${convertTypographyToEmotionStringStyle(typography)}
+		color: ${colorVariant.color};
+		background-color: ${colorVariant.background};
+	`;
+};
+//#endregion
+export { badgeStyles, defaultBadgeTheme };

package/dist/components/Badge/types.d.cts

@@ -0,0 +1,23 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { componentBadge } from "../../styleD/build/typescript/component/badge.cjs";
+import { BadgeTheme } from "./styles.cjs";
+//#region src/components/Badge/types.d.ts
+type BadgeColors = keyof typeof componentBadge.color;
+type BadgeSizes = keyof typeof componentBadge.size;
+type BadgeWeights = keyof typeof componentBadge.size.md.weight;
+interface BadgeProps extends DefaultPropsWithChildren<BadgeTheme> {
+  /**
+   * Size variant of the badge
+   */
+  size?: BadgeSizes;
+  /**
+   * Color variant of the badge
+   */
+  color?: BadgeColors;
+  /**
+   * The weight of the badge can affect both size and color CSS values
+   */
+  weight?: BadgeWeights;
+}
+//#endregion
+export { BadgeColors, BadgeProps, BadgeSizes, BadgeWeights };

package/dist/components/Badge/types.d.ts

@@ -0,0 +1,23 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { componentBadge } from "../../styleD/build/typescript/component/badge.js";
+import { BadgeTheme } from "./styles.js";
+//#region src/components/Badge/types.d.ts
+type BadgeColors = keyof typeof componentBadge.color;
+type BadgeSizes = keyof typeof componentBadge.size;
+type BadgeWeights = keyof typeof componentBadge.size.md.weight;
+interface BadgeProps extends DefaultPropsWithChildren<BadgeTheme> {
+  /**
+   * Size variant of the badge
+   */
+  size?: BadgeSizes;
+  /**
+   * Color variant of the badge
+   */
+  color?: BadgeColors;
+  /**
+   * The weight of the badge can affect both size and color CSS values
+   */
+  weight?: BadgeWeights;
+}
+//#endregion
+export { BadgeColors, BadgeProps, BadgeSizes, BadgeWeights };

package/dist/components/Select/Select.cjs

@@ -18,7 +18,7 @@ function Option({ children, theme = {}, id, ...props }) {
 		children
 	});
 }
-function ListBox({ children, theme = {} }) {
+function ListBox({ children, size, theme = {} }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	const items = [];
 	react.default.Children.forEach(children, (child, index) => {
@@ -30,20 +30,24 @@ function ListBox({ children, theme = {} }) {
 		}
 	});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBox, {
-		css: require_styles.listBoxStyles(mergedTheme),
+		css: require_styles.listBoxStyles(mergedTheme, { size }),
 		children: items
 	});
 }
-function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
+function Select({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Form.FormInputContainer, {
 		as: react_aria_components.Select,
+		size,
 		isInvalid,
 		...props,
-		size: "md",
 		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Button, {
-			css: require_styles.buttonStyles(mergedTheme, isInvalid),
+			css: require_styles.buttonStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
 			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.SelectValue, {}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				css: require_styles.iconStyles(),
 				symbol: "keyboard_arrow_down",
 				size: "lg"
 			})]
@@ -54,6 +58,7 @@ function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...pro
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {
+				size,
 				theme: mergedTheme,
 				children
 			})

package/dist/components/Select/Select.d.cts

@@ -1,6 +1,6 @@
 import { OptionProps, SelectProps } from "./types.cjs";
 //#region src/components/Select/Select.d.ts
 declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Option, Select };

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { OptionProps, SelectProps } from "./types.js";
 //#region src/components/Select/Select.d.ts
 declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion
 export { Option, Select };

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
 import { mergeDeep } from "../../util/mergeDeep.js";
 import { Icon } from "../Icon/Icon.js";
 import { FormInputContainer } from "../Form/Form.js";
-import { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
+import { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
 import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
@@ -16,7 +16,7 @@ function Option({ children, theme = {}, id, ...props }) {
 		children
 	});
 }
-function ListBox$1({ children, theme = {} }) {
+function ListBox$1({ children, size, theme = {} }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	const items = [];
 	React.Children.forEach(children, (child, index) => {
@@ -28,20 +28,24 @@ function ListBox$1({ children, theme = {} }) {
 		}
 	});
 	return /* @__PURE__ */ jsx(ListBox, {
-		css: listBoxStyles(mergedTheme),
+		css: listBoxStyles(mergedTheme, { size }),
 		children: items
 	});
 }
-function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
+function Select$1({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	return /* @__PURE__ */ jsxs(FormInputContainer, {
 		as: Select,
+		size,
 		isInvalid,
 		...props,
-		size: "md",
 		children: [/* @__PURE__ */ jsxs(Button, {
-			css: buttonStyles(mergedTheme, isInvalid),
+			css: buttonStyles(mergedTheme, {
+				size,
+				isInvalid
+			}),
 			children: [/* @__PURE__ */ jsx(SelectValue, {}), /* @__PURE__ */ jsx(Icon, {
+				css: iconStyles(),
 				symbol: "keyboard_arrow_down",
 				size: "lg"
 			})]
@@ -52,6 +56,7 @@ function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...p
 			offset: mergedTheme.shared.offset,
 			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ jsx(ListBox$1, {
+				size,
 				theme: mergedTheme,
 				children
 			})

package/dist/components/Select/styles.cjs

@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
 		}
 	`;
 };
-const listBoxStyles = (theme) => {
+const listBoxStyles = (theme, { size }) => {
 	return _emotion_react.css`
-		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
 		outline: none;
 	`;
 };
-const buttonStyles = (theme, isInvalid) => {
+const buttonStyles = (theme, { size, isInvalid }) => {
 	return _emotion_react.css`
 		display: ${theme.shared.button.display};
 		justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
 		background-color: ${theme.shared.button.backgroundColor};
 		border: ${theme.shared.button.border};
 		border-radius: ${theme.shared.button.borderRadius};
-		height: ${theme.shared.button.height};
+		height: ${theme[size].height};
 		padding-left: ${theme.shared.button.paddingLeft};
 		padding-right: ${theme.shared.button.paddingRight};
 		margin-top: ${theme.shared.button.marginTop};
-		${require_typography.convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
@@ -90,9 +90,17 @@ const buttonStyles = (theme, isInvalid) => {
 		${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
 	`;
 };
+const iconStyles = () => {
+	return _emotion_react.css`
+		[data-open] & {
+			transform: rotate(180deg);
+		}
+	`;
+};
 //#endregion
 exports.buttonStyles = buttonStyles;
 exports.defaultSelectTheme = defaultSelectTheme;
+exports.iconStyles = iconStyles;
 exports.listBoxItemStyles = listBoxItemStyles;
 exports.listBoxStyles = listBoxStyles;
 exports.popoverStyles = popoverStyles;

package/dist/components/Select/styles.d.cts

@@ -1,5 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.cjs";
 import { ComponentSelect } from "../../styleD/build/typescript/component/select.cjs";
+import "./types.cjs";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Select/styles.d.ts
 type SelectTheme = Prettify<ComponentSelect>;

package/dist/components/Select/styles.d.ts

@@ -1,5 +1,6 @@
 import { DeepPartial, Prettify } from "../../util/types.js";
 import { ComponentSelect } from "../../styleD/build/typescript/component/select.js";
+import "./types.js";
 import { SerializedStyles } from "@emotion/react";
 //#region src/components/Select/styles.d.ts
 type SelectTheme = Prettify<ComponentSelect>;

package/dist/components/Select/styles.js

@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
 		}
 	`;
 };
-const listBoxStyles = (theme) => {
+const listBoxStyles = (theme, { size }) => {
 	return css`
-		${convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
 		background-color: ${theme.shared.listBox.backgroundColor};
 		border: ${theme.shared.listBox.border};
 		box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
 		outline: none;
 	`;
 };
-const buttonStyles = (theme, isInvalid) => {
+const buttonStyles = (theme, { size, isInvalid }) => {
 	return css`
 		display: ${theme.shared.button.display};
 		justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
 		background-color: ${theme.shared.button.backgroundColor};
 		border: ${theme.shared.button.border};
 		border-radius: ${theme.shared.button.borderRadius};
-		height: ${theme.shared.button.height};
+		height: ${theme[size].height};
 		padding-left: ${theme.shared.button.paddingLeft};
 		padding-right: ${theme.shared.button.paddingRight};
 		margin-top: ${theme.shared.button.marginTop};
-		${convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
 		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
@@ -90,5 +90,12 @@ const buttonStyles = (theme, isInvalid) => {
 		${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
 	`;
 };
+const iconStyles = () => {
+	return css`
+		[data-open] & {
+			transform: rotate(180deg);
+		}
+	`;
+};
 //#endregion
-export { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles };
+export { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles };

package/dist/index.cjs

@@ -4,6 +4,7 @@ const require_button = require("./styleD/build/typescript/component/button.cjs")
 const require_alertBanner = require("./styleD/build/typescript/component/alertBanner.cjs");
 const require_breakpoints = require("./styleD/build/typescript/semantic/breakpoints.cjs");
 const require_avatar = require("./styleD/build/typescript/component/avatar.cjs");
+const require_badge = require("./styleD/build/typescript/component/badge.cjs");
 const require_buttonGroup = require("./styleD/build/typescript/component/buttonGroup.cjs");
 const require_byline = require("./styleD/build/typescript/component/byline.cjs");
 const require_checkbox = require("./styleD/build/typescript/component/checkbox.cjs");
@@ -49,6 +50,7 @@ exports.baseTypography = require_typography$1.baseTypography;
 exports.componentAlertBanner = require_alertBanner.componentAlertBanner;
 exports.componentAutocomplete = require_autocomplete.componentAutocomplete;
 exports.componentAvatar = require_avatar.componentAvatar;
+exports.componentBadge = require_badge.componentBadge;
 exports.componentButton = require_button.componentButton;
 exports.componentButtonGroup = require_buttonGroup.componentButtonGroup;
 exports.componentByline = require_byline.componentByline;

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
 import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.cjs";
 import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.cjs";
 import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.cjs";
+import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.cjs";
 import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.cjs";
 import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.cjs";
 import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.cjs";
@@ -40,4 +41,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
 import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.js";
 import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
 import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.js";
+import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.js";
 import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
 import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.js";
 import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.js";
@@ -40,4 +41,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -3,6 +3,7 @@ import { componentButton } from "./styleD/build/typescript/component/button.js";
 import { componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
 import { semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.js";
 import { componentAvatar } from "./styleD/build/typescript/component/avatar.js";
+import { componentBadge } from "./styleD/build/typescript/component/badge.js";
 import { componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
 import { componentByline } from "./styleD/build/typescript/component/byline.js";
 import { componentCheckbox } from "./styleD/build/typescript/component/checkbox.js";
@@ -40,4 +41,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/styleD/build/css/component/badge.css

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-badge-shared-display: inline-flex;
+	--component-badge-shared-align-items: center;
+	--component-badge-shared-justify-content: center;
+	--component-badge-size-md-padding-top: 4px;
+	--component-badge-size-md-padding-right: 12px;
+	--component-badge-size-md-padding-bottom: 4px;
+	--component-badge-size-md-padding-left: 12px;
+	--component-badge-size-md-weight-strong-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-badge-size-md-weight-strong-typography-letter-spacing: -0.03125rem;
+	--component-badge-size-md-weight-strong-typography-font-width: 95;
+	--component-badge-size-md-weight-light-typography-font: normal 460 1rem/1.3
+		'Open Sans';
+	--component-badge-size-md-weight-light-typography-letter-spacing: 0rem;
+	--component-badge-size-md-weight-light-typography-font-width: 95;
+	--component-badge-size-sm-padding-top: 4px;
+	--component-badge-size-sm-padding-right: 8px;
+	--component-badge-size-sm-padding-bottom: 4px;
+	--component-badge-size-sm-padding-left: 8px;
+	--component-badge-size-sm-weight-strong-typography-font: normal 700
+		0.875rem/1.15 'Open Sans';
+	--component-badge-size-sm-weight-strong-typography-letter-spacing: -0.0125rem;
+	--component-badge-size-sm-weight-strong-typography-font-width: 95;
+	--component-badge-size-sm-weight-light-typography-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--component-badge-size-sm-weight-light-typography-letter-spacing: 0rem;
+	--component-badge-size-sm-weight-light-typography-font-width: 95;
+	--component-badge-size-xs-padding-top: 1px;
+	--component-badge-size-xs-padding-right: 6px;
+	--component-badge-size-xs-padding-bottom: 3px;
+	--component-badge-size-xs-padding-left: 6px;
+	--component-badge-size-xs-weight-strong-typography-font: normal 700
+		0.75rem/1.15 'Open Sans';
+	--component-badge-size-xs-weight-strong-typography-letter-spacing: 0rem;
+	--component-badge-size-xs-weight-strong-typography-font-width: 95;
+	--component-badge-size-xs-weight-light-typography-font: normal 460 0.75rem/1.3
+		'Open Sans';
+	--component-badge-size-xs-weight-light-typography-letter-spacing: 0rem;
+	--component-badge-size-xs-weight-light-typography-font-width: 95;
+	--component-badge-color-green-weight-strong-background: #aed2a6;
+	--component-badge-color-green-weight-strong-color: #000000;
+	--component-badge-color-green-weight-light-background: #cde4c9;
+	--component-badge-color-green-weight-light-color: #24491d;
+	--component-badge-color-yellow-weight-strong-background: #f1c21b;
+	--component-badge-color-yellow-weight-strong-color: #000000;
+	--component-badge-color-yellow-weight-light-background: #ffedac;
+	--component-badge-color-yellow-weight-light-color: #5b4a0b;
+	--component-badge-color-grey-weight-strong-background: #dcdcdc;
+	--component-badge-color-grey-weight-strong-color: #000000;
+	--component-badge-color-grey-weight-light-background: #dcdcdc;
+	--component-badge-color-grey-weight-light-color: #000000;
+	--component-badge-color-orange-weight-strong-background: #fac7a1;
+	--component-badge-color-orange-weight-strong-color: #000000;
+	--component-badge-color-orange-weight-light-background: #fcddc6;
+	--component-badge-color-orange-weight-light-color: #693c16;
+	--component-badge-color-warm-purple-weight-strong-background: #dac3e8;
+	--component-badge-color-warm-purple-weight-strong-color: #000000;
+	--component-badge-color-warm-purple-weight-light-background: #dac3e8;
+	--component-badge-color-warm-purple-weight-light-color: #381350;
+	--component-badge-color-red-weight-strong-background: #eea198;
+	--component-badge-color-red-weight-strong-color: #000000;
+	--component-badge-color-red-weight-light-background: #f5c6c0;
+	--component-badge-color-red-weight-light-color: #65170e;
+}

package/dist/styleD/build/css/component/select.css

@@ -16,14 +16,9 @@
 	--component-select-shared-button-background-color: #ffffff;
 	--component-select-shared-button-border: 0.0625rem solid #545454;
 	--component-select-shared-button-border-radius: 0.25rem;
-	--component-select-shared-button-height: 2.5rem;
 	--component-select-shared-button-padding-left: 0.75rem;
 	--component-select-shared-button-padding-right: 0.25rem;
-	--component-select-shared-button-color: #545454;
-	--component-select-shared-button-typography-font: normal 460 1rem/1.3
-		'Open Sans';
-	--component-select-shared-button-typography-letter-spacing: 0rem;
-	--component-select-shared-button-typography-font-width: 95;
+	--component-select-shared-button-color: #000000;
 	--component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
 	--component-select-shared-button-focused-outline-offset: 0.125rem;
 	--component-select-shared-button-disabled-background-color: #ffffff;
@@ -38,12 +33,16 @@
 	--component-select-shared-option-focused-outline: 0.125rem solid #0072a9;
 	--component-select-shared-option-focused-outline-offset: 0;
 	--component-select-shared-option-focused-background-color: inherit;
-	--component-select-shared-list-box-typography-font: normal 460 1rem/1.3
-		'Open Sans';
-	--component-select-shared-list-box-typography-letter-spacing: 0rem;
-	--component-select-shared-list-box-typography-font-width: 95;
 	--component-select-shared-list-box-border: 0.0625rem solid #cccccc;
 	--component-select-shared-list-box-background-color: #ffffff;
 	--component-select-shared-list-box-shadow: 0 0.125rem 0.375rem 0
 		rgb(0% 0% 0% / 0.3);
+	--component-select-sm-height: 2rem;
+	--component-select-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-select-sm-typography-letter-spacing: 0rem;
+	--component-select-sm-typography-font-width: 95;
+	--component-select-md-height: 2.5rem;
+	--component-select-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-select-md-typography-letter-spacing: 0rem;
+	--component-select-md-typography-font-width: 95;
 }