agroptima-design-system 0.28.4 → 0.28.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.28.4",
+  "version": "0.28.5-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Dialog/Dialog.scss

@@ -0,0 +1,88 @@
+@use '../../settings/color_alias';
+@use '../../settings/breakpoints';
+@use '../../settings/depth';
+@use '../../settings/config';
+
+$modal-margin: config.$space-4x;
+$modal-width: 34.5rem;
+$modal-background-color: color_alias.$neutral-white;
+$modal-boder-color: color_alias.$neutral-color-200;
+$backdrop-opacity: 0.4;
+$backdrop-background-color: color_alias.$neutral-color-900;
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: depth.$z-modal;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.modal-dialog {
+  transition: transform 0.3s ease-out;
+  max-width: $modal-width;
+  position: relative;
+  width: auto;
+  margin-block: $modal-margin;
+  margin-inline: auto;
+  pointer-events: none;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: $modal-background-color;
+  background-clip: padding-box;
+  outline: 0;
+  border-radius: config.$corner-radius-xxs;
+  box-shadow:
+    0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+    0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 1rem 1rem;
+  border-bottom: 1px solid $modal-boder-color;
+  button {
+    margin-left: auto;
+  }
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: calc(1rem - 0.5rem * 0.5);
+  border-top: 1px solid $modal-boder-color;
+}
+
+.modal-backdrop {
+  opacity: $backdrop-opacity;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: depth.$z-modal;
+  width: 100vw;
+  height: 100vh;
+  background-color: $backdrop-background-color;
+  transition: opacity 0.15s linear;
+}

package/src/atoms/Dialog/Dialog.tsx

@@ -0,0 +1,99 @@
+import { Button, IconButton } from '../Button'
+import { Select } from '../Select'
+
+export function Dialog() {
+  return (
+    <>
+      <div className="modal-backdrop"></div>
+      <div className="modal modal-open">
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h1>Modal title</h1>
+              <IconButton accessibilityLabel="close" icon="Close" />
+            </div>
+            <div className="modal-body">
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <p>
+                This is some placeholder content to show the scrolling behavior
+                for modals. Instead of repeating the text in the modal, we use
+                an inline style to set a minimum height, thereby extending the
+                length of the overall modal and demonstrating the overflow
+                scrolling. When content becomes longer than the height of the
+                viewport, scrolling will move the modal as needed.
+              </p>
+              <div>
+                <Select
+                  id="select"
+                  label="Select"
+                  helpText="This is a help text"
+                  placeholder="Select an option"
+                  options={[
+                    { id: '1', label: 'Option 1' },
+                    { id: '2', label: 'Option 2' },
+                    { id: '3', label: 'Option 3' },
+                    { id: '4', label: 'Option 4' },
+                    { id: '5', label: 'Option 5' },
+                    { id: '6', label: 'Option 6' },
+                    { id: '7', label: 'Option 7' },
+                    { id: '8', label: 'Option 8' },
+                    { id: '9', label: 'Option 9' },
+                    { id: '10', label: 'Option 10' },
+                    { id: '11', label: 'Option 11' },
+                    { id: '12', label: 'Option 12' },
+                    { id: '13', label: 'Option 13' },
+                    { id: '14', label: 'Option 14' },
+                    { id: '15', label: 'Option 15' },
+                  ]}
+                />
+              </div>
+            </div>
+            <div className="modal-footer">
+              <Button label="Close" variant="neutral-ghost" />
+              <Button label="Save" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/atoms/Form/Actions.tsx

@@ -1,11 +1,11 @@
-import './Actions.scss'
+import './Form.scss'
 import { classNames } from '../../utils/classNames'
 
 export interface ActionsProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode
 }
 
-export function Actions({ className, children }: ActionsProps) {
+export default function Actions({ className, children }: ActionsProps) {
   return (
     <div className={classNames('footer-actions', className)}>{children}</div>
   )

package/src/atoms/Form/{Actions.scss → Form.scss}

@@ -4,6 +4,26 @@
 
 $gap: config.$space-4x;
 
+.form {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  gap: $gap;
+  padding: 0;
+
+  width: breakpoints.$medium;
+  max-width: breakpoints.$medium;
+
+  &.full-width {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  &:has(.footer-actions) {
+    padding-bottom: 6.25rem;
+  }
+}
+
 .footer-actions {
   display: flex;
   justify-content: flex-end;
@@ -19,6 +39,13 @@ $gap: config.$space-4x;
 }
 
 @media only screen and (max-width: breakpoints.$large) {
+  .form {
+    max-width: 100%;
+    width: 100%;
+    &:has(.footer-actions) {
+      padding-bottom: 9rem;
+    }
+  }
   .footer-actions {
     background-color: color_alias.$neutral-white;
     border-top: 1px solid color_alias.$neutral-color-200;

package/src/atoms/Form/Form.tsx

@@ -1,14 +1,25 @@
-import { FormContainer } from './FormContainer'
+import './Form.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface FormProps extends React.ComponentPropsWithoutRef<'form'> {
-  fluid?: boolean
+  fullWidth?: boolean
   children: React.ReactNode
 }
 
-export function Form({ fluid, children, ...props }: FormProps) {
+export default function Form({
+  className,
+  fullWidth,
+  children,
+  ...props
+}: FormProps) {
   return (
-    <form {...props}>
-      <FormContainer fluid={fluid}>{children}</FormContainer>
+    <form
+      className={classNames(className, 'form', {
+        'full-width': fullWidth,
+      })}
+      {...props}
+    >
+      {children}
     </form>
   )
 }

package/src/atoms/Form/index.ts

@@ -1,5 +1,4 @@
-import { Actions } from './Actions'
-import { Form } from './Form'
-import { FormContainer } from './FormContainer'
+import Actions from './Actions'
+import Form from './Form'
 
-export { Actions, Form, FormContainer }
+export { Actions, Form }

package/src/atoms/Icon.scss

@@ -1,6 +1,19 @@
 @use '../settings/color_alias';
 @use '../settings/config';
-@use '../settings/mixins';
+
+@mixin color($color) {
+  svg {
+    fill: $color;
+    path {
+      fill: $color;
+    }
+  }
+}
+
+@mixin size($size) {
+  width: $size;
+  height: $size;
+}
 
 .icon {
   display: inline-flex;
@@ -13,41 +26,41 @@
   }
 
   &.size-1 {
-    @include mixins.size(config.$icon-size-1x);
+    @include size(config.$icon-size-1x);
   }
   &.size-2 {
-    @include mixins.size(config.$icon-size-2x);
+    @include size(config.$icon-size-2x);
   }
   &.size-3 {
-    @include mixins.size(config.$icon-size-3x);
+    @include size(config.$icon-size-3x);
   }
   &.size-4 {
-    @include mixins.size(config.$icon-size-4x);
+    @include size(config.$icon-size-4x);
   }
   &.size-5 {
-    @include mixins.size(config.$icon-size-5x);
+    @include size(config.$icon-size-5x);
   }
   &.size-6 {
-    @include mixins.size(config.$icon-size-6x);
+    @include size(config.$icon-size-6x);
   }
   &.size-7 {
-    @include mixins.size(config.$icon-size-7x);
+    @include size(config.$icon-size-7x);
   }
   &.size-8 {
-    @include mixins.size(config.$icon-size-8x);
+    @include size(config.$icon-size-8x);
   }
 
   &.info {
-    @include mixins.svg-color(color_alias.$info-color-1000);
+    @include color(color_alias.$info-color-1000);
   }
   &.success {
-    @include mixins.svg-color(color_alias.$success-color-1000);
+    @include color(color_alias.$success-color-1000);
   }
   &.warning {
-    @include mixins.svg-color(color_alias.$warning-color-1000);
+    @include color(color_alias.$warning-color-1000);
   }
   &.error {
-    @include mixins.svg-color(color_alias.$error-color-1000);
+    @include color(color_alias.$error-color-1000);
   }
 
   @keyframes rotate {

package/src/atoms/Modal/Modal.scss

@@ -5,9 +5,8 @@
 @use '../../settings/depth';
 @use '../../settings/config';
 
-$modal-margin: 3rem;
+$modal-margin: config.$space-4x;
 $modal-width: 34.5rem;
-$modal-detail-width: 50rem;
 $modal-background-color: color_alias.$neutral-white;
 $modal-boder-color: color_alias.$neutral-color-200;
 $backdrop-opacity: 0.4;
@@ -32,7 +31,6 @@ $backdrop-background-color: color_alias.$neutral-color-900;
   width: auto;
   margin-block: $modal-margin;
   margin-inline: auto;
-  padding-inline: config.$space-4x;
   pointer-events: none;
 }
 
@@ -97,10 +95,6 @@ $backdrop-background-color: color_alias.$neutral-color-900;
 }
 
 .modal-details {
-  .modal-dialog {
-    max-width: 50rem;
-  }
-
   .modal-header {
     border-bottom: 1px solid $modal-boder-color;
     padding-bottom: config.$space-3x;
@@ -128,11 +122,6 @@ $backdrop-background-color: color_alias.$neutral-color-900;
   }
 }
 
-.modal-icon {
-  margin-top: config.$space-1x;
-  align-self: flex-start;
-}
-
 body:has(.modal-backdrop) {
   overflow: hidden;
   padding-right: 0px;

package/src/atoms/Modal/Modal.tsx

@@ -33,21 +33,21 @@ export interface ModalProps {
 }
 
 const ICONS: { [key: string]: ReactNode } = {
-  info: <Icon className="modal-icon" name="Info" variant="info" />,
-  success: <Icon className="modal-icon" name="Check" variant="success" />,
-  warning: <Icon className="modal-icon" name="Warning" variant="warning" />,
-  error: <Icon className="modal-icon" name="Error" variant="error" />,
-  discard: <Icon className="modal-icon" name="Warning" variant="warning" />,
+  info: <Icon name="Check" size="5" variant="info" />,
+  success: <Icon name="Check" size="5" variant="success" />,
+  warning: <Icon name="Warning" size="5" variant="warning" />,
+  error: <Icon name="Error" size="5" variant="error" />,
+  discard: <Icon name="Warning" size="5" variant="warning" />,
 }
 
 export function Modal({
   id,
+  variant = 'details',
   title,
   buttons,
+  closeButton = false,
   onClose,
   children,
-  closeButton = false,
-  variant = 'details',
   ...props
 }: ModalProps) {
   return (

package/src/atoms/Modal/ModalDialog.tsx

@@ -15,7 +15,6 @@ export function ModalDialog({
   children,
   details = false,
   scrollable = false,
-  ...props
 }: ModalDialogProps) {
   const handleClick = (event: React.MouseEvent) => {
     if (event.target !== event.currentTarget) return
@@ -42,7 +41,6 @@ export function ModalDialog({
         role="dialog"
         className={classNames('modal', className, { 'modal-details': details })}
         onClick={handleClick}
-        {...props}
       >
         <div
           className={classNames('modal-dialog', {

package/src/atoms/Modal/ModalHeader.tsx

@@ -1,5 +1,5 @@
-import './Modal.scss'
 import { classNames } from '../../utils/classNames'
+import './Modal.scss'
 
 export interface ModalHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {}

package/src/atoms/Modal/index.tsx

@@ -1,4 +1,4 @@
-export type { ModalProps, Variant } from './Modal'
+export type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 export type { ModalBodyProps } from './ModalBody'
 import { ModalBody } from './ModalBody'

package/src/settings/_mixins.scss

@@ -6,17 +6,3 @@
     }
   }
 }
-
-@mixin svg-color($color) {
-  svg {
-    fill: $color;
-    path {
-      fill: $color;
-    }
-  }
-}
-
-@mixin size($size) {
-  width: $size;
-  height: $size;
-}

package/src/stories/Changelog.mdx

@@ -4,15 +4,6 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.28.4
-
-* Update Modal component to adapt to the content height.
-* Add a scrollable body property to the Modal component.
-* Add onClose property to Modal component to close it when the background is clicked.
-* Add closeButton property to Modal component to show or hide the close button.
-* Create component FormContainer for reuse.
-* Rename FormContainer component `fullWidth` property to `fluid`.
-
 ## 0.28.3
 
 * Add tertiary variant to IconButton component

package/src/stories/Collapsible.stories.js

@@ -3,7 +3,6 @@ import { Button } from '../atoms/Button'
 import { Card } from '../atoms/Card'
 import { Collapsible } from '../atoms/Collapsible'
 import { Actions, Form as FormComponent } from '../atoms/Form'
-import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
 import { Select } from '../atoms/Select'
 
@@ -40,7 +39,14 @@ export default meta
 export const Primary = {
   render: () => (
     <Collapsible title="My personal data" name="personal-data">
-      <FormContainer fluid>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          gap: '1rem',
+        }}
+      >
         <Input
           accessibilityLabel="Fill the form name"
           helpText="This text can help you"
@@ -85,7 +91,7 @@ export const Primary = {
           placeholder="Select your favourite gaming system..."
           variant="primary"
         />
-      </FormContainer>
+      </div>
     </Collapsible>
   ),
 }
@@ -94,7 +100,14 @@ export const PrimaryOpened = {
   render: () => (
     <>
       <Collapsible title="My personal data" name="personal-data" open>
-        <FormContainer fluid>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            gap: '1rem',
+          }}
+        >
           <Input
             accessibilityLabel="Fill the form name"
             helpText="This text can help you"
@@ -139,7 +152,7 @@ export const PrimaryOpened = {
             placeholder="Select your favourite gaming system..."
             variant="primary"
           />
-        </FormContainer>
+        </div>
       </Collapsible>
       <Collapsible title="Another data" name="another-data">
         <Input label="Another data" name="anotherData" placeholder="..." />
@@ -160,67 +173,65 @@ export const PrimaryOpened = {
 export const PrimaryDisabled = {
   render: () => (
     <Collapsible title="My personal data" name="personal-data" disabled>
-      <FormContainer fluid>
-        <Input
-          accessibilityLabel="Fill the form name"
-          helpText="This text can help you"
-          id="name_input"
-          label="Name"
-          name="name"
-          placeholder="name..."
-          type="name"
-          variant="primary"
-        />
-        <Input
-          accessibilityLabel="Fill the form email"
-          helpText="This text can help you"
-          id="email_input"
-          label="Email"
-          name="email"
-          placeholder="Email..."
-          type="email"
-          variant="primary"
-        />
-        <Select
-          accessibilityLabel="Select your favourite gaming system options"
-          helpText="This text can help you"
-          id="select-videogames"
-          label="Videogames"
-          name="example"
-          onChange={() => {}}
-          options={[
-            {
-              id: '1',
-              label: 'Nintendo Switch',
-            },
-            {
-              id: '2',
-              label: 'PlayStation 5',
-            },
-            {
-              id: '3',
-              label: 'Xbox Series S/X',
-            },
-          ]}
-          placeholder="Select your favourite gaming system..."
-          variant="primary"
-        />
-      </FormContainer>
+      <Input
+        accessibilityLabel="Fill the form name"
+        helpText="This text can help you"
+        id="name_input"
+        label="Name"
+        name="name"
+        placeholder="name..."
+        type="name"
+        variant="primary"
+      />
+      <Input
+        accessibilityLabel="Fill the form email"
+        helpText="This text can help you"
+        id="email_input"
+        label="Email"
+        name="email"
+        placeholder="Email..."
+        type="email"
+        variant="primary"
+      />
+      <Select
+        accessibilityLabel="Select your favourite gaming system options"
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        onChange={() => {}}
+        options={[
+          {
+            id: '1',
+            label: 'Nintendo Switch',
+          },
+          {
+            id: '2',
+            label: 'PlayStation 5',
+          },
+          {
+            id: '3',
+            label: 'Xbox Series S/X',
+          },
+        ]}
+        placeholder="Select your favourite gaming system..."
+        variant="primary"
+      />
     </Collapsible>
   ),
 }
 
 export const Form = {
   render: () => (
-    <Collapsible open form title="User">
-      <FormComponent>
+    <FormComponent>
+      <Collapsible open form title="User">
         <Input label="First Name" placeholder="First Name" name="firstName" />
         <Input label="Last Name" placeholder="Last Name" name="lastName" />
         <Actions>
           <Button type="button" label="Cancel" variant="primary-outlined" />
           <Button type="submit" label="Sign in" variant="primary" />
         </Actions>
-      </FormComponent>
-    </Collapsible>
+      </Collapsible>
+    </FormComponent>
   ),
 }

package/src/stories/Modal.stories.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Button, IconButton } from '../atoms/Button'
 import { Card } from '../atoms/Card'
+import { Collapsible } from '../atoms/Collapsible'
 import { DetailItem } from '../atoms/DetailItem'
-import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
 import {
   ModalBody,
@@ -232,7 +232,7 @@ export const ScrollableModal = () => (
   </Modal>
 )
 
-const OpenAndCloseModalComponent = () => {
+export const OpenAndCloseModal = () => {
   const [isOpen, setIsOpen] = React.useState(false)
   const closeModal = () => setIsOpen(false)
   return (
@@ -257,12 +257,6 @@ const OpenAndCloseModalComponent = () => {
   )
 }
 
-export const OpenAndCloseModal = {
-  render: () => {
-    return <OpenAndCloseModalComponent />
-  },
-}
-
 export const FormModal = () => (
   <form
     onSubmit={(e) => {
@@ -285,32 +279,30 @@ export const FormModal = () => (
         { label: 'Save', type: 'submit' },
       ]}
     >
-      <FormContainer fluid>
-        <Input name="input" label="Input" placeholder="Type something" />
-        <Select
-          label="Select"
-          name="select"
-          helpText="This is a help text"
-          placeholder="Select an option"
-          options={[
-            { id: '1', label: 'Option 1' },
-            { id: '2', label: 'Option 2' },
-            { id: '3', label: 'Option 3' },
-            { id: '4', label: 'Option 4' },
-            { id: '5', label: 'Option 5' },
-            { id: '6', label: 'Option 6' },
-            { id: '7', label: 'Option 7' },
-            { id: '8', label: 'Option 8' },
-            { id: '9', label: 'Option 9' },
-            { id: '10', label: 'Option 10' },
-            { id: '11', label: 'Option 11' },
-            { id: '12', label: 'Option 12' },
-            { id: '13', label: 'Option 13' },
-            { id: '14', label: 'Option 14' },
-            { id: '15', label: 'Option 15' },
-          ]}
-        />
-      </FormContainer>
+      <Input name="input" label="Input" placeholder="Type something" />
+      <Select
+        label="Select"
+        name="select"
+        helpText="This is a help text"
+        placeholder="Select an option"
+        options={[
+          { id: '1', label: 'Option 1' },
+          { id: '2', label: 'Option 2' },
+          { id: '3', label: 'Option 3' },
+          { id: '4', label: 'Option 4' },
+          { id: '5', label: 'Option 5' },
+          { id: '6', label: 'Option 6' },
+          { id: '7', label: 'Option 7' },
+          { id: '8', label: 'Option 8' },
+          { id: '9', label: 'Option 9' },
+          { id: '10', label: 'Option 10' },
+          { id: '11', label: 'Option 11' },
+          { id: '12', label: 'Option 12' },
+          { id: '13', label: 'Option 13' },
+          { id: '14', label: 'Option 14' },
+          { id: '15', label: 'Option 15' },
+        ]}
+      />
     </Modal>
   </form>
 )

package/tests/Modal.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
-import { Modal, type Variant } from '../src/atoms/Modal'
+import { Modal } from '../src/atoms/Modal/Modal'
 
 describe('Modal', () => {
   const variants = ['info', 'success', 'warning', 'error']
@@ -11,7 +11,6 @@ describe('Modal', () => {
       const content = `${variant} modal content`
       const { getByRole, getByText } = render(
         <Modal
-          variant={variant as Variant}
           id={`${variant}-modal`}
           title={title}
           buttons={[
@@ -23,7 +22,7 @@ describe('Modal', () => {
           {content}
         </Modal>,
       )
-      expect(getByRole('img')).toHaveClass(variant)
+      expect(getByRole('img')).toHaveClass('info')
       expect(getByText(title)).toBeInTheDocument()
       expect(getByText(content)).toBeInTheDocument()
       expect(getByRole('button')).toHaveTextContent('Done')
@@ -53,7 +52,7 @@ describe('Modal', () => {
         {content}
       </Modal>,
     )
-    expect(getByRole('img')).toHaveClass('warning')
+    expect(getByRole('img')).toHaveClass('discard')
     expect(getByText(title)).toBeInTheDocument()
     expect(getByText(content)).toBeInTheDocument()
     expect(screen.getAllByRole('button')[0]).toHaveTextContent('Cancel')

package/src/atoms/Form/FormContainer.scss

@@ -1,35 +0,0 @@
-@use '../../settings/config';
-@use '../../settings/breakpoints';
-@use '../../settings/color_alias';
-
-$gap: config.$space-4x;
-
-.form-container {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  gap: $gap;
-  padding: 0;
-
-  width: breakpoints.$medium;
-  max-width: breakpoints.$medium;
-
-  &.fluid {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  &:has(.footer-actions) {
-    padding-bottom: 6.25rem;
-  }
-}
-
-@media only screen and (max-width: breakpoints.$large) {
-  .form-container {
-    max-width: 100%;
-    width: 100%;
-    &:has(.footer-actions) {
-      padding-bottom: 9rem;
-    }
-  }
-}

package/src/atoms/Form/FormContainer.tsx

@@ -1,25 +0,0 @@
-import './FormContainer.scss'
-import { classNames } from '../../utils/classNames'
-
-export interface FormContainerProps
-  extends React.ComponentPropsWithoutRef<'div'> {
-  fluid?: boolean
-}
-
-export function FormContainer({
-  fluid,
-  className,
-  children,
-  ...props
-}: FormContainerProps) {
-  return (
-    <div
-      className={classNames(className, 'form-container', {
-        fluid,
-      })}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}