@digigov/ui 1.0.0-002c630d → 1.0.0-079f34f3d

package/src/form/DateInputContainer/index.mdx

@@ -11,34 +11,23 @@ import DateInputContainer from '@digigov/ui/form/DateInputContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer" story="WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/DateInputContainer"
-  story="WithErrorMessageForSingleField.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/src/form/ErrorMessage/index.mdx

@@ -14,11 +14,7 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/ErrorMessage"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/ErrorMessage" story="Default.tsx" />
 
 ## API
 

package/src/form/FileUpload/index.mdx

@@ -11,16 +11,14 @@ import FileUpload from '@digigov/ui/form/FileUpload';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/FileUpload" story="Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
+<Story packageName="@digigov/ui" component="form/FileUpload" story="WithErrorMessage.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="FileUpload" />

package/src/form/RadioContainer/RadioContainer.stories.js

@@ -14,3 +14,4 @@ export * from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
 export * from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';

package/src/form/RadioContainer/__stories__/ConditionalReveal.tsx

@@ -26,7 +26,7 @@ export const ConditionalReveal = () => (
         </RadioItem>
         <RadioConditional>
           Ηλεκτρονική διεύθυνση email
-          <TextInput name="email" cellWidth="one-third" />
+          <TextInput name="email" width="33.3%" />
         </RadioConditional>
         <RadioItem name="contact" value="phone">
           Τηλέφωνο

package/src/form/RadioContainer/__stories__/Inline.tsx

@@ -17,7 +17,7 @@ export const Inline = () => (
         Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
         γράφετε το όνομα σας.
       </Hint>
-      <RadioContainer inline>
+      <RadioContainer layout='horizontal'>
         <RadioItem name="changed_name" value="yes">
           Ναι
         </RadioItem>

package/src/form/RadioContainer/__stories__/InlineWithDivider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const InlineWithDivider = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="name-hint">
+      <FieldsetLegend>Έχετε αλλάξει το όνομα σας;</FieldsetLegend>
+      <Hint id="name-hint">
+        Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
+        γράφετε το όνομα σας.
+      </Hint>
+      <RadioContainer layout='horizontal'>
+        <RadioItem name="changed_name" value="yes">
+          Ναι
+        </RadioItem>
+        <RadioItem name="changed_name" value="no" divider='ή'>
+          Όχι
+        </RadioItem>
+      </RadioContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default InlineWithDivider;

package/src/form/RadioContainer/index.mdx

@@ -11,48 +11,28 @@ import RadioContainer from '@digigov/ui/form/RadioContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Inline.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="Inline.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -60,21 +40,18 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/RadioContainer" story="WithErrorMessage.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Radio
+implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.
 
 ## API
 

package/src/form/SearchContainer/index.tsx

@@ -0,0 +1,6 @@
+export * from '@digigov/react-core/SearchContainer';
+export * from '@digigov/react-core/SearchButton';
+export * from '@digigov/react-icons/SearchIcon';
+
+import SearchContainer from '@digigov/react-core/SearchContainer';
+export default SearchContainer;

package/src/form/SelectContainer/__stories__/Default.tsx

@@ -12,10 +12,10 @@ export const Default = () => (
     <LabelContainer>
       Ταξινόμηση
       <SelectContainer name="select-list" aria-label="ταξινόμηση">
-        <SelectOption value="dim">Δημοφιλή</SelectOption>
-        <SelectOption value="kat">Πρόσφατα</SelectOption>
-        <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
-        <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
+        <SelectOption value="popular">Δημοφιλή</SelectOption>
+        <SelectOption value="recent">Πρόσφατα</SelectOption>
+        <SelectOption value="views">Περισσότερες προβολές</SelectOption>
+        <SelectOption value="comments">Περισσότερα σχόλια</SelectOption>
       </SelectContainer>
     </LabelContainer>
   </FieldContainer>

package/src/form/SelectContainer/index.mdx

@@ -11,32 +11,26 @@ import SelectContainer from '@digigov/ui/form/SelectContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
+
+## Accessibility
 
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/src/form/SingleCharacterInputs/SingleCharacterInput.stories.js

@@ -0,0 +1,13 @@
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+export default {
+  title: 'Digigov UI/form/SingleCharacterInputs',
+  description:
+    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
+  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
+  component: SingleCharacterInputs,
+  displayName: 'SingleCharacterInputs',
+};
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
+export * from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/Default.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
@@ -19,14 +19,14 @@ export const Default = () => (
       <Hint id='code-hint'>
         Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.
       </Hint>
-      <SingleCharacterInputContainer>
-        <SingleCharacterInputItem name="first-digit" value={4} />
-        <SingleCharacterInputItem name="second-digit" value={4} />
-        <SingleCharacterInputItem name="third-digit" value={5} />
-        <SingleCharacterInputItem name="forth-digit" value={1} />
-        <SingleCharacterInputItem name="fifth-digit" value={2} />
-        <SingleCharacterInputItem name="sixth-digit" value={3} />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs>
+        <SingleCharacterInput name="first-digit" defaultValue={4} />
+        <SingleCharacterInput name="second-digit" defaultValue={4} />
+        <SingleCharacterInput name="third-digit" defaultValue={5} />
+        <SingleCharacterInput name="forth-digit" defaultValue={1} />
+        <SingleCharacterInput name="fifth-digit" defaultValue={2} />
+        <SingleCharacterInput name="sixth-digit" defaultValue={3} />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithDefaultError.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithDefaultError = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Το πεδίο είναι υποχρεωτικό.
       </ErrorMessage>
-      <SingleCharacterInputContainer>
-        <SingleCharacterInputItem name="first-digit" error />
-        <SingleCharacterInputItem name="second-digit" error />
-        <SingleCharacterInputItem name="third-digit" error />
-        <SingleCharacterInputItem name="forth-digit" error />
-        <SingleCharacterInputItem name="fifth-digit" error />
-        <SingleCharacterInputItem name="sixth-digit" error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs>
+        <SingleCharacterInput name="first-digit" error />
+        <SingleCharacterInput name="second-digit" error />
+        <SingleCharacterInput name="third-digit" error />
+        <SingleCharacterInput name="forth-digit" error />
+        <SingleCharacterInput name="fifth-digit" error />
+        <SingleCharacterInput name="sixth-digit" error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageInvalidCode.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithErrorMessageInvalidCode = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Έχετε εισάγει λάθος κωδικό.
       </ErrorMessage>
-      <SingleCharacterInputContainer aria-describedby='code-error'>
-        <SingleCharacterInputItem name="first-digit" value={4} error />
-        <SingleCharacterInputItem name="second-digit" value={4} error />
-        <SingleCharacterInputItem name="third-digit" value={5} error />
-        <SingleCharacterInputItem name="forth-digit" value={1} error />
-        <SingleCharacterInputItem name="fifth-digit" value={2} error />
-        <SingleCharacterInputItem name="sixth-digit" value={3} error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs aria-describedby='code-error'>
+        <SingleCharacterInput name="first-digit" defaultValue={4} error />
+        <SingleCharacterInput name="second-digit" defaultValue={4} error />
+        <SingleCharacterInput name="third-digit" defaultValue={5} error />
+        <SingleCharacterInput name="forth-digit" defaultValue={1} error />
+        <SingleCharacterInput name="fifth-digit" defaultValue={2} error />
+        <SingleCharacterInput name="sixth-digit" defaultValue={3} error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageLessDigit.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithErrorMessageLessDigit = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Έχετε συμπληρώσει λιγότερα από 6 ψηφία.
       </ErrorMessage>
-      <SingleCharacterInputContainer aria-describedby='code-error'>
-        <SingleCharacterInputItem name="first-digit" value="6" />
-        <SingleCharacterInputItem name="second-digit" value="4" />
-        <SingleCharacterInputItem name="third-digit" value="5" />
-        <SingleCharacterInputItem name="forth-digit" error />
-        <SingleCharacterInputItem name="fifth-digit" error />
-        <SingleCharacterInputItem name="sixth-digit" error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs aria-describedby='code-error'>
+        <SingleCharacterInput name="first-digit" defaultValue="6" />
+        <SingleCharacterInput name="second-digit" defaultValue="4" />
+        <SingleCharacterInput name="third-digit" defaultValue="5" />
+        <SingleCharacterInput name="forth-digit" error />
+        <SingleCharacterInput name="fifth-digit" error />
+        <SingleCharacterInput name="sixth-digit" error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/SingleCharacterInputs/index.mdx

@@ -0,0 +1,24 @@
+---
+id: single-character-inputs
+title: SingleCharacterInputs
+---
+
+# SingleCharacterInput
+
+```bash
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="Default.tsx" />
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />

package/src/form/SingleCharacterInputs/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputs';
+export * from '@digigov/react-core/SingleCharacterInput';
+import SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+export default SingleCharacterInputs;

package/src/form/TextArea/index.mdx

@@ -11,65 +11,37 @@ import TextArea from '@digigov/ui/form/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="DisabledInput.tsx" />
 
 ## API
 

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -9,37 +9,37 @@ export const FixedWidths = () => (
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={20}></TextInput>
+         <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={10}></TextInput>
+         <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={5}></TextInput>
+         <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={4}></TextInput>
+         <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={3}></TextInput>
+         <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={2}></TextInput>
+         <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
   </>

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -9,37 +9,37 @@ export const FluidWidths = () => (
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
-        <TextInput name="inputext" cellWidth="full"></TextInput>
+        <TextInput name="inputext" width='full'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στα τρία-τέταρτα</LabelTitle>
-        <TextInput name="inputext" cellWidth="three-quarters"></TextInput>
+        <TextInput name="inputext" width='75%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στα δύο-τρίτα</LabelTitle>
-        <TextInput name="inputext" cellWidth="two-thirds"></TextInput>
+        <TextInput name="inputext" width='66.6%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο μισό</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-half"></TextInput>
+        <TextInput name="inputext" width='50%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο ένα-τρίτο</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-third"></TextInput>
+        <TextInput name="inputext" width='33.3%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο ένα-τέταρτο</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-quarter"></TextInput>
+        <TextInput name="inputext" width='25%'></TextInput>
       </LabelContainer>
     </FieldContainer>
   </>