@dt-dds/react-form 1.0.0-beta.27

package/CHANGELOG.md

@@ -0,0 +1,266 @@
+# @dt-ui/react-form
+
+## 1.0.0-beta.27
+
+### Major Changes
+
+- refactor!: rename pkg and publish to npmjs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-dds/react-core@1.0.0-beta.41
+  - @dt-dds/react-tooltip@1.0.0-beta.49
+  - @dt-dds/react-typography@1.0.0-beta.32
+
+## 0.1.0-beta.26
+
+### Minor Changes
+
+- feat: add text field hover and focus
+
+### Patch Changes
+
+- refactor: theme typography values
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.40
+  - @dt-ui/react-tooltip@0.1.0-beta.48
+  - @dt-ui/react-typography@0.1.0-beta.31
+
+## 0.1.0-beta.25
+
+### Minor Changes
+
+- feat: update shadow theme values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.39
+  - @dt-ui/react-tooltip@0.1.0-beta.47
+  - @dt-ui/react-typography@0.1.0-beta.30
+
+## 0.1.0-beta.24
+
+### Patch Changes
+
+- chore: update theme font-styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.38
+  - @dt-ui/react-tooltip@0.1.0-beta.46
+  - @dt-ui/react-typography@0.1.0-beta.29
+
+## 0.1.0-beta.23
+
+### Patch Changes
+
+- chore: review OSS files
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.37
+  - @dt-ui/react-tooltip@0.1.0-beta.45
+  - @dt-ui/react-typography@0.1.0-beta.28
+
+## 0.1.0-beta.22
+
+### Patch Changes
+
+- chore: update contextual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.36
+  - @dt-ui/react-tooltip@0.1.0-beta.44
+  - @dt-ui/react-typography@0.1.0-beta.27
+
+## 0.1.0-beta.21
+
+### Minor Changes
+
+- feat: implement IconButton contrast and size
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-tooltip@0.1.0-beta.43
+
+## 0.1.0-beta.20
+
+### Patch Changes
+
+- fix: circular dependencies
+- Updated dependencies
+  - @dt-ui/react-tooltip@0.1.0-beta.42
+
+## 0.1.0-beta.19
+
+### Patch Changes
+
+- fix: change content.light contextual color
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.35
+  - @dt-ui/react-tooltip@0.1.0-beta.41
+  - @dt-ui/react-typography@0.1.0-beta.26
+
+## 0.1.0-beta.18
+
+### Minor Changes
+
+- feat: move icon-button to independent
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-tooltip@0.1.0-beta.40
+
+## 0.1.0-beta.17
+
+### Patch Changes
+
+- fix: add accent to colors type
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.34
+  - @dt-ui/react-tooltip@0.1.0-beta.39
+  - @dt-ui/react-typography@0.1.0-beta.25
+
+## 0.1.0-beta.16
+
+### Patch Changes
+
+- fix: change button text according to ux
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.33
+  - @dt-ui/react-tooltip@0.1.0-beta.38
+  - @dt-ui/react-typography@0.1.0-beta.24
+
+## 0.1.0-beta.15
+
+### Patch Changes
+
+- fix: text field border style
+
+## 0.1.0-beta.14
+
+### Patch Changes
+
+- chore: update contexual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.32
+  - @dt-ui/react-typography@0.1.0-beta.23
+  - @dt-ui/react-tooltip@0.1.0-beta.37
+
+## 0.1.0-beta.13
+
+### Patch Changes
+
+- fix: form group responsiveness
+
+## 0.1.0-beta.12
+
+### Patch Changes
+
+- style: update responsive font styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.31
+  - @dt-ui/react-tooltip@0.1.0-beta.36
+  - @dt-ui/react-typography@0.1.0-beta.22
+
+## 0.1.0-beta.11
+
+### Minor Changes
+
+- feat: add spinner size 'extra-small' & update specs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.30
+  - @dt-ui/react-tooltip@0.1.0-beta.35
+  - @dt-ui/react-typography@0.1.0-beta.21
+
+## 0.1.0-beta.10
+
+### Minor Changes
+
+- feat: add backgroundFill
+
+## 0.1.0-beta.9
+
+### Patch Changes
+
+- chore: add theme breakpoints
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.29
+  - @dt-ui/react-tooltip@0.1.0-beta.34
+  - @dt-ui/react-typography@0.1.0-beta.20
+
+## 0.1.0-beta.8
+
+### Patch Changes
+
+- fix(DOMRect API): prevent breaking consumers CI/CD pipeline
+- Updated dependencies
+  - @dt-ui/react-tooltip@0.1.0-beta.33
+
+## 0.1.0-beta.7
+
+### Patch Changes
+
+- fix(tooltip): avoid browser window crop
+- Updated dependencies
+  - @dt-ui/react-tooltip@0.1.0-beta.32
+
+## 0.1.0-beta.6
+
+### Minor Changes
+
+- feat: add id to base props
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.28
+  - @dt-ui/react-typography@0.1.0-beta.19
+  - @dt-ui/react-tooltip@0.1.0-beta.31
+
+## 0.1.0-beta.5
+
+### Minor Changes
+
+- feat: change breakpoints values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.27
+  - @dt-ui/react-tooltip@0.1.0-beta.30
+  - @dt-ui/react-typography@0.1.0-beta.18
+
+## 0.1.0-beta.4
+
+### Patch Changes
+
+- fix: replace body to correct one
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.26
+  - @dt-ui/react-tooltip@0.1.0-beta.29
+  - @dt-ui/react-typography@0.1.0-beta.17
+
+## 0.1.0-beta.3
+
+### Patch Changes
+
+- chore: add theme colors missing types
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.25
+  - @dt-ui/react-tooltip@0.1.0-beta.28
+  - @dt-ui/react-typography@0.1.0-beta.16
+
+## 0.1.0-beta.2
+
+### Minor Changes
+
+- feat: add search functionality to text-field
+
+## 0.1.0-beta.1
+
+### Minor Changes
+
+- feat: reinstate the form component

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# Form
+
+The Form component is used to gather user input and submit it to the backend. It supports various form controls and can group multiple fields using Form.Group. Each group can have a title, be disabled, and include a tooltip for extra information. The form's onSubmit function handles form submissions, and additional customization can be applied through the style and dataTestId properties.
+
+## Usage
+
+```jsx
+import { Form, TextField } from '@dt-dds/react';
+
+export const App = () => {
+  return (
+    <Form>
+      <TextField label='label 1' />
+    </Form>
+  );
+};
+```
+
+Also, you can use form groups to group a bunch of fields.
+
+```jsx
+import { Form, TextField } from '@dt-dds/react';
+
+export const App = () => {
+  return (
+    <Form>
+      <Form.FormGroup>
+        <TextField label='label 1' />
+        <TextField label='label 2' />
+      </Form.FormGroup>
+    </Form>
+  );
+};
+```
+
+## API
+
+### Form
+
+| Property     | Type                                           | Default | Description                     |
+| ------------ | ---------------------------------------------- | ------- | ------------------------------- |
+| `children`   | `ReactNode`                                    | -       | Child components to be rendered |
+| `dataTestId` | `string`                                       | toggle  | Toggle test identifier          |
+| `style`      | `React.CSSProperties`                          | -       | Gives the Form css properties   |
+| `onSubmit`   | `(event: FormEvent<HTMLFormElement>) => void;` | -       | The HTML form submit handler.   |
+
+### Form.Group
+
+| Property   | Type        | Default | Description                                                                                                                               |
+| ---------- | ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `children` | `ReactNode` | -       | Child components to be rendered                                                                                                           |
+| `title`    | `string`    | -       | Title to be shown at the top of the group                                                                                                 |
+| `disabled` | `boolean`   | -       | If group is disabled, a opacity is set and the pointer events set to none                                                                 |
+| `tooltip`  | `string`    | -       | If a string is passed to this prop, a info svg will be rendered wrapped in a tooltip. The tooltip content will be the value of this prop. |
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE.md)

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { BaseProps, Theme } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, FormEvent } from 'react';
+
+interface GroupProps extends BaseProps {
+    isDisabled?: boolean;
+    title?: string;
+    tooltip?: ReactNode;
+}
+interface FormProps extends BaseProps {
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+}
+declare const Form: {
+    ({ children, dataTestId, style, onSubmit, }: FormProps): react_jsx_runtime.JSX.Element;
+    Group({ children, isDisabled, title, tooltip }: GroupProps): react_jsx_runtime.JSX.Element;
+};
+
+declare module '@emotion/react' {
+    interface Theme extends Theme {
+    }
+}
+
+export { Form, FormProps, GroupProps };

package/dist/index.js

@@ -0,0 +1,330 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form
+});
+module.exports = __toCommonJS(form_exports);
+
+// src/Form.tsx
+var import_react_tooltip = require("@dt-dds/react-tooltip");
+var import_react_typography = require("@dt-dds/react-typography");
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+var import_react = require("@emotion/react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Info = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" })
+    })
+  );
+};
+var Info_default = Info;
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+var import_react2 = require("@emotion/react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+
+// src/Form.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var FormStyled = import_styled.default.form`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: ${({ theme }) => theme.spacing.medium};
+`;
+var GroupStyled = import_styled.default.div`
+  ${({ theme }) => `
+    row-gap: ${theme.spacing.xmedium};
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    color: ${theme.palette.content.default};
+  `}
+`;
+var LabelStyled = import_styled.default.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+`;
+var GroupItemsStyled = import_styled.default.div`
+  ${({ theme, disabled }) => `
+    display: flex;
+    gap: ${theme.spacing.xmedium};
+    justify-content: stretch;
+    align-items: start;
+    flex-direction: column;
+
+    @media only screen and (min-width: ${theme.breakpoints.mq3}px) {
+      flex-direction: row;
+    }
+
+    ${disabled && `
+        opacity: 0.5;
+        pointer-events: none;
+      `}
+  `}
+`;
+
+// src/Form.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var DEFAULT_ON_SUBMIT = (event) => event.preventDefault();
+var Form = ({
+  children,
+  dataTestId,
+  style,
+  onSubmit = DEFAULT_ON_SUBMIT
+}) => {
+  const testId = dataTestId != null ? dataTestId : "test-form";
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormStyled, { "data-testid": testId, onSubmit, style, children });
+};
+Form.Group = ({ children, isDisabled, title, tooltip }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(GroupStyled, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(LabelStyled, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        import_react_typography.Typography,
+        {
+          color: "primary.default",
+          fontStyles: "h6",
+          style: { textTransform: "uppercase" },
+          children: title
+        }
+      ),
+      tooltip ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_tooltip.Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Info_default, { height: "16", width: "16" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react_tooltip.Tooltip.Content,
+          {
+            direction: import_react_tooltip.OTooltipDirection.Right,
+            style: { maxWidth: 250 },
+            children: tooltip
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(GroupItemsStyled, { disabled: isDisabled, children })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form
+});

package/dist/index.mjs

@@ -0,0 +1,296 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Form.tsx
+import { OTooltipDirection, Tooltip } from "@dt-dds/react-tooltip";
+import { Typography } from "@dt-dds/react-typography";
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+import { useTheme } from "@emotion/react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Info = (props) => {
+  return /* @__PURE__ */ jsx24(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx24("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" })
+    })
+  );
+};
+var Info_default = Info;
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// src/Form.styled.ts
+import styled from "@emotion/styled";
+var FormStyled = styled.form`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: ${({ theme }) => theme.spacing.medium};
+`;
+var GroupStyled = styled.div`
+  ${({ theme }) => `
+    row-gap: ${theme.spacing.xmedium};
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    color: ${theme.palette.content.default};
+  `}
+`;
+var LabelStyled = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+`;
+var GroupItemsStyled = styled.div`
+  ${({ theme, disabled }) => `
+    display: flex;
+    gap: ${theme.spacing.xmedium};
+    justify-content: stretch;
+    align-items: start;
+    flex-direction: column;
+
+    @media only screen and (min-width: ${theme.breakpoints.mq3}px) {
+      flex-direction: row;
+    }
+
+    ${disabled && `
+        opacity: 0.5;
+        pointer-events: none;
+      `}
+  `}
+`;
+
+// src/Form.tsx
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+var DEFAULT_ON_SUBMIT = (event) => event.preventDefault();
+var Form = ({
+  children,
+  dataTestId,
+  style,
+  onSubmit = DEFAULT_ON_SUBMIT
+}) => {
+  const testId = dataTestId != null ? dataTestId : "test-form";
+  return /* @__PURE__ */ jsx58(FormStyled, { "data-testid": testId, onSubmit, style, children });
+};
+Form.Group = ({ children, isDisabled, title, tooltip }) => {
+  return /* @__PURE__ */ jsxs25(GroupStyled, { children: [
+    title ? /* @__PURE__ */ jsxs25(LabelStyled, { children: [
+      /* @__PURE__ */ jsx58(
+        Typography,
+        {
+          color: "primary.default",
+          fontStyles: "h6",
+          style: { textTransform: "uppercase" },
+          children: title
+        }
+      ),
+      tooltip ? /* @__PURE__ */ jsxs25(Tooltip, { children: [
+        /* @__PURE__ */ jsx58(Info_default, { height: "16", width: "16" }),
+        /* @__PURE__ */ jsx58(
+          Tooltip.Content,
+          {
+            direction: OTooltipDirection.Right,
+            style: { maxWidth: 250 },
+            children: tooltip
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx58(GroupItemsStyled, { disabled: isDisabled, children })
+  ] });
+};
+export {
+  Form
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-form",
+  "version": "1.0.0-beta.27",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-tooltip": "1.0.0-beta.49",
+    "@dt-dds/react-typography": "1.0.0-beta.32"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}