agroptima-design-system 0.34.6-beta.2 → 0.34.6

package/package.json

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

package/src/atoms/Button/Button.tsx

@@ -13,7 +13,6 @@ interface CustomProps {
   variant?: ButtonVariant
   loading?: boolean
   disabled?: boolean
-  fullWidth?: boolean
 }
 
 export type ButtonProps = CustomProps & BaseButtonProps
@@ -44,16 +43,13 @@ export function Button({
   leftIcon,
   rightIcon,
   disabled,
-  className,
   variant = 'primary',
   loading = false,
-  fullWidth = false,
+  className,
   ...props
 }: ButtonProps) {
   const leftIconName = loading ? 'Loading' : leftIcon
-  const cssClasses = classNames(className, 'button', variant, {
-    'full-width': fullWidth,
-  })
+  const cssClasses = classNames(className, 'button', variant)
 
   return (
     <BaseButton

package/src/atoms/Collapsible.scss

@@ -20,20 +20,31 @@ details summary::-webkit-details-marker {
 
   .header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: config.$space-3x;
     padding: config.$space-5x;
+    padding-bottom: config.$space-5x !important;
     cursor: default;
 
+    .icon {
+      width: config.$icon-size-4x !important;
+      height: config.$icon-size-4x !important;
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
     .title {
-      font-size: 1rem;
-      font-weight: normal;
+      font-size: 1rem !important;
+      font-weight: normal !important;
       flex: 1;
     }
   }
 
   .content {
-    padding: config.$space-7x config.$space-7x config.$space-3x;
+    padding: config.$space-7x;
+    padding-bottom: config.$space-3x;
 
     &.no-horizontal-padding {
       padding-left: 0;
@@ -41,7 +52,7 @@ details summary::-webkit-details-marker {
     }
   }
 
-  &.primary, &.secondary {
+  &.primary {
     &[open] {
       .header {
         background: transparent;
@@ -58,7 +69,6 @@ details summary::-webkit-details-marker {
         .icon {
           > svg {
             fill: color_alias.$neutral-color-200;
-
             path {
               fill: color_alias.$neutral-color-200;
             }
@@ -75,7 +85,6 @@ details summary::-webkit-details-marker {
       .icon {
         > svg {
           fill: color_alias.$primary-color-600;
-
           path {
             fill: color_alias.$primary-color-600;
           }
@@ -87,14 +96,6 @@ details summary::-webkit-details-marker {
       }
     }
   }
-
-  &.secondary .content {
-    padding: config.$space-3x config.$space-4x config.$space-6x;
-    border: 1px solid color_alias.$neutral-color-200;
-    border-top: none;
-    border-bottom-left-radius: config.$corner-radius-m;
-    border-bottom-right-radius: config.$corner-radius-m;
-  }
 }
 
 .collapsible[open] {

package/src/atoms/Collapsible.tsx

@@ -1,11 +1,11 @@
 import './Collapsible.scss'
-import type { ComponentPropsWithoutRef } from 'react'
 import { classNames } from '../utils/classNames'
 import { Icon } from './Icon'
 
-export type Variant = 'primary' | 'secondary'
+export type Variant = 'primary'
 
-export interface CollapsibleProps extends ComponentPropsWithoutRef<'details'> {
+export interface CollapsibleProps
+  extends React.ComponentPropsWithoutRef<'details'> {
   title: string
   variant?: Variant
   name?: string
@@ -24,7 +24,7 @@ export function Collapsible({
   form = false,
   noHorizontalPadding = false,
   ...props
-}: CollapsibleProps) {
+}: CollapsibleProps): React.JSX.Element {
   const cssClasses = classNames('collapsible', variant, className, {
     open: props.open,
     disabled: disabled,
@@ -37,7 +37,7 @@ export function Collapsible({
   return (
     <details name={name} className={cssClasses} aria-label={title} {...props}>
       <summary className="header">
-        <Icon className="arrow" name="AngleRight" size="4" />
+        <Icon className="arrow" name="AngleRight" />
         <span className="title">{title}</span>
       </summary>
       <div className={contentCssClasses}>{children}</div>

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -29,7 +29,6 @@ export type DateRangePickerProps = {
   name?: string
   helpText?: string
   errors?: string[]
-  fullWidth?: boolean
 }
 
 export type DateRange = {
@@ -49,12 +48,10 @@ export function DateRangePicker({
   label = 'Date',
   errors,
   helpText,
-  fullWidth = false,
 }: DateRangePickerProps): JSX.Element {
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
-    'full-width': fullWidth,
   })
   const helpTexts = buildHelpText(helpText, errors)
 

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -28,7 +28,6 @@ export type DateSinglePickerProps = {
   label?: string
   helpText?: string
   errors?: string[]
-  fullWidth?: boolean
 }
 
 export function DateSinglePicker({
@@ -43,7 +42,6 @@ export function DateSinglePicker({
   label = 'Date',
   errors,
   helpText,
-  fullWidth = false,
 }: DateSinglePickerProps): JSX.Element {
   const { isOpen, close, toggle } = useOpen(!withInput)
   const pickerRef = useRef(null)
@@ -53,7 +51,6 @@ export function DateSinglePicker({
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
-    'full-width': fullWidth,
   })
 
   const [selected, setSelected] = useState<Date | undefined>(

package/src/atoms/Input.scss

@@ -17,20 +17,16 @@
     flex-direction: row;
     width: 100%;
     padding: config.$space-2x config.$space-3x config.$space-2x;
-
     input[type='date'] {
       min-width: -webkit-fill-available;
     }
-
     input[type='number'] {
       text-align: right;
     }
-
     input::placeholder,
     textarea::placeholder {
       @include typography.input-placeholder-text;
     }
-
     input,
     input:hover,
     input:focus,
@@ -56,12 +52,10 @@
       -moz-appearance: none;
       appearance: none;
     }
-
     .input-suffix {
       text-wrap: nowrap;
       color: color_alias.$neutral-color-600;
     }
-
     .icon {
       min-width: config.$icon-size-5x;
       width: config.$icon-size-5x;
@@ -78,7 +72,6 @@
     &.invalid .input-container {
       border: 1px solid color_alias.$error-color-1000;
     }
-
     .input-container {
       border-radius: config.$corner-radius-m;
       border: 1px solid color_alias.$neutral-color-600;
@@ -94,7 +87,6 @@
       &:has(textarea:disabled) {
         border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-
         input {
           color: color_alias.$neutral-color-400;
         }
@@ -104,11 +96,9 @@
           color: color_alias.$neutral-color-400;
         }
       }
-
       .icon {
         > svg {
           fill: color_alias.$neutral-color-400;
-
           path {
             fill: color_alias.$neutral-color-400;
           }
@@ -118,7 +108,6 @@
       .password-icon {
         > svg {
           fill: color_alias.$neutral-color-600;
-
           path {
             fill: color_alias.$neutral-color-600;
           }
@@ -126,25 +115,20 @@
       }
     }
   }
-
   &.file .input-container {
     padding: 0;
     border: transparent;
-
     &:has(input:focus) {
       border: transparent;
     }
-
     input {
       color: color_alias.$neutral-color-600;
-
       &::before {
         content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M2.943 8.718h4.114V4.694H9.8L5 0 .2 4.694h2.743v4.024ZM5 1.898l1.488 1.455h-.802v4.023H4.314V3.353h-.802L5 1.898Zm-4.8 8.16h9.6V11.4H.2v-1.341Z' fill='%23EB004D'/%3E%3C/svg%3E");
         position: absolute;
         left: config.$space-3x;
         bottom: config.$space-2x;
       }
-
       &::file-selector-button {
         margin-right: config.$space-2x;
         padding-left: config.$space-3x + config.$icon-size-2x + config.$space-1x;
@@ -152,23 +136,8 @@
       }
     }
   }
-
   &.hidden {
     display: none;
   }
 
-  &.ellipsis {
-    input {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
-  &.borderless {
-    .input-container {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }

package/src/atoms/Input.tsx

@@ -7,7 +7,7 @@ import type { IconType } from './Icon'
 import { Icon } from './Icon'
 import { Label } from './Label'
 
-export type InputVariant = 'primary' | 'borderless'
+export type InputVariant = 'primary'
 
 export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   label: string
@@ -20,8 +20,6 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   suffix?: string
   errors?: string[]
   rightIcon?: IconType
-  fullWidth?: boolean
-  ellipsis?: boolean
 }
 
 export function Input({
@@ -39,8 +37,6 @@ export function Input({
   id,
   errors,
   rightIcon,
-  fullWidth = false,
-  ellipsis = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -66,8 +62,6 @@ export function Input({
         file: type === 'file',
         invalid: errors?.length,
         hidden: type === 'hidden',
-        'full-width': fullWidth,
-        ellipsis: ellipsis,
       })}
     >
       {!hideLabel && (

package/src/atoms/Multiselect.tsx

@@ -30,7 +30,6 @@ export interface MultiselectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string[]) => void
   isSearchable?: boolean
   searchLabel?: string
-  fullWidth?: boolean
 }
 
 export function Multiselect({
@@ -51,7 +50,6 @@ export function Multiselect({
   defaultValue = [],
   isSearchable = false,
   searchLabel = 'Search',
-  fullWidth = false,
   ...props
 }: MultiselectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
@@ -83,7 +81,6 @@ export function Multiselect({
         disabled,
         filled: hasSelectedOptions,
         invalid: isInvalid,
-        'full-width': fullWidth,
       })}
       ref={selectRef}
     >

package/src/atoms/QuantitySelector.tsx

@@ -14,7 +14,6 @@ export interface QuantitySelectorProps extends Omit<InputProps, 'type'> {
   hideLabel?: boolean
   id?: string
   variant?: Variant
-  fullWidth?: boolean
 }
 
 export function QuantitySelector({
@@ -25,7 +24,6 @@ export function QuantitySelector({
   disabled,
   hideLabel = false,
   variant = 'primary',
-  fullWidth = false,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -43,11 +41,7 @@ export function QuantitySelector({
     }
   }
   return (
-    <div
-      className={classNames('quantity-selector-group', variant, className, {
-        'full-width': fullWidth,
-      })}
-    >
+    <div className={classNames('quantity-selector-group', variant, className)}>
       {!hideLabel && (
         <Label required={props.required} htmlFor={id}>
           {label}

package/src/atoms/Select/Select.scss

@@ -4,15 +4,11 @@
 @use '../../settings/depth';
 @use '../../settings/mixins';
 
-$elements-space: config.$space-2x;
 
 .select-group {
   display: flex;
   flex-direction: column;
-
-  label {
-    margin-bottom: $elements-space;
-  }
+  gap: config.$space-2x;
 
   .select {
     @include typography.select-text;
@@ -35,9 +31,6 @@ $elements-space: config.$space-2x;
     height: config.$icon-size-3x;
   }
 
-  .help-text {
-    margin-top: $elements-space;
-  }
 
   &.primary {
     &.disabled .select-container {
@@ -127,7 +120,7 @@ $elements-space: config.$space-2x;
       overflow-y: auto;
       overflow-anchor: none;
       z-index: depth.$z-dropdown-options;
-      margin: $elements-space 0 0;
+      margin: 0;
       padding: config.$space-1x 0;
       text-align: left;
       position: absolute;

package/src/atoms/Select/Select.tsx

@@ -29,7 +29,6 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string) => void
   isSearchable?: boolean
   searchLabel?: string
-  fullWidth?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -51,7 +50,6 @@ export function Select({
   defaultValue,
   isSearchable = false,
   searchLabel = 'Search',
-  fullWidth = false,
   ...props
 }: SelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
@@ -81,7 +79,6 @@ export function Select({
         disabled,
         filled: selectedOption.id,
         invalid: isInvalid,
-        'full-width': fullWidth,
       })}
       ref={selectRef}
     >

package/src/atoms/TabMenu/TabMenu.scss

@@ -12,7 +12,6 @@
   .tabmenu {
     position: absolute;
     top: 0px;
-    z-index: 999;
     display: flex;
     flex-direction: row;
     list-style-type: none;
@@ -43,7 +42,7 @@
 
         &.active {
           color: color_alias.$primary-color-600;
-          border-bottom: 2px solid color_alias.$primary-color-600;
+          border-bottom: 3px solid color_alias.$primary-color-600;
         }
 
         &.disabled {
@@ -59,7 +58,6 @@
   }
 
   .tabmenu-divider {
-    z-index: 1;
     position: absolute;
     top: 28px;
     width: 100%;

package/src/atoms/TextArea.tsx

@@ -15,7 +15,6 @@ export interface TextAreaProps
   variant?: TextAreaVariant
   id?: string
   errors?: string[]
-  fullWidth?: boolean
 }
 
 export function TextArea({
@@ -29,7 +28,6 @@ export function TextArea({
   disabled,
   name,
   errors,
-  fullWidth = false,
   ...props
 }: TextAreaProps) {
   const identifier = id || name
@@ -37,7 +35,6 @@ export function TextArea({
     <div
       className={classNames('input-group', variant, className, {
         invalid: errors?.length,
-        'full-width': fullWidth,
       })}
     >
       {!hideLabel && (

package/src/icons/index.tsx

@@ -11,7 +11,6 @@ import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
 import CheckboxIndeterminate from './checkbox-indeterminate.svg'
-import ClassicView from './classic-view.svg'
 import Client from './client.svg'
 import Close from './close.svg'
 import Comment from './comment.svg'
@@ -37,7 +36,6 @@ import Invoice from './invoice.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
 import Minus from './minus.svg'
-import NewView from './new-view.svg'
 import PDF from './pdf.svg'
 import Product from './product.svg'
 import Reason from './reason.svg'
@@ -67,7 +65,6 @@ export {
   CheckboxActive,
   CheckboxInactive,
   CheckboxIndeterminate,
-  ClassicView,
   Client,
   Close,
   Comment,
@@ -93,7 +90,6 @@ export {
   Loading,
   Logout,
   Minus,
-  NewView,
   PDF,
   Product,
   Reason,

package/src/stories/Button.stories.ts

@@ -50,10 +50,6 @@ const meta = {
       description: 'Is the button visible?',
       control: { type: 'boolean' },
     },
-    fullWidth: {
-      description: 'Makes the Button take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/Changelog.mdx

@@ -6,22 +6,20 @@ import { Meta } from "@storybook/blocks";
 
 ## 0.34.6
 
-* Add `fullWidth` prop to Select, Button, Input, MultiSelect, TextArea, QuantitySelector, DateRangePicker, DateSinglePicker components
-* Fix extra space when open Select and MultiSelect components
-* Add variant `Borderless` to Input component
-* Add prop `ellipsis` to Input component
-* Add variant `Secondary` to Collapsible component
-* Add `classic-view` and `new-view` to icons
-* Add InputWithButton component
+* Fix TabMenu active link border
 
-## 0.33.4
+## 0.34.5
 
-* Add hasAction and onClick props to Divider component
+* Fix TabMenu styles
 
-## 0.34.3
+## 0.34.4
 
 * Update DatePicker related stories with a defaultValue
 
+## 0.33.4
+
+* Add hasAction and onClick props to Divider component
+
 ## 0.33.1
 
 * Add onChange prop to RadioGroup component

package/src/stories/{Collapsible.stories.tsx → Collapsible.stories.js}

@@ -1,9 +1,10 @@
-import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
+import { Card } from '../atoms/Card'
 import { Collapsible } from '../atoms/Collapsible'
 import { Divider } from '../atoms/Divider'
-import { Actions, Form as FormComponent, FormContainer } from '../atoms/Form'
+import { Actions, Form as FormComponent } from '../atoms/Form'
+import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
 import { Select } from '../atoms/Select'
 
@@ -44,15 +45,10 @@ const meta = {
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
 
-export const Primary: Story = {
-  args: {
-    title: 'My personal data',
-    name: 'personal-data',
-    variant: 'primary',
-    disabled: false,
-    children: (
+export const Primary = {
+  render: () => (
+    <Collapsible title="My personal data" name="personal-data">
       <FormContainer fluid>
         <Input
           accessibilityLabel="Fill the form name"
@@ -99,40 +95,14 @@ export const Primary: Story = {
           variant="primary"
         />
       </FormContainer>
-    ),
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    open: true,
-    title: 'My personal data',
-    name: 'personal-data',
-    variant: 'secondary',
-    children: (
-      <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"
-      />
-    ),
-  },
+    </Collapsible>
+  ),
 }
 
 export const PrimaryOpened = {
-  args: {
-    title: 'My personal data',
-    name: 'personal-data',
-    variant: 'primary',
-    disabled: false,
-    open: true,
-    children: (
-      <>
+  render: () => (
+    <>
+      <Collapsible title="My personal data" name="personal-data" open>
         <Divider title="19/01/2025 - My gaming diary" variant="primary" />
         <FormContainer fluid>
           <Input
@@ -180,18 +150,26 @@ export const PrimaryOpened = {
             variant="primary"
           />
         </FormContainer>
-      </>
-    ),
-  },
+      </Collapsible>
+      <Collapsible title="Another data" name="another-data">
+        <Input label="Another data" name="anotherData" placeholder="..." />
+      </Collapsible>
+      <Collapsible
+        noHorizontalPadding
+        title="Important information"
+        name="no-horizontal-padding-example"
+      >
+        <Card>
+          <p>Not available</p>
+        </Card>
+      </Collapsible>
+    </>
+  ),
 }
 
-export const PrimaryDisabled: Story = {
-  args: {
-    title: 'My personal data',
-    name: 'personal-data',
-    variant: 'primary',
-    disabled: true,
-    children: (
+export const PrimaryDisabled = {
+  render: () => (
+    <Collapsible title="My personal data" name="personal-data" disabled>
       <FormContainer fluid>
         <Input
           accessibilityLabel="Fill the form name"
@@ -238,17 +216,13 @@ export const PrimaryDisabled: Story = {
           variant="primary"
         />
       </FormContainer>
-    ),
-  },
+    </Collapsible>
+  ),
 }
 
-export const Form: Story = {
-  args: {
-    form: true,
-    title: 'User',
-    name: 'user-form',
-    variant: 'primary',
-    children: (
+export const Form = {
+  render: () => (
+    <Collapsible open form title="User">
       <FormComponent>
         <Input label="First Name" placeholder="First Name" name="firstName" />
         <Input label="Last Name" placeholder="Last Name" name="lastName" />
@@ -257,6 +231,6 @@ export const Form: Story = {
           <Button type="submit" label="Sign in" variant="primary" />
         </Actions>
       </FormComponent>
-    ),
-  },
+    </Collapsible>
+  ),
 }

package/src/stories/DateRangePicker.stories.ts

@@ -49,11 +49,6 @@ const meta = {
         default: 'Date',
       },
     },
-    fullWidth: {
-      description:
-        'Makes the DateRangePicker take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/DateSinglePicker.stories.ts

@@ -49,11 +49,6 @@ const meta = {
         default: 'Date',
       },
     },
-    fullWidth: {
-      description:
-        'Makes the DateSinglePicker take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/Input.stories.ts

@@ -60,15 +60,6 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
-    fullWidth: {
-      description: 'Makes the input take the full width of the container',
-      type: 'boolean',
-    },
-    ellipsis: {
-      description:
-        'If true, the input will truncate the text with an ellipsis when it overflows',
-      type: 'boolean',
-    },
   },
 }
 
@@ -149,26 +140,3 @@ export const WithSuffix: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
-
-export const Borderless: Story = {
-  args: {
-    label: 'Delivery data',
-    defaultValue: '221b Baker St, London NW1, 6XE, United Kingdom',
-    variant: 'borderless',
-    readOnly: true,
-    helpText: 'This text can help you',
-    name: 'delivery_data',
-  },
-  parameters: figmaPrimaryDesign,
-}
-
-export const Ellipsis: Story = {
-  args: {
-    label: 'Label for input with ellipsis',
-    defaultValue:
-      "Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn., Nnnhafh'drn bug ep Tsathoggua sgn'wahl nghupadgh, nglui syha'h y-ee y-n'gha. NaflDagon y-zhro lw'nafh stell'bsna h'li'hee vulgtm R'lyeh hafh'drnyar, goka nnnAzathoth sgn'wahl gebor shogg ftaghu y'hah, naorr'e lloig hupadghog nageb k'yarnakagl ph'sgn'wahl. Nnngnaiih stell'bsna 'bthnk mnahn' h'goka hrii zhro hai 'fhalma h'geb, goka f'vulgtlagln nilgh'ri y-chtenff Hastur 'fhalma mnahn' fm'latgh. Nauln vulgtm y-shtunggli uaaah li'hee y'hah hlirgh, orr'e nglui hafh'drn ngstell'bsna ngep hupadgh, 'bthnkagl hafh'drnog s'uhn chtenff ya. Syha'h 'bthnk vulgtlagln ah zhro f'n'gha uh'e Nyarlathotep sgn'wahl ebunma 'ai fhtagn sll'ha ehye, ckadishtu hrii nahai 'ai ilyaa namg n'gha ooboshu mnahn' Azathoth cHastur wgah'n.",
-    name: 'ellipsis',
-    ellipsis: true,
-  },
-  parameters: figmaPrimaryDesign,
-}

package/src/stories/Multiselect.stories.ts

@@ -59,10 +59,6 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
-    fullWidth: {
-      description: 'Makes the Multiselect take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/QuantitySelector.stories.ts

@@ -48,11 +48,6 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
-    fullWidth: {
-      description:
-        'Makes the QuantitySelector take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/Select.stories.ts

@@ -59,10 +59,6 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
-    fullWidth: {
-      description: 'Makes the Select take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/stories/TextArea.stories.ts

@@ -47,10 +47,6 @@ const meta = {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
     },
-    fullWidth: {
-      description: 'Makes the TextArea take the full width of the container',
-      type: 'boolean',
-    },
   },
 }
 

package/src/atoms/InputWithButton/InputWithButton.scss

@@ -1,8 +0,0 @@
-@use '../../settings/config';
-
-.input-with-button {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: flex-end;
-  gap: config.$space-2x;
-}

package/src/atoms/InputWithButton/InputWithButton.tsx

@@ -1,10 +0,0 @@
-import './InputWithButton.scss'
-import React from 'react'
-
-interface InputWithButtonProps {
-  children: React.ReactNode
-}
-
-export function InputWithButton({ children }: InputWithButtonProps) {
-  return <div className="input-with-button">{children}</div>
-}

package/src/atoms/InputWithButton/index.tsx

@@ -1,3 +0,0 @@
-import { InputWithButton } from './InputWithButton'
-
-export { InputWithButton }

package/src/icons/classic-view.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#table-view__a)"><path d="M17.778 17.778v-3.334H2.222v3.334h15.556Zm0-5.556V7.778H2.222v4.444h15.556Zm0-6.666V2.222H2.222v3.334h15.556ZM2.222 20a2.14 2.14 0 0 1-1.57-.653A2.14 2.14 0 0 1 0 17.777V2.223c0-.61.218-1.134.653-1.57A2.14 2.14 0 0 1 2.223 0h15.555a2.14 2.14 0 0 1 1.57.653c.434.435.652.958.652 1.57v15.555a2.14 2.14 0 0 1-.653 1.57 2.14 2.14 0 0 1-1.57.652H2.223Z" fill="#161C26"/></g><defs><clipPath id="table-view__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/new-view.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#new-view__a)"><path d="M2.222 20a2.14 2.14 0 0 1-1.57-.653A2.14 2.14 0 0 1 0 17.777V2.223c0-.61.218-1.134.653-1.57A2.14 2.14 0 0 1 2.223 0h15.555a2.14 2.14 0 0 1 1.57.653c.434.435.652.958.652 1.57v15.555a2.14 2.14 0 0 1-.653 1.57 2.14 2.14 0 0 1-1.57.652H2.223Zm3.334-2.222V2.222H2.222v15.556h3.334Zm2.222 0h10V2.222h-10v15.556Z" fill="#161C26"/></g><defs><clipPath id="new-view__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/InputWithButton.stories.tsx

@@ -1,56 +0,0 @@
-import type { StoryObj } from '@storybook/react'
-import { Input } from '../atoms/Input'
-import { InputWithButton } from '../atoms/InputWithButton'
-
-const meta = {
-  title: 'Design System/Atoms/InputWithButton',
-  component: InputWithButton,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '<h2>Usage guidelines</h2>\n' +
-          '<p>The InputWithButton component is used when a user needs to input information and immediately trigger an action, such as searching, submitting, or generating content. It combines an input field with a complementary interactive element, typically a button, placed within the same container.</p>\n' +
-          '<ul>\n' +
-          '  <li>Use when the action is closely tied to the input (e.g., "Search", "Add", "Go")</li>\n' +
-          '  <li>Always include a visible label for accessibility and clarity</li>\n' +
-          '  <li>Use concise and descriptive button text or icons</li>\n' +
-          '  <li>Ensure the input and button are visually grouped and aligned</li>\n' +
-          '  <li>Support help and error text as in a standard input</li>\n' +
-          '  <li>Pass the button or other actionable element through the <code>children</code> prop</li>\n' +
-          '  <li>Do not overload with multiple actions—one clear purpose per instance</li>\n' +
-          '</ul>',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      description: 'prop is used to pass a input and button components.',
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    children: (
-      <>
-        <Input
-          fullWidth
-          ellipsis
-          defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-          variant="borderless"
-          label="Input with button"
-          id="input-with-button"
-          readOnly
-        />
-        <button type="button" className="button">
-          Action
-        </button>
-      </>
-    ),
-  },
-}