@dnb/eufemia 10.69.1 → 10.70.1

package/cjs/components/dropdown/Dropdown.d.ts

@@ -20,81 +20,81 @@ type DropdownAlignDropdown = 'left' | 'right';
 type DropdownTriggerElement = ((...args: any[]) => any) | React.ReactNode;
 export interface DropdownProps {
   /**
-   * Give a title to let the users know what they have to do. Defaults to `Valgmeny`.
+   * give a title to let the users know what they have to do. Defaults to `Valgmeny`.
    */
   title?: DropdownTitle;
   /**
-   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
+   * defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
    */
   variant?: ButtonVariant;
   /**
-   * Icon to be included in the dropdown.
+   * icon to be included in the dropdown.
    */
   icon?: IconIcon;
   /**
-   * Change the size of the icon pragmatically.
+   * change the size of the icon pragmatically.
    */
   icon_size?: IconSize;
   /**
-   * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
+   * position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
    */
   icon_position?: ButtonIconPosition;
   /**
-   * Prepends the Form Label component. If no ID is provided, a random ID is created.
+   * prepends the Form Label component. If no ID is provided, a random ID is created.
    */
   label?: React.ReactNode;
   /**
-   * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
+   * use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
    */
   label_direction?: FormLabelLabelDirection;
   /**
-   * Use `true` to make the label only readable by screen readers.
+   * use `true` to make the label only readable by screen readers.
    */
   label_sr_only?: boolean;
   /**
-   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
+   * text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */
   status?: FormStatusText;
   /**
-   * Defines the state of the status. It's two statuses `[error, info]`. Defaults to `error`.
+   * defines the state of the status. It's two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: FormStatusState;
   /**
-   * Use an object to define additional FormStatus properties.
+   * use an object to define additional FormStatus properties.
    */
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
-   * By providing a React.ref you can get the internally used main element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * by providing a React.ref you can get the internally used main element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   innerRef?: React.Ref;
   /**
-   * By providing a React.ref you can get the internally used button element (DOM). E.g. `buttonRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * by providing a React.ref you can get the internally used button element (DOM). E.g. `buttonRef={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   buttonRef?: React.Ref;
   /**
-   * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.
+   * same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.
    */
   more_menu?: boolean;
   /**
-   * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`.
+   * use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`.
    */
   align_dropdown?: DropdownAlignDropdown;
   /**
-   * Lets you provide a custom React element as the trigger HTML element.
+   * lets you provide a custom React element as the trigger HTML element.
    */
   trigger_element?: DropdownTriggerElement;
   /**
-   * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
+   * if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
    */
   open_on_focus?: boolean;
   disabled?: boolean;
   /**
-   * If set to `true`, then the dropdown will be 100% in available `width`.
+   * if set to `true`, then the dropdown will be 100% in available `width`.
    */
   stretch?: boolean;
   /**
@@ -102,7 +102,7 @@ export interface DropdownProps {
    */
   skeleton?: SkeletonShow;
   /**
-   * Text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component.
+   * text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component.
    */
   suffix?: DrawerListSuffix;
   on_show_focus?: (...args: any[]) => any;

package/cjs/components/dropdown/DropdownDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const DropdownEvents: PropertiesTableProps;
+export declare const DropdownProperties: PropertiesTableProps;

package/cjs/components/dropdown/DropdownDocs.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownProperties = exports.DropdownEvents = void 0;
+const DropdownEvents = exports.DropdownEvents = {
+  on_change: {
+    doc: 'will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_select: {
+    doc: 'will be called once the user focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_show: {
+    doc: 'will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.',
+    type: 'function',
+    status: 'optional'
+  },
+  on_hide: {
+    doc: 'will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+const DropdownProperties = exports.DropdownProperties = {
+  title: {
+    doc: 'give a title to let the users know what they have to do. Defaults to `Valgmeny`.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  value: {
+    doc: 'define a preselected data entry (index). More info down below.',
+    type: 'number',
+    status: 'optional'
+  },
+  variant: {
+    doc: 'defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.',
+    type: ['primary', 'secondary', 'tertiary', 'signal'],
+    status: 'optional'
+  },
+  icon: {
+    doc: 'icon to be included in the dropdown.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  icon_size: {
+    doc: 'change the size of the icon pragmatically.',
+    type: 'string',
+    status: 'optional'
+  },
+  icon_position: {
+    doc: 'position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  triangle_position: {
+    doc: 'position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',
+    type: ['small', 'default', 'medium', 'large'],
+    status: 'optional'
+  },
+  opened: {
+    doc: 'if set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  open_on_focus: {
+    doc: 'if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  prevent_selection: {
+    doc: 'if set to `true`, no permanent selection will be made. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  action_menu: {
+    doc: 'same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  more_menu: {
+    doc: 'same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  align_dropdown: {
+    doc: 'use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  independent_width: {
+    doc: "If set to `true`, the Dropdown will handle it's width independent to the content width. Defaults to `false`.",
+    type: 'boolean',
+    status: 'optional'
+  },
+  skip_portal: {
+    doc: 'set to `true` to disable the React Portal behavior. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'if set to `true`, then the dropdown will be 100% in available `width`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  status: {
+    doc: 'text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
+    type: ['error', 'info', 'boolean'],
+    status: 'optional'
+  },
+  status_state: {
+    doc: "defines the state of the status. It's two statuses `[error, info]`. Defaults to `error`.",
+    type: ['error', 'info'],
+    status: 'optional'
+  },
+  status_props: {
+    doc: 'use an object to define additional FormStatus properties.',
+    type: 'object',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'object',
+    status: 'optional'
+  },
+  label: {
+    doc: 'prepends the Form Label component. If no ID is provided, a random ID is created.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.',
+    type: ['horizontal', 'vertical'],
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  suffix: {
+    doc: 'text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  trigger_element: {
+    doc: 'lets you provide a custom React element as the trigger HTML element.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'by providing a React.ref you can get the internally used main element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.RefObject',
+    status: 'optional'
+  },
+  buttonRef: {
+    doc: 'by providing a React.ref you can get the internally used button element (DOM). E.g. `buttonRef={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.RefObject',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {
+    doc: 'all DrawerList properties.',
+    type: 'Various',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=DropdownDocs.js.map

package/cjs/components/dropdown/DropdownDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownDocs.js","names":["DropdownEvents","exports","on_change","doc","type","status","on_select","on_show","on_hide","DropdownProperties","title","value","variant","icon","icon_size","icon_position","triangle_position","size","opened","open_on_focus","prevent_selection","action_menu","more_menu","align_dropdown","independent_width","skip_portal","stretch","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","trigger_element","innerRef","buttonRef","skeleton"],"sources":["../../../../src/components/dropdown/DropdownDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const DropdownEvents: PropertiesTableProps = {\n  on_change: {\n    doc: 'will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'will be called once the user focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const DropdownProperties: PropertiesTableProps = {\n  title: {\n    doc: 'give a title to let the users know what they have to do. Defaults to `Valgmeny`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  value: {\n    doc: 'define a preselected data entry (index). More info down below.',\n    type: 'number',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.',\n    type: ['primary', 'secondary', 'tertiary', 'signal'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'icon to be included in the dropdown.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: ['small', 'default', 'medium', 'large'],\n    status: 'optional',\n  },\n  opened: {\n    doc: 'if set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'if set to `true`, no permanent selection will be made. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  action_menu: {\n    doc: 'same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  more_menu: {\n    doc: 'same as `prevent_selection`, but the \"selection area\" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_dropdown: {\n    doc: 'use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  independent_width: {\n    doc: \"If set to `true`, the Dropdown will handle it's width independent to the content width. Defaults to `false`.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'if set to `true`, then the dropdown will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  status: {\n    doc: 'text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  status_state: {\n    doc: \"defines the state of the status. It's two statuses `[error, info]`. Defaults to `error`.\",\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  label: {\n    doc: 'prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: ['horizontal', 'vertical'],\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  trigger_element: {\n    doc: 'lets you provide a custom React element as the trigger HTML element.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'by providing a React.ref you can get the internally used main element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  buttonRef: {\n    doc: 'by providing a React.ref you can get the internally used button element (DOM). E.g. `buttonRef={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/flex/ContainerDocs.js

@@ -61,7 +61,7 @@ const FlexContainerProperties = exports.FlexContainerProperties = {
   },
   innerRef: {
     doc: 'Provide a React.Ref to accessing the inner HTML element.',
-    type: 'React.Ref',
+    type: 'React.RefObject',
     defaultValue: 'undefined',
     status: 'optional'
   },

package/cjs/components/flex/ContainerDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContainerDocs.js","names":["FlexContainerProperties","exports","direction","doc","type","defaultValue","status","wrap","justify","align","divider","sizeCount","gap","rowGap","element","innerRef","spacing"],"sources":["../../../../src/components/flex/ContainerDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const FlexContainerProperties: PropertiesTableProps = {\n  direction: {\n    doc: 'Direction of sub components. Can be: `horizontal` or `vertical`.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'Define if we should wrap contents if there is not enough space.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  justify: {\n    doc: 'How to place sub components if there is space available in the container.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'space-between'`,\n      `'space-around'`,\n      `'space-evenly'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  align: {\n    doc: 'How to align sub components.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'stretch'`,\n      `'baseline'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  divider: {\n    doc: 'How to separate sub components.',\n    type: [`'space'`, `'line'`, `'line-framed'`],\n    defaultValue: `'space'`,\n    status: 'optional',\n  },\n  sizeCount: {\n    doc: 'Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item).',\n    type: 'number',\n    defaultValue: '12',\n    status: 'optional',\n  },\n  gap: {\n    doc: 'How much space between child items. Use `false` for no spacing. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  rowGap: {\n    doc: 'How much space between rows. Use `false` for no row gap. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element.',\n    type: ['string', 'React.Element'],\n    defaultValue: `'div'`,\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Provide a React.Ref to accessing the inner HTML element.',\n    type: 'React.Ref',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Deprecated, use `gap` instead. ~~How much space between sub components. Can be `false` for no spacing.~~',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'deprecated',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,uBAA6C,GAAAC,OAAA,CAAAD,uBAAA,GAAG;EAC3DE,SAAS,EAAE;IACTC,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;IACpCC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJJ,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,SAAS;IACfC,YAAY,EAAE,MAAM;IACpBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPL,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,CACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,CACjB;IACDC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLN,GAAG,EAAE,8BAA8B;IACnCC,IAAI,EAAE,CACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,CACb;IACDC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPP,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC;IAC5CC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTR,GAAG,EAAE,oIAAoI;IACzIC,IAAI,EAAE,QAAQ;IACdC,YAAY,EAAE,IAAI;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,GAAG,EAAE;IACHT,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNV,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,OAAO,EAAE;IACPX,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,YAAY,EAAE,OAAO;IACrBC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRZ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfE,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"ContainerDocs.js","names":["FlexContainerProperties","exports","direction","doc","type","defaultValue","status","wrap","justify","align","divider","sizeCount","gap","rowGap","element","innerRef","spacing"],"sources":["../../../../src/components/flex/ContainerDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const FlexContainerProperties: PropertiesTableProps = {\n  direction: {\n    doc: 'Direction of sub components. Can be: `horizontal` or `vertical`.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  wrap: {\n    doc: 'Define if we should wrap contents if there is not enough space.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  justify: {\n    doc: 'How to place sub components if there is space available in the container.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'space-between'`,\n      `'space-around'`,\n      `'space-evenly'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  align: {\n    doc: 'How to align sub components.',\n    type: [\n      `'flex-start'`,\n      `'flex-end'`,\n      `'center'`,\n      `'stretch'`,\n      `'baseline'`,\n    ],\n    defaultValue: `'flex-start'`,\n    status: 'optional',\n  },\n  divider: {\n    doc: 'How to separate sub components.',\n    type: [`'space'`, `'line'`, `'line-framed'`],\n    defaultValue: `'space'`,\n    status: 'optional',\n  },\n  sizeCount: {\n    doc: 'Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item).',\n    type: 'number',\n    defaultValue: '12',\n    status: 'optional',\n  },\n  gap: {\n    doc: 'How much space between child items. Use `false` for no spacing. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  rowGap: {\n    doc: 'How much space between rows. Use `false` for no row gap. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element.',\n    type: ['string', 'React.Element'],\n    defaultValue: `'div'`,\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Provide a React.Ref to accessing the inner HTML element.',\n    type: 'React.RefObject',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Deprecated, use `gap` instead. ~~How much space between sub components. Can be `false` for no spacing.~~',\n    type: [\n      `'xx-small'`,\n      `'x-small'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n      'false',\n    ],\n    defaultValue: `'small'`,\n    status: 'deprecated',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,uBAA6C,GAAAC,OAAA,CAAAD,uBAAA,GAAG;EAC3DE,SAAS,EAAE;IACTC,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC;IACpCC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJJ,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,SAAS;IACfC,YAAY,EAAE,MAAM;IACpBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPL,GAAG,EAAE,2EAA2E;IAChFC,IAAI,EAAE,CACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,CACjB;IACDC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLN,GAAG,EAAE,8BAA8B;IACnCC,IAAI,EAAE,CACJ,cAAc,EACd,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,CACb;IACDC,YAAY,EAAE,cAAc;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPP,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC;IAC5CC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTR,GAAG,EAAE,oIAAoI;IACzIC,IAAI,EAAE,QAAQ;IACdC,YAAY,EAAE,IAAI;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,GAAG,EAAE;IACHT,GAAG,EAAE,oJAAoJ;IACzJC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDO,MAAM,EAAE;IACNV,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV,CAAC;EACDQ,OAAO,EAAE;IACPX,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,YAAY,EAAE,OAAO;IACrBC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRZ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,iBAAiB;IACvBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfE,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPb,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,CACJ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,CACR;IACDC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/flex/ItemDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const FlexItemProperties: PropertiesTableProps;

package/cjs/components/flex/ItemDocs.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlexItemProperties = void 0;
+const FlexItemProperties = exports.FlexItemProperties = {
+  grow: {
+    doc: 'True to expand in width/height when there is more space available. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  shrink: {
+    doc: 'True to shrink in width/height when there is not enough space available for all components within the container. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  size: {
+    doc: 'To set the size (parts) in percentage with numbers from 1 to 12 (`sizeCount`). You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. You can also use the value `auto` to disable it on a specific screen size. Wrap your Flex.Items inside a [Flex.Container](/uilib/layout/flex/container).',
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  element: {
+    doc: 'Define the type of element. Defaults to `div`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'Provide a React.Ref to accessing the inner HTML element.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ItemDocs.js.map

package/cjs/components/flex/ItemDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemDocs.js","names":["FlexItemProperties","exports","grow","doc","type","status","shrink","size","element","innerRef"],"sources":["../../../../src/components/flex/ItemDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const FlexItemProperties: PropertiesTableProps = {\n  grow: {\n    doc: 'True to expand in width/height when there is more space available. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  shrink: {\n    doc: 'True to shrink in width/height when there is not enough space available for all components within the container. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  size: {\n    doc: 'To set the size (parts) in percentage with numbers from 1 to 12 (`sizeCount`). You can also provide [Media Query](/uilib/usage/layout/media-queries/) types in an object. You can also use the value `auto` to disable it on a specific screen size. Wrap your Flex.Items inside a [Flex.Container](/uilib/layout/flex/container).',\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Provide a React.Ref to accessing the inner HTML element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,kBAAwC,GAAAC,OAAA,CAAAD,kBAAA,GAAG;EACtDE,IAAI,EAAE;IACJC,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oUAAoU;IACzUC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/form-label/FormLabelDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const FormLabelProperties: PropertiesTableProps;

package/cjs/components/form-label/FormLabelDocs.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormLabelProperties = void 0;
+const FormLabelProperties = exports.FormLabelProperties = {
+  forId: {
+    doc: 'the same unique `id` like the linked HTML element has.',
+    type: 'string',
+    status: 'required'
+  },
+  text: {
+    doc: 'the `text` of the label. You can use `children` as well.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  srOnly: {
+    doc: 'when `true`, the label will be invisible and only accessible for screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'if set to `true`, will do the same as `label_direction` when set to **vertical**.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  size: {
+    doc: 'define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.',
+    type: ['medium', 'large'],
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disabled: {
+    doc: 'if set to `true`, the label will behave as not interactive.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  element: {
+    doc: 'defines the HTML element used. Defaults to `label`.',
+    type: 'React.Element',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'attach a React Ref to the inner label `element`.',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=FormLabelDocs.js.map

package/cjs/components/form-label/FormLabelDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabelDocs.js","names":["FormLabelProperties","exports","forId","doc","type","status","text","srOnly","vertical","size","skeleton","disabled","element","innerRef"],"sources":["../../../../src/components/form-label/FormLabelDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const FormLabelProperties: PropertiesTableProps = {\n  forId: {\n    doc: 'the same unique `id` like the linked HTML element has.',\n    type: 'string',\n    status: 'required',\n  },\n  text: {\n    doc: 'the `text` of the label. You can use `children` as well.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  srOnly: {\n    doc: 'when `true`, the label will be invisible and only accessible for screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'if set to `true`, will do the same as `label_direction` when set to **vertical**.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  size: {\n    doc: 'define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.',\n    type: ['medium', 'large'],\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'if set to `true`, the label will behave as not interactive.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'defines the HTML element used. Defaults to `label`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'attach a React Ref to the inner label `element`.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,mBAAyC,GAAAC,OAAA,CAAAD,mBAAA,GAAG;EACvDE,KAAK,EAAE;IACLC,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/form-row/FormRow.d.ts

@@ -14,23 +14,68 @@ export interface FormRowProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
   id?: string;
+  /**
+   * use either the `label` property or provide a custom one.
+   */
   label?: React.ReactNode;
+  /**
+   * use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.
+   */
   label_direction?: FormLabelLabelDirection;
+  /**
+   * use `true` to make the label only readable by screen readers.
+   */
   label_sr_only?: boolean;
   label_id?: string;
+  /**
+   * if you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define your styling class with the `label_class` property.
+   */
   label_class?: string;
   no_label?: boolean;
+  /**
+   * if set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` **is only used if a `label` is provided**. Defaults to `false`.
+   */
   no_fieldset?: boolean;
+  /**
+   * Send along a different locale to all nested components.
+   */
   locale?: InternalLocale;
+  /**
+   * forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   */
   wrap?: boolean;
+  /**
+   * to define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
   direction?: FormRowDirection;
+  /**
+   * will force both `direction` and `label_direction` to be **vertical** if set to `true`
+   */
   vertical?: boolean;
+  /**
+   * will center all children vertically as long as the screen does not hit a mobile width.
+   */
   centered?: boolean;
+  /**
+   * to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
+   */
   section_style?: SectionStyleTypes;
+  /**
+   * to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
+   */
   section_spacing?: SectionSpacing;
   globalStatus?: GlobalStatusConfigObject;
+  /**
+   * to force responsiveness on form components (like [Input](/uilib/components/input) and their labels ([FormLabel](/uilib/components/form-label)), set the property to `true`. Defaults to `false`.
+   */
   responsive?: boolean;
+  /**
+   * if set to `true`, every component inside will be disabled. Defaults to `false`.
+   */
   disabled?: boolean;
+  /**
+   * If set to `true`, an overlaying skeleton with animation will be shown.
+   */
   skeleton?: SkeletonShow;
   skipContentWrapperIfNested?: boolean;
   className?: string;

package/cjs/components/form-row/FormRowDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const FormRowProperties: PropertiesTableProps;