@drivenets/design-system 0.0.2 → 0.0.3

package/dist/components/ds-form-control/ds-form-control.cjs

@@ -0,0 +1,94 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_text_input = require('../ds-text-input/ds-text-input.cjs');
+require('../ds-text-input/index.cjs');
+const require_ds_select = require('../ds-select/ds-select.cjs');
+require('../ds-select/index.cjs');
+const require_ds_textarea = require('../ds-textarea/ds-textarea.cjs');
+require('../ds-textarea/index.cjs');
+const require_ds_number_input = require('../ds-number-input/ds-number-input.cjs');
+require('../ds-number-input/index.cjs');
+const require_ds_password_input = require('../ds-password-input/ds-password-input.cjs');
+require('../ds-password-input/index.cjs');
+const require_ds_form_control_module = require('./ds-form-control.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+
+//#region src/components/ds-form-control/ds-form-control.tsx
+const FormControlContext = (0, react.createContext)(null);
+const useFormControlContext = () => {
+	const context = (0, react.useContext)(FormControlContext);
+	if (!context) throw new Error("useFormControlContext must be used within DsFormControl");
+	return context;
+};
+/**
+* HOC that automatically injects the controlId from form control context
+* into any component that expects an 'id' prop.
+*
+* @param Component - The component to wrap with form control context
+* @returns A new component that automatically receives the controlId
+*/
+const controlify = (Component) => {
+	return function WrappedFormControl(props) {
+		const { controlId } = useFormControlContext();
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			id: controlId,
+			...props
+		});
+	};
+};
+const DsFormControlDescription = ({ children, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)(require_ds_form_control_module.default.description, className),
+		children
+	});
+};
+const DsFormControl = ({ id, status, label, required = false, slots, message, messageIcon = "info", className, style, children }) => {
+	const generatedId = (0, react.useId)();
+	const controlId = id || generatedId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlContext.Provider, {
+		value: { controlId },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(require_ds_form_control_module.default.container, status && message && require_ds_form_control_module.default[status], className),
+			style,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_ds_form_control_module.default.labelContainer,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: controlId,
+						className: (0, classnames.default)(require_ds_form_control_module.default.label, { [require_ds_form_control_module.default.required]: required }),
+						children: label
+					}), slots?.endAdornment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: require_ds_form_control_module.default.endAdornment,
+						children: slots.endAdornment
+					})]
+				}),
+				children,
+				message && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_ds_form_control_module.default.message,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: messageIcon,
+						size: "tiny",
+						filled: true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_ds_form_control_module.default.messageText,
+						children: message
+					})]
+				})
+			]
+		})
+	});
+};
+DsFormControl.TextInput = controlify(require_ds_text_input.default);
+DsFormControl.NumberInput = controlify(require_ds_number_input.default);
+DsFormControl.PasswordInput = controlify(require_ds_password_input.default);
+DsFormControl.Textarea = controlify(require_ds_textarea.default);
+DsFormControl.Select = controlify(require_ds_select.default);
+DsFormControl.Description = DsFormControlDescription;
+var ds_form_control_default = DsFormControl;
+
+//#endregion
+exports.default = ds_form_control_default;

package/dist/components/ds-form-control/ds-form-control.d.cts

@@ -0,0 +1,33 @@
+import { DsTextInputProps } from "../ds-text-input/ds-text-input.types.cjs";
+import { DsNumberInputProps } from "../ds-number-input/ds-number-input.types.cjs";
+import { DsPasswordInputProps } from "../ds-password-input/ds-password-input.types.cjs";
+import { DsTextareaProps } from "../ds-textarea/ds-textarea.types.cjs";
+import { DsSelectProps } from "../ds-select/ds-select.types.cjs";
+import { DsFormControlDescriptionProps, DsFormControlProps } from "./ds-form-control.types.cjs";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/ds-form-control/ds-form-control.d.ts
+declare const DsFormControl: {
+  ({
+    id,
+    status,
+    label,
+    required,
+    slots,
+    message,
+    messageIcon,
+    className,
+    style,
+    children
+  }: DsFormControlProps): react_jsx_runtime39.JSX.Element;
+  TextInput: (props: DsTextInputProps) => react_jsx_runtime39.JSX.Element;
+  NumberInput: (props: DsNumberInputProps) => react_jsx_runtime39.JSX.Element;
+  PasswordInput: (props: DsPasswordInputProps) => react_jsx_runtime39.JSX.Element;
+  Textarea: (props: DsTextareaProps) => react_jsx_runtime39.JSX.Element;
+  Select: (props: DsSelectProps) => react_jsx_runtime39.JSX.Element;
+  Description: React.FC<DsFormControlDescriptionProps>;
+};
+//#endregion
+export { DsFormControl };
+//# sourceMappingURL=ds-form-control.d.cts.map

package/dist/components/ds-form-control/ds-form-control.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.d.cts","names":[],"sources":["../../../src/components/ds-form-control/ds-form-control.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;cAwCM;;;;;;;;;;;;KAWH,qBAAkB,mBAAA,CAAA,GAAA,CAAA;qBAAA;;;;;;AA1C4E,CAAA"}

package/dist/components/ds-form-control/ds-form-control.d.ts

@@ -0,0 +1,38 @@
+import { DsTextInputProps } from "../ds-text-input/ds-text-input.types.js";
+import "../ds-text-input/index.js";
+import { DsNumberInputProps } from "../ds-number-input/ds-number-input.types.js";
+import "../ds-number-input/index.js";
+import { DsPasswordInputProps } from "../ds-password-input/ds-password-input.types.js";
+import "../ds-password-input/index.js";
+import { DsTextareaProps } from "../ds-textarea/ds-textarea.types.js";
+import "../ds-textarea/index.js";
+import { DsSelectProps } from "../ds-select/ds-select.types.js";
+import "../ds-select/index.js";
+import { DsFormControlDescriptionProps, DsFormControlProps } from "./ds-form-control.types.js";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/ds-form-control/ds-form-control.d.ts
+declare const DsFormControl: {
+  ({
+    id,
+    status,
+    label,
+    required,
+    slots,
+    message,
+    messageIcon,
+    className,
+    style,
+    children
+  }: DsFormControlProps): react_jsx_runtime12.JSX.Element;
+  TextInput: (props: DsTextInputProps) => react_jsx_runtime12.JSX.Element;
+  NumberInput: (props: DsNumberInputProps) => react_jsx_runtime12.JSX.Element;
+  PasswordInput: (props: DsPasswordInputProps) => react_jsx_runtime12.JSX.Element;
+  Textarea: (props: DsTextareaProps) => react_jsx_runtime12.JSX.Element;
+  Select: (props: DsSelectProps) => react_jsx_runtime12.JSX.Element;
+  Description: React.FC<DsFormControlDescriptionProps>;
+};
+//#endregion
+export { DsFormControl };
+//# sourceMappingURL=ds-form-control.d.ts.map

package/dist/components/ds-form-control/ds-form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.d.ts","names":[],"sources":["../../../src/components/ds-form-control/ds-form-control.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;cAwCM;;;;;;;;;;;;KAWH,qBAAkB,mBAAA,CAAA,GAAA,CAAA;qBAAA"}

package/dist/components/ds-form-control/ds-form-control.js

@@ -0,0 +1,93 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_text_input_default from "../ds-text-input/ds-text-input.js";
+import "../ds-text-input/index.js";
+import ds_select_default from "../ds-select/ds-select.js";
+import "../ds-select/index.js";
+import ds_textarea_default from "../ds-textarea/ds-textarea.js";
+import "../ds-textarea/index.js";
+import ds_number_input_default from "../ds-number-input/ds-number-input.js";
+import "../ds-number-input/index.js";
+import ds_password_input_default from "../ds-password-input/ds-password-input.js";
+import "../ds-password-input/index.js";
+import ds_form_control_module_default from "./ds-form-control.module.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+
+//#region src/components/ds-form-control/ds-form-control.tsx
+const FormControlContext = createContext(null);
+const useFormControlContext = () => {
+	const context = useContext(FormControlContext);
+	if (!context) throw new Error("useFormControlContext must be used within DsFormControl");
+	return context;
+};
+/**
+* HOC that automatically injects the controlId from form control context
+* into any component that expects an 'id' prop.
+*
+* @param Component - The component to wrap with form control context
+* @returns A new component that automatically receives the controlId
+*/
+const controlify = (Component) => {
+	return function WrappedFormControl(props) {
+		const { controlId } = useFormControlContext();
+		return /* @__PURE__ */ jsx(Component, {
+			id: controlId,
+			...props
+		});
+	};
+};
+const DsFormControlDescription = ({ children, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(ds_form_control_module_default.description, className),
+		children
+	});
+};
+const DsFormControl = ({ id, status, label, required = false, slots, message, messageIcon = "info", className, style, children }) => {
+	const generatedId = useId();
+	const controlId = id || generatedId;
+	return /* @__PURE__ */ jsx(FormControlContext.Provider, {
+		value: { controlId },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classNames(ds_form_control_module_default.container, status && message && ds_form_control_module_default[status], className),
+			style,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: ds_form_control_module_default.labelContainer,
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: controlId,
+						className: classNames(ds_form_control_module_default.label, { [ds_form_control_module_default.required]: required }),
+						children: label
+					}), slots?.endAdornment && /* @__PURE__ */ jsx("div", {
+						className: ds_form_control_module_default.endAdornment,
+						children: slots.endAdornment
+					})]
+				}),
+				children,
+				message && /* @__PURE__ */ jsxs("div", {
+					className: ds_form_control_module_default.message,
+					children: [/* @__PURE__ */ jsx(ds_icon_default, {
+						icon: messageIcon,
+						size: "tiny",
+						filled: true
+					}), /* @__PURE__ */ jsx("span", {
+						className: ds_form_control_module_default.messageText,
+						children: message
+					})]
+				})
+			]
+		})
+	});
+};
+DsFormControl.TextInput = controlify(ds_text_input_default);
+DsFormControl.NumberInput = controlify(ds_number_input_default);
+DsFormControl.PasswordInput = controlify(ds_password_input_default);
+DsFormControl.Textarea = controlify(ds_textarea_default);
+DsFormControl.Select = controlify(ds_select_default);
+DsFormControl.Description = DsFormControlDescription;
+var ds_form_control_default = DsFormControl;
+
+//#endregion
+export { ds_form_control_default as default };
+//# sourceMappingURL=ds-form-control.js.map

package/dist/components/ds-form-control/ds-form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.js","names":["DsFormControlDescription: React.FC<DsFormControlDescriptionProps>","styles","DsIcon","DsTextInput","DsNumberInput","DsPasswordInput","DsTextarea","DsSelect"],"sources":["../../../src/components/ds-form-control/ds-form-control.tsx"],"sourcesContent":["import { type ComponentType, createContext, useContext, useId } from 'react';\nimport type React from 'react';\nimport classNames from 'classnames';\nimport { DsIcon } from '../ds-icon';\nimport { DsSelect } from '../ds-select';\nimport { DsTextInput } from '../ds-text-input';\nimport { DsTextarea } from '../ds-textarea';\nimport { DsNumberInput } from '../ds-number-input';\nimport { DsPasswordInput } from '../ds-password-input';\nimport type { DsFormControlDescriptionProps, DsFormControlProps } from './ds-form-control.types';\nimport styles from './ds-form-control.module.scss';\n\nconst FormControlContext = createContext<{ controlId: string } | null>(null);\n\nconst useFormControlContext = () => {\n\tconst context = useContext(FormControlContext);\n\tif (!context) {\n\t\tthrow new Error('useFormControlContext must be used within DsFormControl');\n\t}\n\treturn context;\n};\n\n/**\n * HOC that automatically injects the controlId from form control context\n * into any component that expects an 'id' prop.\n *\n * @param Component - The component to wrap with form control context\n * @returns A new component that automatically receives the controlId\n */\nconst controlify = <TProps extends { id?: string }>(Component: ComponentType<TProps>) => {\n\treturn function WrappedFormControl(props: TProps) {\n\t\tconst { controlId } = useFormControlContext();\n\t\treturn <Component id={controlId} {...props} />;\n\t};\n};\n\nconst DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ children, className }) => {\n\treturn <div className={classNames(styles.description, className)}>{children}</div>;\n};\n\nconst DsFormControl = ({\n\tid,\n\tstatus,\n\tlabel,\n\trequired = false,\n\tslots,\n\tmessage,\n\tmessageIcon = 'info',\n\tclassName,\n\tstyle,\n\tchildren,\n}: DsFormControlProps) => {\n\tconst generatedId = useId();\n\tconst controlId = id || generatedId;\n\n\treturn (\n\t\t<FormControlContext.Provider value={{ controlId }}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles.container, status && message && styles[status], className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t<div className={styles.labelContainer}>\n\t\t\t\t\t<label\n\t\t\t\t\t\thtmlFor={controlId}\n\t\t\t\t\t\tclassName={classNames(styles.label, {\n\t\t\t\t\t\t\t[styles.required]: required,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</label>\n\t\t\t\t\t{slots?.endAdornment && <div className={styles.endAdornment}>{slots.endAdornment}</div>}\n\t\t\t\t</div>\n\n\t\t\t\t{children}\n\n\t\t\t\t{message && (\n\t\t\t\t\t<div className={styles.message}>\n\t\t\t\t\t\t<DsIcon icon={messageIcon} size=\"tiny\" filled />\n\t\t\t\t\t\t<span className={styles.messageText}>{message}</span>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FormControlContext.Provider>\n\t);\n};\n\nDsFormControl.TextInput = controlify(DsTextInput);\nDsFormControl.NumberInput = controlify(DsNumberInput);\nDsFormControl.PasswordInput = controlify(DsPasswordInput);\nDsFormControl.Textarea = controlify(DsTextarea);\nDsFormControl.Select = controlify(DsSelect);\nDsFormControl.Description = DsFormControlDescription;\n\nexport default DsFormControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,cAA4C,KAAK;AAE5E,MAAM,8BAA8B;CACnC,MAAM,UAAU,WAAW,mBAAmB;AAC9C,KAAI,CAAC,QACJ,OAAM,IAAI,MAAM,0DAA0D;AAE3E,QAAO;;;;;;;;;AAUR,MAAM,cAA8C,cAAqC;AACxF,QAAO,SAAS,mBAAmB,OAAe;EACjD,MAAM,EAAE,cAAc,uBAAuB;AAC7C,SAAO,oBAAC;GAAU,IAAI;GAAW,GAAI;IAAS;;;AAIhD,MAAMA,4BAAqE,EAAE,UAAU,gBAAgB;AACtG,QAAO,oBAAC;EAAI,WAAW,WAAWC,+BAAO,aAAa,UAAU;EAAG;GAAe;;AAGnF,MAAM,iBAAiB,EACtB,IACA,QACA,OACA,WAAW,OACX,OACA,SACA,cAAc,QACd,WACA,OACA,eACyB;CACzB,MAAM,cAAc,OAAO;CAC3B,MAAM,YAAY,MAAM;AAExB,QACC,oBAAC,mBAAmB;EAAS,OAAO,EAAE,WAAW;YAChD,qBAAC;GACA,WAAW,WAAWA,+BAAO,WAAW,UAAU,WAAWA,+BAAO,SAAS,UAAU;GAChF;;IAEP,qBAAC;KAAI,WAAWA,+BAAO;gBACtB,oBAAC;MACA,SAAS;MACT,WAAW,WAAWA,+BAAO,OAAO,GAClCA,+BAAO,WAAW,UACnB,CAAC;gBAED;OACM,EACP,OAAO,gBAAgB,oBAAC;MAAI,WAAWA,+BAAO;gBAAe,MAAM;OAAmB;MAClF;IAEL;IAEA,WACA,qBAAC;KAAI,WAAWA,+BAAO;gBACtB,oBAACC;MAAO,MAAM;MAAa,MAAK;MAAO;OAAS,EAChD,oBAAC;MAAK,WAAWD,+BAAO;gBAAc;OAAe;MAChD;;IAEF;GACuB;;AAIhC,cAAc,YAAY,WAAWE,sBAAY;AACjD,cAAc,cAAc,WAAWC,wBAAc;AACrD,cAAc,gBAAgB,WAAWC,0BAAgB;AACzD,cAAc,WAAW,WAAWC,oBAAW;AAC/C,cAAc,SAAS,WAAWC,kBAAS;AAC3C,cAAc,cAAc;AAE5B,8BAAe"}

package/dist/components/ds-form-control/ds-form-control.module.cjs

@@ -0,0 +1,24 @@
+
+//#region src/components/ds-form-control/ds-form-control.module.scss
+var ds_form_control_module_default = {
+	"container": "_container_3x2wm_1",
+	"success": "_success_3x2wm_1",
+	"message": "_message_3x2wm_1",
+	"warning": "_warning_3x2wm_1",
+	"error": "_error_3x2wm_1",
+	"labelContainer": "_labelContainer_3x2wm_1",
+	"label": "_label_3x2wm_1",
+	"required": "_required_3x2wm_1",
+	"disabled": "_disabled_3x2wm_1",
+	"endAdornment": "_endAdornment_3x2wm_1",
+	"description": "_description_3x2wm_1",
+	"controlWrapper": "_controlWrapper_3x2wm_1",
+	"input": "_input_3x2wm_1",
+	"control": "_control_3x2wm_1",
+	"icon": "_icon_3x2wm_1",
+	"textarea": "_textarea_3x2wm_1",
+	"withIcon": "_withIcon_3x2wm_1"
+};
+
+//#endregion
+exports.default = ds_form_control_module_default;

package/dist/components/ds-form-control/ds-form-control.module.js

@@ -0,0 +1,24 @@
+//#region src/components/ds-form-control/ds-form-control.module.scss
+var ds_form_control_module_default = {
+	"container": "_container_3x2wm_1",
+	"success": "_success_3x2wm_1",
+	"message": "_message_3x2wm_1",
+	"warning": "_warning_3x2wm_1",
+	"error": "_error_3x2wm_1",
+	"labelContainer": "_labelContainer_3x2wm_1",
+	"label": "_label_3x2wm_1",
+	"required": "_required_3x2wm_1",
+	"disabled": "_disabled_3x2wm_1",
+	"endAdornment": "_endAdornment_3x2wm_1",
+	"description": "_description_3x2wm_1",
+	"controlWrapper": "_controlWrapper_3x2wm_1",
+	"input": "_input_3x2wm_1",
+	"control": "_control_3x2wm_1",
+	"icon": "_icon_3x2wm_1",
+	"textarea": "_textarea_3x2wm_1",
+	"withIcon": "_withIcon_3x2wm_1"
+};
+
+//#endregion
+export { ds_form_control_module_default as default };
+//# sourceMappingURL=ds-form-control.module.js.map

package/dist/components/ds-form-control/ds-form-control.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-form-control/ds-form-control.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_variables.scss"],"sourcesContent":["@use '../../styles/typography';\n\n$form-control-description-max-lines: 2;\n$form-control-description-line-height: 1.4;\n$form-control-description-max-height: calc(\n\t$form-control-description-line-height * $form-control-description-max-lines * 1em\n);\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--spacing-4xs);\n\n\t&.success {\n\t\t.message {\n\t\t\tcolor: var(--color-background-success-strong);\n\t\t}\n\t}\n\n\t&.warning {\n\t\t.message {\n\t\t\tcolor: var(--color-font-warning);\n\t\t}\n\t}\n\n\t&.error {\n\t\t--form-control-border-color: var(--color-background-danger-strong);\n\t\t--form-control-selection-color: var(--color-background-danger-weak);\n\n\t\t.message {\n\t\t\tcolor: var(--color-background-danger-strong);\n\t\t}\n\t}\n}\n\n.labelContainer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-4xs);\n}\n\n.label {\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-font-main);\n\n\t&.required::after {\n\t\t@include typography.body-sm-reg;\n\t\tcontent: '*';\n\t\tposition: relative;\n\t\ttop: -1px;\n\t\tright: -1px;\n\t\tcolor: var(--color-icon-danger);\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--color-background-disabled);\n\n\t\t&::after {\n\t\t\tcolor: var(--color-font-disabled);\n\t\t}\n\t}\n}\n\n.endAdornment {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.description {\n\t@include typography.p-s;\n\tcolor: var(--neutral-2);\n\tline-height: $form-control-description-line-height;\n\tmax-height: $form-control-description-max-height;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: $form-control-description-max-lines;\n\t-webkit-box-orient: vertical;\n\tword-wrap: break-word;\n}\n\n.controlWrapper {\n\tposition: relative;\n\n\t&.input {\n\t\t.control {\n\t\t\tpadding: 7px 16px;\n\t\t\tline-height: 24px;\n\t\t\tfont-style: normal;\n\t\t}\n\n\t\t.icon {\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t}\n\t}\n\n\t&.textarea {\n\t\t.control {\n\t\t\tpadding: 12px 16px;\n\t\t\tmin-height: 100px;\n\n\t\t\t&:disabled {\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t}\n\n\t\t.icon {\n\t\t\ttop: 10px;\n\t\t}\n\t}\n\n\t.control.withIcon {\n\t\tpadding-left: 40px;\n\t}\n\n\t.icon {\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\tcolor: var(--neutral-3);\n\t}\n\n\t.icon {\n\t\tleft: 12px;\n\t}\n}\n\n.message {\n\t@include typography.body-xs-reg;\n\tcolor: var(--color-font-secondary);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tpadding-top: 2px;\n}\n"],"mappings":""}

package/dist/components/ds-form-control/ds-form-control.types.cjs

@@ -0,0 +1,11 @@
+
+//#region src/components/ds-form-control/ds-form-control.types.tsx
+const controlStatuses = [
+	"info",
+	"success",
+	"error",
+	"warning"
+];
+
+//#endregion
+exports.controlStatuses = controlStatuses;

package/dist/components/ds-form-control/ds-form-control.types.d.cts

@@ -0,0 +1,59 @@
+import { IconType } from "../ds-icon/ds-icon.types.cjs";
+import React from "react";
+
+//#region src/components/ds-form-control/ds-form-control.types.d.ts
+declare const controlStatuses: readonly ["info", "success", "error", "warning"];
+type ControlStatus = (typeof controlStatuses)[number];
+interface DsFormControlProps extends React.PropsWithChildren {
+  /**
+   * Unique identifier for the control
+   */
+  id?: string;
+  /**
+   * Visual status
+   */
+  status?: ControlStatus;
+  /**
+   * Label text
+   */
+  label: string;
+  /**
+   * Marks the field as required
+   */
+  required?: boolean;
+  slots?: {
+    /**
+     * Adornment to display at the end of the label
+     */
+    endAdornment?: React.ReactNode;
+  };
+  /**
+   * Message under the control
+   */
+  message?: string;
+  /**
+   * Icon shown next to message
+   */
+  messageIcon?: IconType;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+interface DsFormControlDescriptionProps {
+  /**
+   * The description content
+   */
+  children: React.ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+//#endregion
+export { ControlStatus, DsFormControlDescriptionProps, DsFormControlProps, controlStatuses };
+//# sourceMappingURL=ds-form-control.types.d.cts.map

package/dist/components/ds-form-control/ds-form-control.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.types.d.cts","names":[],"sources":["../../../src/components/ds-form-control/ds-form-control.types.tsx"],"sourcesContent":[],"mappings":";;;;cAGa;KACD,aAAA,WAAwB;AADvB,UAGI,kBAAA,SAA2B,KAAA,CAAM,iBAH6B,CAAA;EACnE;AAEZ;;EAsBiB,EAAA,CAAM,EAAA,MAAA;EASR;;;EA/BoD,MAAA,CAAA,EAQzD,aARyD;EA0ClD;;;;;;;;;;;;mBApBA,KAAA,CAAM;;;;;;;;;gBASR;;;;;;;;UAQN,KAAA,CAAM;;UAGE,6BAAA;;;;YAIN,KAAA,CAAM"}

package/dist/components/ds-form-control/ds-form-control.types.d.ts

@@ -0,0 +1,60 @@
+import { IconType } from "../ds-icon/ds-icon.types.js";
+import "../ds-icon/index.js";
+import React from "react";
+
+//#region src/components/ds-form-control/ds-form-control.types.d.ts
+declare const controlStatuses: readonly ["info", "success", "error", "warning"];
+type ControlStatus = (typeof controlStatuses)[number];
+interface DsFormControlProps extends React.PropsWithChildren {
+  /**
+   * Unique identifier for the control
+   */
+  id?: string;
+  /**
+   * Visual status
+   */
+  status?: ControlStatus;
+  /**
+   * Label text
+   */
+  label: string;
+  /**
+   * Marks the field as required
+   */
+  required?: boolean;
+  slots?: {
+    /**
+     * Adornment to display at the end of the label
+     */
+    endAdornment?: React.ReactNode;
+  };
+  /**
+   * Message under the control
+   */
+  message?: string;
+  /**
+   * Icon shown next to message
+   */
+  messageIcon?: IconType;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: React.CSSProperties;
+}
+interface DsFormControlDescriptionProps {
+  /**
+   * The description content
+   */
+  children: React.ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+//#endregion
+export { ControlStatus, DsFormControlDescriptionProps, DsFormControlProps, controlStatuses };
+//# sourceMappingURL=ds-form-control.types.d.ts.map

package/dist/components/ds-form-control/ds-form-control.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.types.d.ts","names":[],"sources":["../../../src/components/ds-form-control/ds-form-control.types.tsx"],"sourcesContent":[],"mappings":";;;;;cAGa;KACD,aAAA,WAAwB;UAEnB,kBAAA,SAA2B,KAAA,CAAM;EAHrC;AACb;AAEA;EAQU,EAAA,CAAA,EAAA,MAAA;EAcO;;;EAtB2B,MAAM,CAAA,EAQxC,aARwC;EAAiB;AA0CnE;;;;;;;;;;;mBApBiB,KAAA,CAAM;;;;;;;;;gBASR;;;;;;;;UAQN,KAAA,CAAM;;UAGE,6BAAA;;;;YAIN,KAAA,CAAM"}

package/dist/components/ds-form-control/ds-form-control.types.js

@@ -0,0 +1,11 @@
+//#region src/components/ds-form-control/ds-form-control.types.tsx
+const controlStatuses = [
+	"info",
+	"success",
+	"error",
+	"warning"
+];
+
+//#endregion
+export { controlStatuses };
+//# sourceMappingURL=ds-form-control.types.js.map

package/dist/components/ds-form-control/ds-form-control.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form-control.types.js","names":[],"sources":["../../../src/components/ds-form-control/ds-form-control.types.tsx"],"sourcesContent":["import type React from 'react';\nimport type { IconType } from '../ds-icon';\n\nexport const controlStatuses = ['info', 'success', 'error', 'warning'] as const;\nexport type ControlStatus = (typeof controlStatuses)[number];\n\nexport interface DsFormControlProps extends React.PropsWithChildren {\n\t/**\n\t * Unique identifier for the control\n\t */\n\tid?: string;\n\t/**\n\t * Visual status\n\t */\n\tstatus?: ControlStatus;\n\t/**\n\t * Label text\n\t */\n\tlabel: string;\n\t/**\n\t * Marks the field as required\n\t */\n\trequired?: boolean;\n\n\tslots?: {\n\t\t/**\n\t\t * Adornment to display at the end of the label\n\t\t */\n\t\tendAdornment?: React.ReactNode;\n\t};\n\t/**\n\t * Message under the control\n\t */\n\tmessage?: string;\n\t/**\n\t * Icon shown next to message\n\t */\n\tmessageIcon?: IconType;\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\t/**\n\t * Additional styles to apply to the component\n\t */\n\tstyle?: React.CSSProperties;\n}\n\nexport interface DsFormControlDescriptionProps {\n\t/**\n\t * The description content\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n}\n"],"mappings":";AAGA,MAAa,kBAAkB;CAAC;CAAQ;CAAW;CAAS;CAAU"}

package/dist/components/ds-form-control/index.cjs

@@ -0,0 +1,2 @@
+const require_ds_form_control = require('./ds-form-control.cjs');
+const require_ds_form_control_types = require('./ds-form-control.types.cjs');

package/dist/components/ds-form-control/index.d.ts

@@ -0,0 +1,2 @@
+import { ControlStatus, DsFormControlDescriptionProps, DsFormControlProps, controlStatuses } from "./ds-form-control.types.js";
+import { DsFormControl } from "./ds-form-control.js";

package/dist/components/ds-form-control/index.js

@@ -0,0 +1,2 @@
+import ds_form_control_default from "./ds-form-control.js";
+import { controlStatuses } from "./ds-form-control.types.js";

package/dist/components/ds-grid/ds-grid.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-grid/ds-grid.tsx
+/**
+* Design system Grid component
+*/
+const DsGrid = ({ children, columns, rows, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("ds-grid", {
+			[`ds-grid-cols-${String(columns)}`]: columns,
+			[`ds-grid-rows-${String(rows)}`]: rows
+		}, className),
+		children
+	});
+};
+/**
+* Design system GridItem component
+*/
+const DsGridItem = ({ children, colSpan, colStart, rowSpan, rowStart, className }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)({
+			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,
+			[`ds-grid-col-start-${String(colStart)}`]: colStart,
+			[`ds-grid-row-span-${String(rowSpan)}`]: rowSpan,
+			[`ds-grid-row-start-${String(rowStart)}`]: rowStart
+		}, className),
+		children
+	});
+};
+
+//#endregion
+exports.DsGrid = DsGrid;
+exports.DsGridItem = DsGridItem;

package/dist/components/ds-grid/ds-grid.d.cts

@@ -0,0 +1,16 @@
+import { DsGridItemProps, DsGridProps } from "./ds-grid.types.cjs";
+import React from "react";
+
+//#region src/components/ds-grid/ds-grid.d.ts
+
+/**
+ * Design system Grid component
+ */
+declare const DsGrid: React.FC<DsGridProps>;
+/**
+ * Design system GridItem component
+ */
+declare const DsGridItem: React.FC<DsGridItemProps>;
+//#endregion
+export { DsGrid, DsGridItem };
+//# sourceMappingURL=ds-grid.d.cts.map

package/dist/components/ds-grid/ds-grid.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-grid.d.cts","names":[],"sources":["../../../src/components/ds-grid/ds-grid.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOA;AAgBa,cAhBA,MAmCZ,EAnCoB,KAAA,CAAM,EAgBO,CAhBJ,WAgBL,CAAA;;;;cAAZ,YAAY,KAAA,CAAM,GAAG"}

package/dist/components/ds-grid/ds-grid.d.ts

@@ -0,0 +1,16 @@
+import { DsGridItemProps, DsGridProps } from "./ds-grid.types.js";
+import React from "react";
+
+//#region src/components/ds-grid/ds-grid.d.ts
+
+/**
+ * Design system Grid component
+ */
+declare const DsGrid: React.FC<DsGridProps>;
+/**
+ * Design system GridItem component
+ */
+declare const DsGridItem: React.FC<DsGridItemProps>;
+//#endregion
+export { DsGrid, DsGridItem };
+//# sourceMappingURL=ds-grid.d.ts.map

package/dist/components/ds-grid/ds-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-grid.d.ts","names":[],"sources":["../../../src/components/ds-grid/ds-grid.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOA;AAgBa,cAhBA,MAmCZ,EAnCoB,KAAA,CAAM,EAgBO,CAhBJ,WAgBL,CAAA;;;;cAAZ,YAAY,KAAA,CAAM,GAAG"}

package/dist/components/ds-grid/ds-grid.js

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-grid/ds-grid.tsx
+/**
+* Design system Grid component
+*/
+const DsGrid = ({ children, columns, rows, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("ds-grid", {
+			[`ds-grid-cols-${String(columns)}`]: columns,
+			[`ds-grid-rows-${String(rows)}`]: rows
+		}, className),
+		children
+	});
+};
+/**
+* Design system GridItem component
+*/
+const DsGridItem = ({ children, colSpan, colStart, rowSpan, rowStart, className }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames({
+			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,
+			[`ds-grid-col-start-${String(colStart)}`]: colStart,
+			[`ds-grid-row-span-${String(rowSpan)}`]: rowSpan,
+			[`ds-grid-row-start-${String(rowStart)}`]: rowStart
+		}, className),
+		children
+	});
+};
+
+//#endregion
+export { DsGrid, DsGridItem };
+//# sourceMappingURL=ds-grid.js.map

package/dist/components/ds-grid/ds-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-grid.js","names":["DsGrid: React.FC<DsGridProps>","DsGridItem: React.FC<DsGridItemProps>"],"sources":["../../../src/components/ds-grid/ds-grid.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport type { DsGridItemProps, DsGridProps } from './ds-grid.types';\n\n/**\n * Design system Grid component\n */\nexport const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, className }) => {\n\tconst gridClass = classNames(\n\t\t'ds-grid',\n\t\t{\n\t\t\t[`ds-grid-cols-${String(columns)}`]: columns,\n\t\t\t[`ds-grid-rows-${String(rows)}`]: rows,\n\t\t},\n\t\tclassName,\n\t);\n\n\treturn <div className={gridClass}>{children}</div>;\n};\n\n/**\n * Design system GridItem component\n */\nexport const DsGridItem: React.FC<DsGridItemProps> = ({\n\tchildren,\n\tcolSpan,\n\tcolStart,\n\trowSpan,\n\trowStart,\n\tclassName,\n}) => {\n\tconst gridItemClass = classNames(\n\t\t{\n\t\t\t[`ds-grid-col-span-${String(colSpan)}`]: colSpan,\n\t\t\t[`ds-grid-col-start-${String(colStart)}`]: colStart,\n\t\t\t[`ds-grid-row-span-${String(rowSpan)}`]: rowSpan,\n\t\t\t[`ds-grid-row-start-${String(rowStart)}`]: rowStart,\n\t\t},\n\t\tclassName,\n\t);\n\n\treturn <div className={gridItemClass}>{children}</div>;\n};\n"],"mappings":";;;;;;;AAOA,MAAaA,UAAiC,EAAE,UAAU,SAAS,MAAM,gBAAgB;AAUxF,QAAO,oBAAC;EAAI,WATM,WACjB,WACA;IACE,gBAAgB,OAAO,QAAQ,KAAK;IACpC,gBAAgB,OAAO,KAAK,KAAK;GAClC,EACD,UACA;EAEkC;GAAe;;;;;AAMnD,MAAaC,cAAyC,EACrD,UACA,SACA,UACA,SACA,UACA,gBACK;AAWL,QAAO,oBAAC;EAAI,WAVU,WACrB;IACE,oBAAoB,OAAO,QAAQ,KAAK;IACxC,qBAAqB,OAAO,SAAS,KAAK;IAC1C,oBAAoB,OAAO,QAAQ,KAAK;IACxC,qBAAqB,OAAO,SAAS,KAAK;GAC3C,EACD,UACA;EAEsC;GAAe"}