@hashicorp/mds-react 0.9.0

package/dist/components/form/radio-card/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","sources":["../../../../src/components/form/radio-card/description.tsx"],"sourcesContent":["import { Text } from '../../text'\nimport s from './form-radio-card.module.css'\n\nexport default function Description({ description }: { description: string }) {\n\treturn (\n\t\t<Text.HDSBody className={s.description} size=\"100\">\n\t\t\t{description}\n\t\t</Text.HDSBody>\n\t)\n}\n"],"names":["Description","description","jsx","Text","s"],"mappings":";;;AAGA,SAAwBA,EAAY,EAAE,aAAAC,KAAwC;AAC7E,SACC,gBAAAC,EAACC,EAAK,SAAL,EAAa,WAAWC,EAAE,aAAa,MAAK,OAC3C,UAAAH,EAAA,CACF;AAEF;"}

package/dist/components/form/radio-card/form-radio-card.module.css

@@ -0,0 +1,153 @@
+/*
+* FORM > RADIO-CARD
+*/
+
+/* RadioCard Group */
+
+.radio-cards {
+	& legend {
+		margin-bottom: 12px;
+	}
+
+	& .has-fluid-width {
+		flex: 1 0 0;
+	}
+
+	& .has-fixed-width {
+		flex: 1 0 100%;
+	}
+}
+
+/* RadioCard */
+
+.radio-card {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--mds-color-surface-primary);
+	border: var(--mds-form-radiocard-border-width) solid
+		var(--mds-color-border-primary);
+	border-radius: var(--mds-form-radiocard-border-radius);
+	box-shadow: var(--mds-elevation-mid-box-shadow);
+	cursor: pointer;
+
+	/* prevent focus on the form control as it is handled at the card level */
+	& .control {
+		outline-color: transparent;
+	}
+
+	/* STATES */
+
+	&:hover {
+		box-shadow: var(--mds-elevation-high-box-shadow);
+		transition: var(--mds-form-radiocard-transition-duration);
+	}
+
+	&:focus-within {
+		border-color: var(--mds-color-focus-action-internal);
+		box-shadow: 0 0 0 3px var(--mds-color-focus-action-external);
+	}
+
+	&.checked {
+		border-color: var(--mds-color-focus-action-internal);
+
+		& .control-wrapper {
+			background-color: var(--mds-color-surface-action);
+			border-color: var(--mds-color-border-action);
+		}
+	}
+
+	&.disabled {
+		background-color: var(--mds-color-surface-interactive-disabled);
+		border-color: var(--mds-color-border-primary);
+		box-shadow: none;
+		cursor: not-allowed;
+
+		& .control-wrapper {
+			background-color: var(--mds-color-surface-interactive-disabled);
+			border-color: var(--mds-color-border-primary);
+		}
+	}
+}
+
+/* ALIGNMENT */
+
+.align-left {
+	text-align: left;
+}
+
+.align-center {
+	text-align: center;
+}
+
+/* CONTROL POSITION */
+
+.control-bottom {
+	& .control-wrapper {
+		border-top-width: var(--mds-form-radiocard-border-width);
+		border-top-style: solid;
+		border-bottom-right-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+}
+
+.control-left {
+	flex-direction: row-reverse;
+
+	& .control-wrapper {
+		display: flex;
+		align-items: center;
+		border-right-width: var(--mds-form-radiocard-border-width);
+		border-right-style: solid;
+		border-top-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+}
+
+.content {
+	flex: 1;
+	padding: var(--mds-form-radiocard-content-padding);
+}
+
+.label {
+	display: block;
+	margin: 8px 0;
+	color: var(--mds-form-label-color);
+	overflow-wrap: break-word;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	@media (max-width: 767px) {
+		font-size: var(--mds-typography-body-200-font-size);
+		line-height: var(--mds-typography-body-200-line-height);
+	}
+}
+
+.description {
+	display: block;
+	color: var(--mds-color-foreground-primary);
+}
+
+.control-wrapper {
+	padding: var(--mds-form-radiocard-control-padding);
+	background-color: var(--mds-color-surface-faint);
+	border-color: var(--mds-color-border-primary);
+}
+
+.control {
+	display: block;
+	margin: auto;
+}
+
+.badges {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: var(--mds-spacing-02);
+	margin-bottom: 12px;
+}
+
+.icon-center {
+	margin: auto;
+}

package/dist/components/form/radio-card/form-radio-card.module.css.js

@@ -0,0 +1,30 @@
+const t = "control__0w6N4", o = "checked__v5wfQ", c = "disabled__h7JVb", e = "content__IKiN7", n = "label__UR-sm", _ = "description__s8FwT", d = "badges__klktk", l = {
+  "radio-cards": "radio-cards__C4la-",
+  "has-fluid-width": "has-fluid-width__rKqOq",
+  "has-fixed-width": "has-fixed-width__AAAPW",
+  "radio-card": "radio-card__JyN2Z",
+  control: t,
+  checked: o,
+  "control-wrapper": "control-wrapper__00m5o",
+  disabled: c,
+  "align-left": "align-left__lqD3y",
+  "align-center": "align-center__ZMFAS",
+  "control-bottom": "control-bottom__UIViy",
+  "control-left": "control-left__1tHvm",
+  content: e,
+  label: n,
+  description: _,
+  badges: d,
+  "icon-center": "icon-center__zJMDY"
+};
+export {
+  d as badges,
+  o as checked,
+  e as content,
+  t as control,
+  l as default,
+  _ as description,
+  c as disabled,
+  n as label
+};
+//# sourceMappingURL=form-radio-card.module.css.js.map

package/dist/components/form/radio-card/form-radio-card.module.css.js.map

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

package/dist/components/form/radio-card/group.d.ts

@@ -0,0 +1,11 @@
+import { Fieldset } from '../fieldset';
+import { ComponentProps, ReactNode } from 'react';
+export interface RadioCardGroupProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+    legend: ReactNode;
+}
+declare const RadioCardGroup: {
+    ({ layout, isRequired, isOptional, error, legend, helperText, children, ...rest }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RadioCardGroup };

package/dist/components/form/radio-card/group.js

@@ -0,0 +1,31 @@
+import { jsx as p } from "react/jsx-runtime";
+import { Fieldset as e } from "../fieldset/index.js";
+import l from "./form-radio-card.module.css.js";
+const c = ({
+  layout: r = "horizontal",
+  isRequired: o,
+  isOptional: a,
+  error: i,
+  legend: d,
+  helperText: m,
+  children: s,
+  ...t
+}) => /* @__PURE__ */ p(
+  e,
+  {
+    className: l["radio-cards"],
+    layout: r,
+    legend: d,
+    isOptional: a,
+    isRequired: o,
+    helperText: m,
+    error: i,
+    ...t,
+    children: s
+  }
+);
+c.displayName = "RadioCardGroup";
+export {
+  c as RadioCardGroup
+};
+//# sourceMappingURL=group.js.map

package/dist/components/form/radio-card/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sources":["../../../../src/components/form/radio-card/group.tsx"],"sourcesContent":["import { Fieldset } from '../fieldset'\nimport type { ComponentProps, ReactNode } from 'react'\nimport s from './form-radio-card.module.css'\n\nexport interface RadioCardGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n\tlegend: ReactNode\n}\n\nconst RadioCardGroup = ({\n\tlayout = 'horizontal',\n\tisRequired,\n\tisOptional,\n\terror,\n\tlegend,\n\thelperText,\n\tchildren,\n\t...rest\n}: RadioCardGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tclassName={s['radio-cards']}\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioCardGroup.displayName = 'RadioCardGroup'\n\nexport { RadioCardGroup }\n"],"names":["RadioCardGroup","layout","isRequired","isOptional","error","legend","helperText","children","rest","jsx","Fieldset","s"],"mappings":";;;AASA,MAAMA,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAE,aAAa;AAAA,IAC1B,QAAAV;AAAA,IACA,QAAAI;AAAA,IACA,YAAAF;AAAA,IACA,YAAAD;AAAA,IACA,YAAAI;AAAA,IACA,OAAAF;AAAA,IACC,GAAGI;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;AAKJP,EAAe,cAAc;"}

package/dist/components/form/radio-card/index.d.ts

@@ -0,0 +1,48 @@
+import { RadioCardGroup } from './group';
+import { HTMLProps, ReactNode } from 'react';
+import { BadgeProps } from '../../badge';
+export declare const DEFAULT_CONTROL_POSITION = "bottom";
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const CONTROL_POSITIONS: readonly ["bottom", "left"];
+export declare const ALIGNMENTS: readonly ["left", "center"];
+interface RadioCardProps {
+    /**
+     * Sets the position of the form control in relation to the Radio Card content.
+     */
+    controlPosition?: (typeof CONTROL_POSITIONS)[number];
+    /**
+     * Sets the alignment of the Radio Card content.
+     */
+    alignment?: (typeof ALIGNMENTS)[number];
+    /**
+     * any valid CSS width (%, vw, etc)
+     * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.
+     * You can use it to define the number of Radio Cards shown per row (for example `25%`
+     * will result in 4 cards).
+     */
+    maxWidth?: `${number}px` | `${number}vw` | `${number}%`;
+    /**
+     * Renders <Badge /> component.
+     */
+    badges?: Array<BadgeProps>;
+    /**
+     * The name of the flight icon to render.
+     */
+    icon?: string;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The description text.
+     */
+    description?: string;
+    children?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    id?: string;
+}
+declare const RadioCard: {
+    ({ controlPosition, alignment, maxWidth, field, icon, label, description, badges, children, }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { RadioCardGroup, RadioCard };

package/dist/components/form/radio-card/index.js

@@ -0,0 +1,67 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { useId as h, createElement as I } from "react";
+import p from "classnames";
+import { Badge as L } from "../../badge/index.js";
+import { FlightIcon as T } from "../../flight-icon/index.js";
+import { RadioBase as k } from "../radio/index.js";
+import u from "./label.js";
+import E from "./description.js";
+import e from "./form-radio-card.module.css.js";
+const F = "bottom", O = "left", R = ({
+  controlPosition: N = F,
+  alignment: a = O,
+  maxWidth: r,
+  field: s,
+  icon: t,
+  label: c,
+  description: l,
+  badges: m,
+  children: f
+}) => {
+  const i = h();
+  return /* @__PURE__ */ d(
+    "label",
+    {
+      htmlFor: i,
+      style: { maxWidth: r },
+      className: p(
+        e["radio-card"],
+        e[`control-${N}`],
+        e[`align-${a}`],
+        {
+          [e.checked]: s.checked,
+          [e.disabled]: s.disabled,
+          [e["has-fixed-width"]]: r,
+          [e["has-fluid-width"]]: !r
+        }
+      ),
+      children: [
+        /* @__PURE__ */ d("span", { className: e.content, children: [
+          t && /* @__PURE__ */ o(
+            T,
+            {
+              name: t,
+              size: 24,
+              isInlineBlock: !1,
+              className: p({
+                [e["icon-center"]]: a === "center"
+              })
+            }
+          ),
+          c && /* @__PURE__ */ o(u, { label: c }),
+          m?.length ? /* @__PURE__ */ o("div", { className: e.badges, children: m.map((n) => /* @__PURE__ */ I(L, { ...n, key: n.text })) }) : null,
+          l && /* @__PURE__ */ o(E, { description: l }),
+          f
+        ] }),
+        /* @__PURE__ */ o("span", { className: e["control-wrapper"], children: /* @__PURE__ */ o(k, { className: e.control, id: i, field: s }) })
+      ]
+    }
+  );
+};
+R.displayName = "RadioCard";
+export {
+  O as DEFAULT_ALIGNMENT,
+  F as DEFAULT_CONTROL_POSITION,
+  R as RadioCard
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/radio-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio-card/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Badge } from '../../badge'\nimport { FlightIcon } from '../../flight-icon'\nimport { RadioBase } from '../radio'\nimport { RadioCardGroup } from './group'\nimport Label from './label'\nimport Description from './description'\nimport type { HTMLProps, ReactNode } from 'react'\nimport type { BadgeProps } from '../../badge'\nimport s from './form-radio-card.module.css'\n\nexport const DEFAULT_CONTROL_POSITION = 'bottom'\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const CONTROL_POSITIONS = ['bottom', 'left'] as const\nexport const ALIGNMENTS = ['left', 'center'] as const\n\ninterface RadioCardProps {\n\t/**\n\t * Sets the position of the form control in relation to the Radio Card content.\n\t */\n\tcontrolPosition?: (typeof CONTROL_POSITIONS)[number]\n\t/**\n\t * Sets the alignment of the Radio Card content.\n\t */\n\talignment?: (typeof ALIGNMENTS)[number]\n\t/**\n\t * any valid CSS width (%, vw, etc)\n\t * This parameter will set the width of the card, wrapping cards on multiple rows if necessary.\n\t * You can use it to define the number of Radio Cards shown per row (for example `25%`\n\t * will result in 4 cards).\n\t */\n\tmaxWidth?: `${number}px` | `${number}vw` | `${number}%`\n\t/**\n\t * Renders <Badge /> component.\n\t */\n\tbadges?: Array<BadgeProps>\n\t/**\n\t * The name of the flight icon to render.\n\t */\n\ticon?: string\n\t/**\n\t * The label text.\n\t */\n\tlabel?: string\n\t/**\n\t * The description text.\n\t */\n\tdescription?: string\n\t/*\n\t * Optional children rendered below the label and description (if provided).\n\t */\n\tchildren?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tid?: string\n}\n\nconst RadioCard = ({\n\tcontrolPosition = DEFAULT_CONTROL_POSITION,\n\talignment = DEFAULT_ALIGNMENT,\n\tmaxWidth,\n\tfield,\n\ticon,\n\tlabel,\n\tdescription,\n\tbadges,\n\tchildren,\n}: RadioCardProps) => {\n\tconst generatedId = useId()\n\n\treturn (\n\t\t<label\n\t\t\thtmlFor={generatedId}\n\t\t\tstyle={{ maxWidth }}\n\t\t\tclassName={classNames(\n\t\t\t\ts['radio-card'],\n\t\t\t\ts[`control-${controlPosition}`],\n\t\t\t\ts[`align-${alignment}`],\n\t\t\t\t{\n\t\t\t\t\t[s['checked']]: field.checked,\n\t\t\t\t\t[s['disabled']]: field.disabled,\n\t\t\t\t\t[s['has-fixed-width']]: maxWidth,\n\t\t\t\t\t[s['has-fluid-width']]: !maxWidth,\n\t\t\t\t}\n\t\t\t)}\n\t\t>\n\t\t\t<span className={s['content']}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<FlightIcon\n\t\t\t\t\t\tname={icon}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tisInlineBlock={false}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[s['icon-center']]: alignment === 'center',\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{label && <Label label={label} />}\n\t\t\t\t{badges?.length ? (\n\t\t\t\t\t<div className={s.badges}>\n\t\t\t\t\t\t{badges.map((badge) => (\n\t\t\t\t\t\t\t<Badge {...badge} key={badge.text} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{description && <Description description={description} />}\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t<span className={s['control-wrapper']}>\n\t\t\t\t<RadioBase className={s.control} id={generatedId} field={field} />\n\t\t\t</span>\n\t\t</label>\n\t)\n}\n\nRadioCard.displayName = 'RadioCard'\n\nexport { RadioCardGroup, RadioCard }\n"],"names":["DEFAULT_CONTROL_POSITION","DEFAULT_ALIGNMENT","RadioCard","controlPosition","alignment","maxWidth","field","icon","label","description","badges","children","generatedId","useId","jsxs","classNames","s","jsx","FlightIcon","Label","badge","createElement","Badge","Description","RadioBase"],"mappings":";;;;;;;;;AAYO,MAAMA,IAA2B,UAC3BC,IAAoB,QA4C3BC,IAAY,CAAC;AAAA,EAClB,iBAAAC,IAAkBH;AAAA,EAClB,WAAAI,IAAYH;AAAA,EACZ,UAAAI;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACD,MAAsB;AACrB,QAAMC,IAAcC,EAAA;AAEpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAASF;AAAA,MACT,OAAO,EAAE,UAAAP,EAAA;AAAA,MACT,WAAWU;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,WAAWb,CAAe,EAAE;AAAA,QAC9Ba,EAAE,SAASZ,CAAS,EAAE;AAAA,QACtB;AAAA,UACC,CAACY,EAAE,OAAU,GAAGV,EAAM;AAAA,UACtB,CAACU,EAAE,QAAW,GAAGV,EAAM;AAAA,UACvB,CAACU,EAAE,iBAAiB,CAAC,GAAGX;AAAA,UACxB,CAACW,EAAE,iBAAiB,CAAC,GAAG,CAACX;AAAA,QAAA;AAAA,MAC1B;AAAA,MAGD,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAWE,EAAE,SACjB,UAAA;AAAA,UAAAT,KACA,gBAAAU;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,MAAMX;AAAA,cACN,MAAM;AAAA,cACN,eAAe;AAAA,cACf,WAAWQ,EAAW;AAAA,gBACrB,CAACC,EAAE,aAAa,CAAC,GAAGZ,MAAc;AAAA,cAAA,CAClC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGFI,KAAS,gBAAAS,EAACE,GAAA,EAAM,OAAAX,EAAA,CAAc;AAAA,UAC9BE,GAAQ,SACR,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAE,QAChB,YAAO,IAAI,CAACI,MACZ,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAO,KAAKA,EAAM,KAAA,CAAM,CACnC,GACF,IACG;AAAA,UACHX,KAAe,gBAAAQ,EAACM,GAAA,EAAY,aAAAd,EAAA,CAA0B;AAAA,UACtDE;AAAA,QAAA,GACF;AAAA,QACA,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAE,iBAAiB,GACnC,UAAA,gBAAAC,EAACO,GAAA,EAAU,WAAWR,EAAE,SAAS,IAAIJ,GAAa,OAAAN,GAAc,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAJ,EAAU,cAAc;"}

package/dist/components/form/radio-card/label.d.ts

@@ -0,0 +1,3 @@
+export default function Label({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/radio-card/label.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Text as i } from "../../text/index.js";
+import o from "./form-radio-card.module.css.js";
+function a({ label: e }) {
+  return /* @__PURE__ */ r(i.DisplayExpressive, { className: o.label, size: "200", weight: "bold", children: e });
+}
+export {
+  a as default
+};
+//# sourceMappingURL=label.js.map

package/dist/components/form/radio-card/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/components/form/radio-card/label.tsx"],"sourcesContent":["import { Text } from '../../text'\nimport s from './form-radio-card.module.css'\n\nexport default function Label({ label }: { label: string }) {\n\treturn (\n\t\t<Text.DisplayExpressive className={s.label} size=\"200\" weight=\"bold\">\n\t\t\t{label}\n\t\t</Text.DisplayExpressive>\n\t)\n}\n"],"names":["Label","label","jsx","Text","s"],"mappings":";;;AAGA,SAAwBA,EAAM,EAAE,OAAAC,KAA4B;AAC3D,SACC,gBAAAC,EAACC,EAAK,mBAAL,EAAuB,WAAWC,EAAE,OAAO,MAAK,OAAM,QAAO,QAC5D,UAAAH,EAAA,CACF;AAEF;"}

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

@@ -0,0 +1,89 @@
+/*
+* FORM > SELECT
+*/
+
+/* "BASE" CONTROL */
+
+.select {
+	composes: mds-typography-font-weight-regular from global;
+	max-width: 100%;
+	padding: var(--mds-padding);
+	padding-right: calc(
+		var(--mds-padding) + 24px
+	); /* extra space for the icon */
+
+	color: var(--mds-form-control-base-foreground-value-color);
+	background-color: var(--mds-form-control-base-surface-color-default);
+	background-image: var(--mds-form-select-background-image-data-url);
+	background-repeat: no-repeat;
+	background-position: right
+		var(--mds-form-select-background-image-position-right-x) top
+		var(--mds-form-select-background-image-position-top-y); /* we have to take into account the border */
+
+	background-size: var(--mds-form-select-background-image-size)
+		var(--mds-form-select-background-image-size);
+	border: var(--mds-form-control-border-width) solid
+		var(--mds-form-control-base-border-color-default);
+	border-radius: var(--mds-form-control-border-radius);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+	appearance: none;
+
+	/* STATUS */
+
+	&:hover {
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		border-color: var(--mds-color-focus-action-internal);
+
+		/* Notice: Safari doesn't apply a rounded border */
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 0;
+	}
+
+	/* DISABLED */
+
+	&:disabled {
+		color: var(--mds-form-control-disabled-foreground-color);
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(
+			--mds-form-select-background-image-data-url-disabled
+		);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	/* INVALID */
+
+	&.invalid {
+		border-color: var(--mds-form-control-invalid-border-color-default);
+
+		&:hover {
+			border-color: var(--mds-form-control-invalid-border-color-hover);
+		}
+
+		&:focus {
+			border-color: var(--mds-color-focus-critical-internal);
+			outline-color: var(--mds-color-focus-critical-external);
+		}
+	}
+}
+
+.medium {
+	composes: mds-typography-legacy-body-200 from global;
+
+	--mds-padding: var(--mds-form-control-padding);
+}
+
+.large {
+	composes: mds-typography-legacy-body-300 from global;
+
+	--mds-padding: calc(var(--mds-form-control-padding) + 4px);
+
+	min-height: 3rem;
+	background-position: right 11px top 16px; /* we have to take into account the border */
+}

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

@@ -0,0 +1,14 @@
+const e = "select__hODF3 mds-typography-font-weight-regular", t = "invalid__tTJro", a = "medium__XQMJY mds-typography-legacy-body-200", l = "large__t1lgT mds-typography-legacy-body-300", o = {
+  select: e,
+  invalid: t,
+  medium: a,
+  large: l
+};
+export {
+  o as default,
+  t as invalid,
+  l as large,
+  a as medium,
+  e as select
+};
+//# sourceMappingURL=form-select.module.css.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { HTMLProps, ReactNode } from 'react';
+interface SelectFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLSelectElement>;
+    children: ReactNode;
+    className?: string;
+    size?: 'medium' | 'large';
+    disabled?: boolean;
+}
+declare const SelectField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, children, className, size, ...rest }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectField };

package/dist/components/form/select/index.js

@@ -0,0 +1,79 @@
+import { jsx as m } from "react/jsx-runtime";
+import y from "classnames";
+import { useId as F } from "react";
+import { Field as I } from "../field/index.js";
+import a from "./form-select.module.css.js";
+const N = ({
+  isInvalid: t,
+  isLoading: n,
+  className: e,
+  id: r,
+  field: i,
+  children: o,
+  size: s,
+  error: d,
+  ...l
+}) => /* @__PURE__ */ m(
+  "select",
+  {
+    id: r,
+    className: y(
+      a.select,
+      a[s],
+      {
+        [a.invalid]: t
+      },
+      e
+    ),
+    "aria-describedby": `${d ? "error" : "helper-text"}-${r}`,
+    ...i,
+    ...l,
+    children: o
+  }
+), S = ({
+  isInvalid: t,
+  isLoading: n,
+  isRequired: e,
+  isOptional: r,
+  id: i,
+  label: o,
+  helperText: s,
+  error: d,
+  field: l,
+  children: p,
+  className: u,
+  size: f = "medium",
+  ...g
+}) => {
+  const x = F(), c = i ?? x;
+  return /* @__PURE__ */ m(
+    I,
+    {
+      label: o,
+      helperText: s,
+      error: d,
+      isRequired: e,
+      isOptional: r,
+      id: c,
+      layout: "vertical",
+      className: u,
+      children: /* @__PURE__ */ m(
+        N,
+        {
+          id: c,
+          isInvalid: t,
+          required: e,
+          field: l,
+          size: f,
+          ...g,
+          children: p
+        }
+      )
+    }
+  );
+};
+S.displayName = "SelectField";
+export {
+  S as SelectField
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAqBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}