@hashicorp/mds-react 0.9.0

package/dist/components/dropdown/list-item/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ninterface ListItemTitleProps\n\textends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {\n\ttext: string\n}\n\nconst ListItemTitle = ({ text, ...rest }: ListItemTitleProps) => {\n\treturn (\n\t\t<li className={classNames(s['list-item'], s.title)} {...rest}>\n\t\t\t{text}\n\t\t</li>\n\t)\n}\n\nListItemTitle.displayName = 'Dropdown.ListItem.Title'\n\nexport type { ListItemTitleProps }\nexport { ListItemTitle }\n"],"names":["ListItemTitle","text","rest","jsx","classNames","s"],"mappings":";;;AASA,MAAMA,IAAgB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAEhC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,KAAK,GAAI,GAAGH,GACtD,UAAAD,EAAA,CACF;AAIFD,EAAc,cAAc;"}

package/dist/components/dropdown/styles.module.css

@@ -0,0 +1,74 @@
+.width-full {
+	width: 100%;
+	max-width: 100%;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	width: max-content; /* notice: this is important because being in a position absolute means the layout algorithm assigns a width of 0 and this impacts on the flex algorithm of the children (in some cases they don't use the full width) */
+	min-width: 200px;
+	max-width: 400px;
+	background-color: var(--mds-color-surface-primary);
+	border-radius: 6px;
+	box-shadow: var(--mds-surface-high-box-shadow);
+}
+
+.content-fixed-width {
+	min-width: initial;
+	max-width: initial;
+}
+
+.content-position-bottom-right,
+.content-position-right {
+	position: absolute;
+	top: calc(100% + 4px);
+	right: 0;
+	z-index: 3;
+}
+
+.content-position-bottom-left,
+.content-position-left {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	z-index: 3;
+}
+
+.content-position-top-right {
+	position: absolute;
+	right: 0;
+	bottom: calc(100% + 4px);
+	z-index: 3;
+}
+
+.content-position-top-left {
+	position: absolute;
+	bottom: calc(100% + 4px);
+	left: 0;
+	z-index: 3;
+}
+
+.list {
+	flex: 1 1 auto;
+	margin: 0;
+	padding: 4px 0;
+	overflow-y: auto;
+	list-style: none;
+	overscroll-behavior: contain;
+}
+
+.header,
+.footer {
+	position: relative;
+	flex: none;
+	padding: 8px;
+}
+
+.header-with-divider {
+	border-bottom: 1px solid var(--mds-color-border-primary);
+}
+
+.footer-with-divider {
+	border-top: 1px solid var(--mds-color-border-primary);
+}

package/dist/components/dropdown/styles.module.css.js

@@ -0,0 +1,24 @@
+const t = "content__L3Jzb", o = "list__vHKnu", i = "header__FQALL", n = "footer__X0WK4", e = {
+  "width-full": "width-full__yhNyZ",
+  content: t,
+  "content-fixed-width": "content-fixed-width__QTWZ3",
+  "content-position-bottom-right": "content-position-bottom-right__7p2zs",
+  "content-position-right": "content-position-right__LV4dD",
+  "content-position-bottom-left": "content-position-bottom-left__ihVMS",
+  "content-position-left": "content-position-left__ICQX2",
+  "content-position-top-right": "content-position-top-right__xbinW",
+  "content-position-top-left": "content-position-top-left__AR6-v",
+  list: o,
+  header: i,
+  footer: n,
+  "header-with-divider": "header-with-divider__hHDYL",
+  "footer-with-divider": "footer-with-divider__TqV8J"
+};
+export {
+  t as content,
+  e as default,
+  n as footer,
+  i as header,
+  o as list
+};
+//# sourceMappingURL=styles.module.css.js.map

package/dist/components/dropdown/styles.module.css.js.map

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

package/dist/components/dropdown/toggle-button/index.d.ts

@@ -0,0 +1,30 @@
+import { FlightIconName } from '../../flight-icon';
+import { ButtonHTMLAttributes } from 'react';
+interface DropdownToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text of the ToggleButton. If no text value is defined, an error will be thrown.
+     */
+    text: string;
+    color?: 'primary' | 'secondary';
+    size?: 'small' | 'medium';
+    icon?: string;
+    isFullWidth?: boolean;
+    /**
+     * Displays an optional count indicator using the Badge Count component.
+     */
+    count?: string;
+    /**
+     * Displays an optional badge indicator using the Badge component.
+     */
+    badge?: string;
+    /**
+     * Appends an icon to the optional badge indicator.
+     */
+    badgeIcon?: FlightIconName;
+}
+declare const ToggleButton: {
+    ({ text, color, size, icon, isFullWidth, count, badge, badgeIcon, disabled, ...rest }: DropdownToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { DropdownToggleButtonProps };
+export { ToggleButton };

package/dist/components/dropdown/toggle-button/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import y from "classnames";
+import { Badge as v } from "../../badge/index.js";
+import { BadgeCount as B } from "../../badge-count/index.js";
+import { Toggle as T } from "../../menu-primitive/index.js";
+import { useMenuPrimitive as z } from "../../menu-primitive/use-menu-primitive.js";
+import { FlightIcon as a } from "../../flight-icon/index.js";
+import o from "./styles.module.scss.js";
+const C = ({
+  text: p,
+  color: t = "primary",
+  size: i = "medium",
+  icon: r,
+  isFullWidth: c,
+  count: n,
+  badge: m,
+  badgeIcon: d,
+  disabled: l,
+  ...g
+}) => {
+  const { isOpen: u, onClickToggle: f } = z(), s = t === "primary" || l ? "filled" : "inverted", h = i === "small" ? 12 : 16;
+  return /* @__PURE__ */ e(T, { children: /* @__PURE__ */ x(
+    "button",
+    {
+      "aria-expanded": u,
+      type: "button",
+      className: y(
+        o["toggle-button"],
+        o[`size-${i}`],
+        o[`color-${t}`],
+        {
+          [o["width-full"]]: c
+        }
+      ),
+      onClick: f,
+      disabled: l,
+      ...g,
+      children: [
+        r && /* @__PURE__ */ e(a, { name: r, size: h }),
+        /* @__PURE__ */ e("div", { className: o.text, children: p }),
+        n && /* @__PURE__ */ e(B, { text: n, size: "small", type: s }),
+        m && /* @__PURE__ */ e(v, { text: m, icon: d, size: "small", type: s }),
+        /* @__PURE__ */ e(N, {})
+      ]
+    }
+  ) });
+};
+C.displayName = "Dropdown.ToggleButton";
+const N = () => /* @__PURE__ */ e(a, { name: "chevron-down", isInlineBlock: !1 });
+export {
+  C as ToggleButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/dropdown/toggle-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { Badge } from '../../badge'\nimport { BadgeCount } from '../../badge-count'\nimport { Toggle } from '../../menu-primitive'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport type { FlightIconName } from '../../flight-icon'\nimport { FlightIcon } from '../../flight-icon'\nimport type { ButtonHTMLAttributes } from 'react'\nimport s from './styles.module.scss'\n\ninterface DropdownToggleButtonProps\n\textends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Text of the ToggleButton. If no text value is defined, an error will be thrown.\n\t */\n\ttext: string\n\tcolor?: 'primary' | 'secondary'\n\tsize?: 'small' | 'medium'\n\ticon?: string\n\tisFullWidth?: boolean\n\t/**\n\t * Displays an optional count indicator using the Badge Count component.\n\t */\n\tcount?: string\n\t/**\n\t * Displays an optional badge indicator using the Badge component.\n\t */\n\tbadge?: string\n\t/**\n\t * Appends an icon to the optional badge indicator.\n\t */\n\tbadgeIcon?: FlightIconName\n}\n\nconst ToggleButton = ({\n\ttext,\n\tcolor = 'primary',\n\tsize = 'medium',\n\ticon,\n\tisFullWidth,\n\tcount,\n\tbadge,\n\tbadgeIcon,\n\tdisabled,\n\t...rest\n}: DropdownToggleButtonProps) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\tconst badgeType = color === 'primary' || disabled ? 'filled' : 'inverted'\n\tconst iconSize = size === 'small' ? 12 : 16\n\n\treturn (\n\t\t<Toggle>\n\t\t\t<button\n\t\t\t\taria-expanded={isOpen}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['toggle-button'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\tonClick={onClickToggle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={iconSize} />}\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" type={badgeType} />}\n\t\t\t\t{badge && (\n\t\t\t\t\t<Badge text={badge} icon={badgeIcon} size=\"small\" type={badgeType} />\n\t\t\t\t)}\n\t\t\t\t<Chevron />\n\t\t\t</button>\n\t\t</Toggle>\n\t)\n}\n\nToggleButton.displayName = 'Dropdown.ToggleButton'\n\nconst Chevron = () => {\n\treturn <FlightIcon name=\"chevron-down\" isInlineBlock={false} />\n}\n\nexport type { DropdownToggleButtonProps }\nexport { ToggleButton }\n"],"names":["ToggleButton","text","color","size","icon","isFullWidth","count","badge","badgeIcon","disabled","rest","isOpen","onClickToggle","useMenuPrimitive","badgeType","iconSize","jsx","Toggle","jsxs","classNames","s","BadgeCount","Badge","Chevron","FlightIcon"],"mappings":";;;;;;;;;AAoCsB,MACrBA,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,EAAA,QAAAC,GAAA,eAAAC,EAAsB,IAAAC,EAAa,GACnCC,IAAWZ,MAAS,aAAeO,IAAA,WAAA,YAEzCM,IAAAZ,gBACE,KACA;AAAA,SAAC,gBAAAa,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,iBAAKP;AAAA,MACL,MAAA;AAAA,MAAW,WACRQ;AAAA,QACFC,EAAE,eAAc;AAAA,QAChBA,EAAE,SAAS,EAAK;AAAA,QAChBA,EAAA,SAAAlB,CAAA,EAAA;AAAA,QAAA;AAAA,UACoB,CAAAkB,EAAA,YAAA,CAAA,GAAAf;AAAA,QAErB;AAAA,MACA;AAAA,MACA,SAAAO;AAAA,MACC,UAAAH;AAAA,MAEA;MAAA,UAAA;AAAA,QAAgDL,KAChD,gBAAAY,KAAe,EAAE,MAAOZ,GAAA,MAAAW,EAAK,CAAA;AAAA,QAC7B,gBAAAC,EAAA,SAAU,WAAAI,QAAW,UAAanB,EAAK,CAAA;AAAA,QACvCK,KACA,gBAAAU,EAACK,GAAM,EAAA,MAAMf,SAAa,SAAW,MAAKQ,EAAQ,CAAA;AAAA,QAAiBP,KAEnE,gBAAAS,EAAAM,GAAQ,EAAA,MAAAf,GAAA,MAAAC,GAAA,MAAA,SAAA,MAAAM,EAAA,CAAA;AAAA,QAAA,gBAAAE,EAAAO,GAAA,CAAA,CAAA;AAAA,MAAA;AAAA;EAIb,EAAA,CAAA;AAEA;AAEAvB,gBAAsB;AACrB,MAAAuB,IAAA,MACD,gBAAAP,EAAAQ,GAAA,EAAA,MAAA,gBAAA,eAAA,GAAA,CAAA;"}

package/dist/components/dropdown/toggle-button/styles.module.scss

@@ -0,0 +1,54 @@
+@use 'styles/mixins/button' as *;
+
+.toggle-button {
+	@include hds-button();
+
+	&:focus {
+		@include hds-button-state-focus();
+	}
+
+	&:disabled,
+	&:disabled:focus,
+	&:disabled:hover {
+		@include hds-button-state-disabled();
+	}
+}
+
+.color-primary {
+	@include hds-button-color-primary();
+}
+
+.color-secondary {
+	@include hds-button-color-secondary();
+}
+
+.width-full {
+	justify-content: space-between;
+	width: 100%;
+	max-width: 100%;
+}
+
+.text {
+	text-align: left;
+	white-space: nowrap;
+}
+
+.size-small {
+	min-height: 1.75rem;
+	padding: 0.375rem 0.375rem 0.375rem 0.6875rem;
+
+	& .text {
+		font-size: 0.8125rem;
+		line-height: 0.875rem;
+	}
+}
+
+.size-medium {
+	min-height: 2.25rem;
+	padding: 0.5625rem 0.5625rem 0.5625rem 0.9375rem;
+
+	& .text {
+		font-size: 0.875rem;
+		line-height: 1rem;
+	}
+}

package/dist/components/dropdown/toggle-button/styles.module.scss.js

@@ -0,0 +1,14 @@
+const t = "text__t2BuD", o = {
+  "toggle-button": "toggle-button__0Aljq",
+  "color-primary": "color-primary__gQeWN",
+  "color-secondary": "color-secondary__PGdzj",
+  "width-full": "width-full__K1gGu",
+  text: t,
+  "size-small": "size-small__-mqBv",
+  "size-medium": "size-medium__A-yPf"
+};
+export {
+  o as default,
+  t as text
+};
+//# sourceMappingURL=styles.module.scss.js.map

package/dist/components/dropdown/toggle-button/styles.module.scss.js.map

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

package/dist/components/flight-icon/flight-icon.module.css

@@ -0,0 +1,31 @@
+.flight-icon {
+	display: block;
+}
+
+.display-inline {
+	display: inline-block;
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.loading {
+	animation: rotate 9s linear infinite;
+}
+
+.running {
+	animation: rotate 9s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.loading {
+		animation-duration: 0.7s;
+	}
+
+	.running {
+		animation-duration: 1s;
+	}
+}

package/dist/components/flight-icon/flight-icon.module.css.js

@@ -0,0 +1,12 @@
+const n = "loading__-Ng-b", i = "running__6uXP5", l = {
+  "flight-icon": "flight-icon__f6lPO",
+  "display-inline": "display-inline__ItStG",
+  loading: n,
+  running: i
+};
+export {
+  l as default,
+  n as loading,
+  i as running
+};
+//# sourceMappingURL=flight-icon.module.css.js.map

package/dist/components/flight-icon/flight-icon.module.css.js.map

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

package/dist/components/flight-icon/index.d.ts

@@ -0,0 +1,44 @@
+import { SVGProps } from 'react';
+import { IconName } from '@hashicorp/flight-icons/svg';
+declare const FLIGHT_ICON_SIZES: readonly [12, 16, 24, 32];
+type FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number];
+type FlightIconName = IconName | (string & Record<never, never>);
+interface FlightIconProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The name of the icon you wish to use. Search for existing icon
+     * names in the Icon library.
+     */
+    name: FlightIconName;
+    /**
+     * The `color` prop can be used to change the color. It works by setting
+     * the value of the icon SVG’s fill property.
+     */
+    color?: string;
+    /**
+     * The `size` prop can be used to change the size.
+     */
+    size?: FlightIconSize;
+    /**
+     * Determines whether the icon will stretch to fill the parent container.
+     * Setting it to `true` will make the icon have a height and width of 100%
+     * and a display of `block`.
+     */
+    stretched?: boolean;
+    /**
+     * Sets the `display` style for the icon. Setting it to `false` will make
+     * the icon have a display of `block`.
+     */
+    isInlineBlock?: boolean;
+    /**
+     * Use to add accessible text to standalone icons. This will also change
+     * the `aria-hidden` value to `false` instead of the default value of `true`.
+     */
+    title?: string;
+    className?: string;
+}
+declare const FlightIcon: {
+    ({ name, color, size, stretched, isInlineBlock, title, className, ...rest }: FlightIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { FlightIconProps, FlightIconSize, FlightIconName };
+export { FlightIcon, FLIGHT_ICON_SIZES };

package/dist/components/flight-icon/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as o, jsxs as u, Fragment as I } from "react/jsx-runtime";
+import e from "@hashicorp/flight-icons/svg-sprite/svg-sprite.svg";
+import $ from "classnames";
+import { useId as g } from "react";
+import s from "./flight-icon.module.css.js";
+const _ = [12, 16, 24, 32], S = {
+  12: 16,
+  16: 16,
+  24: 24,
+  32: 24
+}, d = typeof e == "string" ? e : e.src, v = ({
+  name: i,
+  color: f = "currentColor",
+  size: t = 16,
+  stretched: l = !1,
+  isInlineBlock: h = !0,
+  title: r,
+  className: a,
+  ...p
+}) => {
+  const m = g(), c = g(), n = S[t];
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      className: $(
+        s["flight-icon"],
+        `flight-icon-${i}`,
+        {
+          [s["display-inline"]]: h && !l,
+          [s.loading]: i === "loading",
+          [s.running]: i === "running"
+        },
+        a
+      ),
+      ...p,
+      "aria-hidden": r ? "false" : "true",
+      "aria-labelledby": r ? c : void 0,
+      fill: f,
+      id: m,
+      role: r ? "img" : void 0,
+      width: l ? "100%" : t,
+      height: l ? "100%" : t,
+      viewBox: `0 0 ${n} ${n}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: r ? /* @__PURE__ */ u(I, { children: [
+        /* @__PURE__ */ o("title", { id: c, children: r }),
+        /* @__PURE__ */ o("g", { role: "presentation", children: /* @__PURE__ */ o("use", { href: `${d}#flight-${i}-${n}` }) })
+      ] }) : /* @__PURE__ */ o("use", { href: `${d}#flight-${i}-${n}` })
+    }
+  );
+};
+v.displayName = "FlightIcon";
+export {
+  _ as FLIGHT_ICON_SIZES,
+  v as FlightIcon
+};
+//# sourceMappingURL=index.js.map

package/dist/components/flight-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/flight-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'\nimport classNames from 'classnames'\nimport { useId, type SVGProps } from 'react'\nimport type { IconName } from '@hashicorp/flight-icons/svg'\nimport s from './flight-icon.module.css'\n\nconst FLIGHT_ICON_SIZES = [12, 16, 24, 32] as const\ntype FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number]\n\nconst SPRITE_SIZE_MAP = {\n\t12: 16,\n\t16: 16,\n\t24: 24,\n\t32: 24,\n} as const\n\ntype FlightIconName = IconName | (string & Record<never, never>)\n\ninterface FlightIconProps extends SVGProps<SVGSVGElement> {\n\t/**\n\t * The name of the icon you wish to use. Search for existing icon\n\t * names in the Icon library.\n\t */\n\tname: FlightIconName\n\n\t/**\n\t * The `color` prop can be used to change the color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t */\n\tcolor?: string\n\n\t/**\n\t * The `size` prop can be used to change the size.\n\t */\n\tsize?: FlightIconSize\n\n\t/**\n\t * Determines whether the icon will stretch to fill the parent container.\n\t * Setting it to `true` will make the icon have a height and width of 100%\n\t * and a display of `block`.\n\t */\n\tstretched?: boolean\n\n\t/**\n\t * Sets the `display` style for the icon. Setting it to `false` will make\n\t * the icon have a display of `block`.\n\t */\n\tisInlineBlock?: boolean\n\n\t/**\n\t * Use to add accessible text to standalone icons. This will also change\n\t * the `aria-hidden` value to `false` instead of the default value of `true`.\n\t */\n\ttitle?: string\n\tclassName?: string\n}\n\n// When an SVG file is imported in Next.js, it is an object with a `src`\n// property. However, tools like Webpack and Vite default to returning a URL.\n// This runtime check allows the component to work in all of these cases.\nconst svgSpriteSrc =\n\ttypeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src\n\nconst FlightIcon = ({\n\tname,\n\tcolor = 'currentColor',\n\tsize = 16,\n\tstretched = false,\n\tisInlineBlock = true,\n\ttitle,\n\tclassName,\n\t...rest\n}: FlightIconProps) => {\n\tconst iconId = useId()\n\tconst titleId = useId()\n\n\tconst spriteSize = SPRITE_SIZE_MAP[size]\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={classNames(\n\t\t\t\ts['flight-icon'],\n\t\t\t\t`flight-icon-${name}`,\n\t\t\t\t{\n\t\t\t\t\t[s['display-inline']]: isInlineBlock && !stretched,\n\t\t\t\t\t[s['loading']]: name === 'loading',\n\t\t\t\t\t[s['running']]: name === 'running',\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\taria-hidden={title ? 'false' : 'true'}\n\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\tfill={color}\n\t\t\tid={iconId}\n\t\t\trole={title ? 'img' : undefined}\n\t\t\twidth={stretched ? '100%' : size}\n\t\t\theight={stretched ? '100%' : size}\n\t\t\tviewBox={`0 0 ${spriteSize} ${spriteSize}`}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<>\n\t\t\t\t\t<title id={titleId}>{title}</title>\n\t\t\t\t\t<g role=\"presentation\">\n\t\t\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t\t\t</g>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nFlightIcon.displayName = 'FlightIcon'\n\nexport type { FlightIconProps, FlightIconSize, FlightIconName }\nexport { FlightIcon, FLIGHT_ICON_SIZES }\n"],"names":["FLIGHT_ICON_SIZES","SPRITE_SIZE_MAP","svgSpriteSrc","svgSprite","FlightIcon","name","color","size","stretched","isInlineBlock","title","className","rest","iconId","titleId","useId","jsx","classNames","spriteSize","jsxs","Fragment"],"mappings":";;;;;;AAWA,MAAMA,IAAkB,CAAA,IAAA,IAAA,IAAA,EAAA,GACnBC,IAAA;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACL,IAAA;AA8CA,GAGMC,IAAc,OAAAC,KAAA,WAAAA,IAAAA,EAAA,KACnBC,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC,IAAA;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAMC,MAAU,GAEVC,IAAAC,EAAa,SAGlBR,CAAA;AAAA,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACF,eAAe;AAAA,QACf,eAAAZ,CAAA;AAAA,QAAA;AAAA,UAEC,CAAC,EAAE,gBAAa,CAAA,QAAS,CAAAG;AAAA,UACzB,CAAC,EAAE,OAAU,GAAGH,MAAS;AAAA,UAC1B,CAAA,EAAA,OAAA,GAAAA,MAAA;AAAA,QACA;AAAA,QACDM;AAAA,MACC;AAAA,MACD;MACA,mBAAiB,UAAQ;AAAA,MACzB,mBAAMD,IAAAI,IAAA;AAAA,MACN,MAAIR;AAAA,MACJ,IAAAO;AAAA,MACA,MAAAH,IAAO,QAAY;AAAA,MACnB,OAAAF;MACA,QAAAA,IAAgB,SAAUD;AAAA,MAC1B,SAAM,OAAAW,CAAA,IAAAA,CAAA;AAAA,MAEL,OAAA;AAAA,MAEC,UAAAR,IAAO,gBAAAS,EAAIC,GAAU,EAAA,UAAA;AAAA,QACrB,gBAAAJ,EAAC,SAAE,EAAA,IAAKF,GAAA,UACPJ;QAEF,gBAAAM,EAAA,KAEC,EAAA,MAAA,gBAAa,UAA+B,gBAAAA,EAAA,OAAU,EAAI,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,MAAA,EAAA,CAAA,IAAA,gBAAAF,EAAA,OAAA,EAAA,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA;AAAA,IAE7D;AAAA,EAEF;AAEA;;"}

package/dist/components/form/checkbox/form-checkbox.module.css

@@ -0,0 +1,88 @@
+.checkbox {
+	width: var(--mds-form-checkbox-size);
+	height: var(--mds-form-checkbox-size);
+	margin: 0;
+	padding: 0;
+	background-position: center center;
+	background-size: var(--mds-form-checkbox-background-image-size)
+		var(--mds-form-checkbox-background-image-size);
+	border-style: solid;
+	border-width: var(--mds-form-checkbox-border-width);
+	border-radius: var(--mds-form-checkbox-border-radius);
+	cursor: pointer;
+	appearance: none;
+
+	/* STATUS */
+
+	/* base (default) */
+
+	&:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-base-surface-color-default);
+		border-color: var(--mds-form-control-base-border-color-default);
+		box-shadow: var(--mds-elevation-inset-box-shadow);
+	}
+
+	&:checked {
+		background-color: var(--mds-form-control-checked-surface-color-default);
+		background-image: var(--mds-form-checkbox-background-image-data-url);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	&:indeterminate {
+		background-color: var(--mds-form-control-checked-surface-color-default);
+		background-image: var(
+			--mds-form-checkbox-background-image-data-url-indeterminate
+		);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	/* hover */
+
+	&:hover:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-base-surface-color-hover);
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	&:hover:checked,
+	&:hover:indeterminate {
+		background-color: var(--mds-form-control-checked-border-color-default);
+		border-color: var(--mds-form-control-checked-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 1px;
+	}
+
+	/* DISABLED */
+
+	&:disabled:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	&:disabled:checked {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(
+			--mds-form-checkbox-background-image-data-url-disabled
+		);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	&:disabled:indeterminate {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(
+			--mds-form-checkbox-background-image-data-url-indeterminate-disabled
+		);
+		background-repeat: no-repeat;
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+}

package/dist/components/form/checkbox/form-checkbox.module.css.js

@@ -0,0 +1,8 @@
+const c = "checkbox__7aEmD", o = {
+  checkbox: c
+};
+export {
+  c as checkbox,
+  o as default
+};
+//# sourceMappingURL=form-checkbox.module.css.js.map

package/dist/components/form/checkbox/form-checkbox.module.css.js.map

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

package/dist/components/form/checkbox/index.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, HTMLProps, ReactNode } from 'react';
+import { Fieldset } from '../fieldset';
+interface CheckboxBaseProps {
+    id?: string;
+    required?: boolean;
+    field: HTMLProps<HTMLInputElement>;
+    testingKey?: string;
+    error?: ReactNode;
+}
+declare const CheckboxBase: {
+    ({ id, required, field, testingKey, error, }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface CheckboxFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+    disabled?: boolean;
+}
+declare const CheckboxField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface CheckboxGroupRootProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+}
+declare const CheckboxGroup: {
+    Root: {
+        ({ layout, legend, helperText, error, isOptional, isRequired, children, }: CheckboxGroupRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Inner: {
+        (props: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { CheckboxGroup, CheckboxBase, CheckboxField };