@dnb/eufemia 10.69.1 → 10.70.1

package/cjs/components/radio/RadioDocs.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioProperties = exports.RadioGroupProperties = exports.RadioGroupEvents = exports.RadioEvents = void 0;
+const RadioProperties = exports.RadioProperties = {
+  value: {
+    doc: 'defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**.',
+    type: 'string',
+    status: 'required'
+  },
+  checked: {
+    doc: 'determine whether the radio is checked or not. Default will be `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  group: {
+    doc: 'use a unique group identifier to define the Radio buttons that belongs together.',
+    type: 'string',
+    status: 'optional'
+  },
+  size: {
+    doc: 'the size of the Radio button. For now there is **medium** (default) and **large**.',
+    type: ['medium', 'large'],
+    status: 'optional'
+  },
+  label: {
+    doc: 'use either the `label` property or provide a custom one.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  label_position: {
+    doc: 'defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',
+    type: ['left', 'right'],
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'use `true` to make the label only readable by screen readers.',
+    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: 'Various',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'Various',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',
+    type: 'React.RefObject',
+    status: 'optional'
+  }
+};
+const RadioGroupProperties = exports.RadioGroupProperties = {
+  value: {
+    doc: 'defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value.',
+    type: 'string',
+    status: 'optional'
+  },
+  name: {
+    doc: 'custom grouping name. Defaults to a random name.',
+    type: 'string',
+    status: 'optional'
+  },
+  layout_direction: {
+    doc: 'Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`.',
+    type: ['column', 'row'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'the size of the Radio button. For now there is **medium** (default) and **large**.',
+    type: ['medium', 'large'],
+    status: 'optional'
+  },
+  status: {
+    doc: 'uses the `form-status` component to show failure messages.',
+    type: ['string', '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: 'Various',
+    status: 'optional'
+  },
+  globalStatus: {
+    doc: 'the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
+    type: 'Various',
+    status: 'optional'
+  },
+  label: {
+    doc: 'use either the `label` property or provide a custom one.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  label_direction: {
+    doc: 'to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.',
+    type: ['vertical', 'horizontal'],
+    status: 'optional'
+  },
+  label_sr_only: {
+    doc: 'use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  vertical: {
+    doc: 'will force both `direction` and `label_direction` to be **vertical** if set to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+const RadioEvents = exports.RadioEvents = {
+  on_change: {
+    doc: 'will be called on state changes made by the user. Returns an object `{ checked, value, event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+const RadioGroupEvents = exports.RadioGroupEvents = {
+  on_change: {
+    doc: 'will be called once a Radio button changes the state. Returns an object `{ value, event }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=RadioDocs.js.map

package/cjs/components/radio/RadioDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioDocs.js","names":["RadioProperties","exports","value","doc","type","status","checked","group","size","label","label_position","label_sr_only","status_state","status_props","globalStatus","innerRef","RadioGroupProperties","name","layout_direction","label_direction","vertical","RadioEvents","on_change","RadioGroupEvents"],"sources":["../../../../src/components/radio/RadioDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const RadioProperties: PropertiesTableProps = {\n  value: {\n    doc: 'defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**.',\n    type: 'string',\n    status: 'required',\n  },\n  checked: {\n    doc: 'determine whether the radio is checked or not. Default will be `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  group: {\n    doc: 'use a unique group identifier to define the Radio buttons that belongs together.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'the size of the Radio button. For now there is **medium** (default) and **large**.',\n    type: ['medium', 'large'],\n    status: 'optional',\n  },\n  label: {\n    doc: 'use either the `label` property or provide a custom one.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  label_position: {\n    doc: 'defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',\n    type: ['left', 'right'],\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  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: 'Various',\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: 'Various',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n}\n\nexport const RadioGroupProperties: PropertiesTableProps = {\n  value: {\n    doc: 'defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value.',\n    type: 'string',\n    status: 'optional',\n  },\n  name: {\n    doc: 'custom grouping name. Defaults to a random name.',\n    type: 'string',\n    status: 'optional',\n  },\n  layout_direction: {\n    doc: 'Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`.',\n    type: ['column', 'row'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'the size of the Radio button. For now there is **medium** (default) and **large**.',\n    type: ['medium', 'large'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'uses the `form-status` component to show failure messages.',\n    type: ['string', '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: 'Various',\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: 'Various',\n    status: 'optional',\n  },\n  label: {\n    doc: 'use either the `label` property or provide a custom one.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.',\n    type: ['vertical', 'horizontal'],\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  vertical: {\n    doc: 'will force both `direction` and `label_direction` to be **vertical** if set to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const RadioEvents: PropertiesTableProps = {\n  on_change: {\n    doc: 'will be called on state changes made by the user. Returns an object `{ checked, value, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const RadioGroupEvents: PropertiesTableProps = {\n  on_change: {\n    doc: 'will be called once a Radio button changes the state. Returns an object `{ value, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/radio/RadioGroup.d.ts

@@ -23,58 +23,28 @@ export type RadioGroupChildren =
 export interface RadioGroupProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
-  /**
-   * Use either the `label` property or provide a custom one.
-   */
   label?: React.ReactNode;
   label_direction?: FormLabelLabelDirection;
-  /**
-   * Use `true` to make the label only readable by screen readers.
-   */
   label_sr_only?: boolean;
-  /**
-   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
-   */
   label_position?: RadioGroupLabelPosition;
   title?: string;
   disabled?: boolean;
   skeleton?: SkeletonShow;
   id?: string;
   name?: string;
-  /**
-   * The size of the Radio button. For now there is "medium" (default) and "large".
-   */
   size?: RadioGroupSize;
-  /**
-   * 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&#39;s two statuses `[error, info]`. Defaults to `error`.
-   */
   status_state?: FormStatusState;
-  /**
-   * 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>.
-   */
   globalStatus?: GlobalStatusConfigObject;
   suffix?: RadioGroupSuffix;
   layout_direction?: RadioGroupLayoutDirection;
   vertical?: boolean;
-  /**
-   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
-   */
   value?: string;
   attributes?: RadioGroupAttributes;
   className?: string;
   children?: RadioGroupChildren;
-  /**
-   * Will be called on state changes made by the user. Returns an object `{ checked, value, event }`.
-   */
   on_change?: (...args: any[]) => any;
 }
 export default class RadioGroup extends React.Component<

package/cjs/components/section/Section.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _componentHelper = require("../../shared/component-helper");
 var _Space = _interopRequireDefault(require("../space/Space"));
+var _helpers = require("../../shared/helpers");
 const _excluded = ["variant", "breakout", "outset", "roundedCorner", "textColor", "backgroundColor", "dropShadow", "outline", "innerRef", "className", "children", "spacing", "style_type", "inner_ref"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -50,17 +51,11 @@ function SectionParams(localProps) {
   const elementRef = innerRef || inner_ref || internalRef;
   return Object.freeze(_objectSpread(_objectSpread({}, attributes), {}, {
     className: (0, _classnames.default)(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`),
-    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(outset, 'outset', value => value ? '1' : '0')), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : getColor(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(outset, 'outset', value => value ? '1' : '0')), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => (0, _helpers.getColor)(value))), computeStyle(backgroundColor, 'background-color', value => (0, _helpers.getColor)(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : (0, _helpers.getColor)(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
     innerRef: elementRef,
     children
   }));
 }
-function getColor(value) {
-  if (String(value).includes('--')) {
-    return value;
-  }
-  return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
-}
 function computeStyle(property, name, valueCallback) {
   let media = property;
   if (media !== null && typeof media !== 'object') {

package/cjs/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_excluded","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","n","indexOf","propertyIsEnumerable","hasOwnProperty","defaultProps","element","Section","localProps","createElement","SectionParams","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","outset","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","internalRef","useRef","elementRef","freeze","classnames","isTrue","style","computeStyle","getColor","includes","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together.\n   * Defaults to `false`\n   */\n  outset?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = !props.outset,\n    outset,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(outset, 'outset', (value) => (value ? '1' : '0')),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  if (String(value).includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Section.js","names":["_react","_interopRequireDefault","require","_classnames","_Context","_componentHelper","_Space","_helpers","_excluded","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","n","indexOf","propertyIsEnumerable","hasOwnProperty","defaultProps","element","Section","localProps","createElement","SectionParams","context","React","useContext","Context","props","extendPropsWithContext","variant","breakout","outset","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","internalRef","useRef","elementRef","freeze","classnames","isTrue","style","computeStyle","getColor","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\nimport { getColor } from '../../shared/helpers'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together.\n   * Defaults to `false`\n   */\n  outset?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = !props.outset,\n    outset,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(outset, 'outset', (value) => (value ? '1' : '0')),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":";;;;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AASA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA+C,MAAAM,SAAA;AAAA,SAAAP,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,QAAAH,CAAA,EAAAI,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAP,CAAA,OAAAM,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAR,CAAA,GAAAI,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAX,CAAA,EAAAI,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAf,CAAA,aAAAI,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAD,OAAA,CAAAG,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,IAAAe,eAAA,CAAAnB,CAAA,EAAAI,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAArB,CAAA,EAAAM,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAtB,CAAA,EAAAI,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAJ,CAAA;AAAA,SAAAmB,gBAAAnB,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAmB,cAAA,CAAAnB,CAAA,MAAAJ,CAAA,GAAAM,MAAA,CAAAgB,cAAA,CAAAtB,CAAA,EAAAI,CAAA,IAAAoB,KAAA,EAAAnB,CAAA,EAAAO,UAAA,MAAAa,YAAA,MAAAC,QAAA,UAAA1B,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAuB,eAAAlB,CAAA,QAAAsB,CAAA,GAAAC,YAAA,CAAAvB,CAAA,uCAAAsB,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAvB,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAwB,MAAA,CAAAC,WAAA,kBAAA9B,CAAA,QAAA2B,CAAA,GAAA3B,CAAA,CAAA+B,IAAA,CAAA1B,CAAA,EAAAD,CAAA,uCAAAuB,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAA5B,CAAA,GAAA6B,MAAA,GAAAC,MAAA,EAAA7B,CAAA;AAAA,SAAA8B,yBAAAnC,CAAA,EAAAK,CAAA,gBAAAL,CAAA,iBAAAS,CAAA,EAAAL,CAAA,EAAAuB,CAAA,GAAAS,6BAAA,CAAApC,CAAA,EAAAK,CAAA,OAAAC,MAAA,CAAAE,qBAAA,QAAA6B,CAAA,GAAA/B,MAAA,CAAAE,qBAAA,CAAAR,CAAA,QAAAI,CAAA,MAAAA,CAAA,GAAAiC,CAAA,CAAApB,MAAA,EAAAb,CAAA,IAAAK,CAAA,GAAA4B,CAAA,CAAAjC,CAAA,UAAAC,CAAA,CAAAiC,OAAA,CAAA7B,CAAA,QAAA8B,oBAAA,CAAAR,IAAA,CAAA/B,CAAA,EAAAS,CAAA,MAAAkB,CAAA,CAAAlB,CAAA,IAAAT,CAAA,CAAAS,CAAA,aAAAkB,CAAA;AAAA,SAAAS,8BAAAhC,CAAA,EAAAJ,CAAA,gBAAAI,CAAA,iBAAAC,CAAA,gBAAAgC,CAAA,IAAAjC,CAAA,SAAAoC,cAAA,CAAAT,IAAA,CAAA3B,CAAA,EAAAiC,CAAA,gBAAArC,CAAA,CAAAsC,OAAA,CAAAD,CAAA,aAAAhC,CAAA,CAAAgC,CAAA,IAAAjC,CAAA,CAAAiC,CAAA,YAAAhC,CAAA;AAyH/C,MAAMoC,YAAY,GAAG;EACnBC,OAAO,EAAE;AACX,CAAC;AAEc,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC3D,OAAOrD,MAAA,CAAAW,OAAA,CAAA2C,aAAA,CAAChD,MAAA,CAAAK,OAAK,EAAK4C,aAAa,CAACF,UAAU,CAAI,CAAC;AACjD;AAEO,SAASE,aAAaA,CAC3BF,UAA2B,EACN;EACrB,MAAMG,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EAGzC,MAAMC,KAAK,GAAG,IAAAC,uCAAsB,EAClCR,UAAU,EACVH,YAAY,EACZM,OAAO,CAACJ,OACV,CAAC;EAED,MAAM;MACJU,OAAO;MACPC,QAAQ,GAAG,CAACH,KAAK,CAACI,MAAM;MACxBA,MAAM;MACNC,aAAa;MACbC,SAAS;MACTC,eAAe;MACfC,UAAU;MACVC,OAAO;MACPC,QAAQ;MAERC,SAAS;MACTC,QAAQ;MAERC,OAAO;MACPC,UAAU;MACVC;IAGF,CAAC,GAAGf,KAAK;IADJgB,UAAU,GAAAhC,wBAAA,CACXgB,KAAK,EAAApD,SAAA;EAET,MAAMqE,WAAW,GAAGpB,cAAK,CAACqB,MAAM,CAAc,CAAC;EAC/C,MAAMC,UAAU,GAAGT,QAAQ,IAAIK,SAAS,IAAIE,WAAW;EAEvD,OAAO9D,MAAM,CAACiE,MAAM,CAAAxD,aAAA,CAAAA,aAAA,KACfoD,UAAU;IACbL,SAAS,EAAE,IAAAU,mBAAU,8BAEHnB,OAAO,GAAGA,OAAO,GAAGY,UAAU,IAAI,SAAS,IAG3DH,SAAS,EAFTE,OAAO,IACL,wBAAwB,IAAAS,uBAAM,EAACT,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAO,EAE/D,CAAC;IACDU,KAAK,EAAA3D,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACA4D,YAAY,CACbrB,QAAQ,EACR,UAAU,EACT9B,KAAK,IAAK,mBAAmBA,KAAK,GAAG,IAAI,GAAG,KAAK,GACpD,CAAC,GACEmD,YAAY,CAACpB,MAAM,EAAE,QAAQ,EAAG/B,KAAK,IAAMA,KAAK,GAAG,GAAG,GAAG,GAAI,CAAC,GAC9DmD,YAAY,CACbnB,aAAa,EACb,gBAAgB,EACfhC,KAAK,IAAKA,KAAK,IAAI,8BACtB,CAAC,GACEmD,YAAY,CAAClB,SAAS,EAAE,YAAY,EAAGjC,KAAK,IAAK,IAAAoD,iBAAQ,EAACpD,KAAK,CAAC,CAAC,GACjEmD,YAAY,CAACjB,eAAe,EAAE,kBAAkB,EAAGlC,KAAK,IACzD,IAAAoD,iBAAQ,EAACpD,KAAK,CAChB,CAAC,GACEmD,YAAY,CACbhB,UAAU,EACV,aAAa,EACZnC,KAAK,IAAKA,KAAK,IAAI,uBACtB,CAAC,GACEmD,YAAY,CAACf,OAAO,EAAE,eAAe,EAAGpC,KAAK,IAC9CS,MAAM,CAACT,KAAK,CAAC,KAAK,MAAM,GACpB,6BAA6B,GAC7B,IAAAoD,iBAAQ,EAACpD,KAAK,CACpB,CAAC,GACE2C,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEO,KAAK,CACE;IACxBb,QAAQ,EAAES,UAAU;IACpBP;EAAQ,EACT,CAAC;AACJ;AAEA,SAASY,YAAYA,CACnBE,QAAoD,EACpDC,IAAY,EACZC,aAAoD,EACpD;EACA,IAAIC,KAAK,GAAGH,QAAmC;EAE/C,IAAIG,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC/CA,KAAK,GAAG;MACNC,KAAK,EAAEJ,QAAQ;MACfK,MAAM,EAAEL,QAAQ;MAChBM,KAAK,EAAEN;IACT,CAA4B;EAC9B;EAEA,MAAMO,MAAM,GAAG,CAAC,CAAC;EAEjB,KAAK,MAAMC,IAAI,IAAIL,KAAK,EAA6B;IAAA,IAAAM,MAAA;IACnD,IAAI,SAAAA,MAAA,GAAON,KAAK,cAAAM,MAAA,uBAALA,MAAA,CAAQD,IAAI,CAAC,MAAK,WAAW,EAAE;MAAA,IAAAE,OAAA;MACxC,MAAM/D,KAAK,GAAGuD,aAAa,EAAAQ,OAAA,GAACP,KAAK,cAAAO,OAAA,uBAALA,OAAA,CAAQF,IAAI,CAAC,CAAC;MAC1C,IAAI,OAAO7D,KAAK,KAAK,QAAQ,EAAE;QAC7B4D,MAAM,CAAC,KAAKN,IAAI,KAAKO,IAAI,EAAE,CAAC,GAAG7D,KAAK;MACtC;IACF;EACF;EAEA,OAAO4D,MAAM;AACf;AAEAzC,OAAO,CAAC6C,KAAK,GAAG,SAAS;AACzB7C,OAAO,CAAC8C,qBAAqB,GAAG,IAAI","ignoreList":[]}

package/cjs/components/section/SectionDocs.js

@@ -52,7 +52,7 @@ const SectionProperties = exports.SectionProperties = {
   },
   innerRef: {
     doc: 'By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',
-    type: 'React.Ref',
+    type: 'React.RefObject',
     status: 'optional'
   },
   '[Space](/uilib/layout/space/properties)': {

package/cjs/components/section/SectionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionDocs.js","names":["SectionProperties","exports","variant","doc","type","status","breakout","outset","outline","roundedCorner","backgroundColor","dropShadow","textColor","innerSpace","innerRef"],"sources":["../../../../src/components/section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property.',\n    type: 'string',\n    status: 'optional',\n  },\n  breakout: {\n    doc: 'Use `true` to enable a fullscreen breakout look. Supports also media query breakpoints like `{ small: boolean }`. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outset: {\n    doc: 'Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outline: {\n    doc: \"Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-8' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  roundedCorner: {\n    doc: 'Use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  backgroundColor: {\n    doc: \"Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'white' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  dropShadow: {\n    doc: 'Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  textColor: {\n    doc: \"Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerSpace: {\n    doc: \"Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\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,iBAAuC,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACrDE,OAAO,EAAE;IACPC,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,oKAAoK;IACzKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,aAAa,EAAE;IACbN,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,+IAA+I;IACpJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,UAAU,EAAE;IACVR,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,mJAAmJ;IACxJC,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":[]}
+{"version":3,"file":"SectionDocs.js","names":["SectionProperties","exports","variant","doc","type","status","breakout","outset","outline","roundedCorner","backgroundColor","dropShadow","textColor","innerSpace","innerRef"],"sources":["../../../../src/components/section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property.',\n    type: 'string',\n    status: 'optional',\n  },\n  breakout: {\n    doc: 'Use `true` to enable a fullscreen breakout look. Supports also media query breakpoints like `{ small: boolean }`. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outset: {\n    doc: 'Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  outline: {\n    doc: \"Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-8' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  roundedCorner: {\n    doc: 'Use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  backgroundColor: {\n    doc: \"Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'white' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  dropShadow: {\n    doc: 'Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  textColor: {\n    doc: \"Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerSpace: {\n    doc: \"Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.\",\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.',\n    type: 'React.RefObject',\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,iBAAuC,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACrDE,OAAO,EAAE;IACPC,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,uIAAuI;IAC5IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,oKAAoK;IACzKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,aAAa,EAAE;IACbN,GAAG,EAAE,6IAA6I;IAClJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,eAAe,EAAE;IACfP,GAAG,EAAE,+IAA+I;IACpJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,UAAU,EAAE;IACVR,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;IACRX,GAAG,EAAE,mJAAmJ;IACxJC,IAAI,EAAE,iBAAiB;IACvBC,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/skeleton/SkeletonDocs.d.ts

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

package/cjs/components/skeleton/SkeletonDocs.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonProperties = void 0;
+const SkeletonProperties = exports.SkeletonProperties = {
+  show: {
+    doc: 'Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  figure: {
+    doc: 'Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown.',
+    type: ['string', 'React.Element', 'function'],
+    status: 'optional'
+  },
+  no_animation: {
+    doc: 'Use `true` to disable the animation.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  aria_busy: {
+    doc: 'Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.',
+    type: 'string',
+    status: 'optional'
+  },
+  aria_ready: {
+    doc: 'Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.',
+    type: 'string',
+    status: 'optional'
+  },
+  element: {
+    doc: 'Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SkeletonDocs.js.map

package/cjs/components/skeleton/SkeletonDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonDocs.js","names":["SkeletonProperties","exports","show","doc","type","status","figure","no_animation","aria_busy","aria_ready","element"],"sources":["../../../../src/components/skeleton/SkeletonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SkeletonProperties: PropertiesTableProps = {\n  show: {\n    doc: 'Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  figure: {\n    doc: 'Define a figure to use, like `article`. The wrapped content will be hidden while the skeleton figure is shown.',\n    type: ['string', 'React.Element', 'function'],\n    status: 'optional',\n  },\n  no_animation: {\n    doc: 'Use `true` to disable the animation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_busy: {\n    doc: 'Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.',\n    type: 'string',\n    status: 'optional',\n  },\n  aria_ready: {\n    doc: 'Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.',\n    type: 'string',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`.',\n    type: ['string', 'React.Element'],\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,4FAA4F;IACjGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDE,YAAY,EAAE;IACZJ,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,oHAAoH;IACzHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,qIAAqI;IAC1IC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,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/skeleton/SkeletonHelper.d.ts

@@ -12,9 +12,6 @@ export class AutoSize extends React.Component<AutoSizeProps, any> {
 export type SkeletonContextProps = ContextProps & {
   translation?: {
     Skeleton?: {
-      /**
-       * Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.
-       */
       aria_busy: string;
     };
   };
@@ -28,9 +25,6 @@ export declare const createSkeletonClass: (
 export type skeletonDOMAttributesContext = {
   translation?: {
     Skeleton: {
-      /**
-       * Is used for screen reader text translation, defined in the translation files. You can set a custom text if needed.
-       */
       aria_busy: string;
     };
   };

package/cjs/components/skip-content/SkipContentDocs.d.ts

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

package/cjs/components/skip-content/SkipContentDocs.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipContentProperties = void 0;
+const SkipContentProperties = exports.SkipContentProperties = {
+  selector: {
+    doc: 'Define an existing HTML element selector to focus when the inner button got pressed.',
+    type: ['string'],
+    status: 'required'
+  },
+  text: {
+    doc: 'Define a clear message describing the choices the users has.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  children: {
+    doc: 'Define a clear message describing the choices the users has.',
+    type: ['React.ReactNode'],
+    status: 'optional'
+  },
+  focusDelay: {
+    doc: 'Defines the delay after the enter key has been pressed.',
+    type: ['number'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SkipContentDocs.js.map

package/cjs/components/skip-content/SkipContentDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipContentDocs.js","names":["SkipContentProperties","exports","selector","doc","type","status","text","children","focusDelay"],"sources":["../../../../src/components/skip-content/SkipContentDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SkipContentProperties: PropertiesTableProps = {\n  selector: {\n    doc: 'Define an existing HTML element selector to focus when the inner button got pressed.',\n    type: ['string'],\n    status: 'required',\n  },\n  text: {\n    doc: 'Define a clear message describing the choices the users has.',\n    type: ['React.ReactNode'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'Define a clear message describing the choices the users has.',\n    type: ['React.ReactNode'],\n    status: 'optional',\n  },\n  focusDelay: {\n    doc: 'Defines the delay after the enter key has been pressed.',\n    type: ['number'],\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,qBAA2C,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACzDE,QAAQ,EAAE;IACRC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,CAAC,iBAAiB,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/cjs/components/slider/SliderDocs.js

@@ -97,12 +97,12 @@ const SliderProperties = exports.SliderProperties = {
   },
   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: 'string',
+    type: ['error', 'info', 'boolean'],
     status: 'optional'
   },
   statusState: {
     doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',
-    type: 'string',
+    type: ['error', 'info'],
     status: 'optional'
   },
   statusProps: {

package/cjs/components/slider/SliderDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderDocs.js","names":["SliderProperties","exports","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n    type: ['number', 'Array<number>'],\n    status: 'required',\n  },\n  min: {\n    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n    type: 'number',\n    status: 'optional',\n  },\n  max: {\n    doc: 'The maximum value. Defaults to `100`.',\n    type: 'number',\n    status: 'optional',\n  },\n  step: {\n    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Show the slider vertically. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  reverse: {\n    doc: 'Show the slider reversed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the slider will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  hideButtons: {\n    doc: 'Removes the helper buttons. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  multiThumbBehavior: {\n    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n    type: 'string',\n    status: 'optional',\n  },\n  thumbTitle: {\n    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  subtractTitle: {\n    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  addTitle: {\n    doc: 'Give the add button a title for accessibility reasons. Defaults to `Increase (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  numberFormat: {\n    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n    type: 'object',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  alwaysShowTooltip: {\n    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n    type: 'boolean',\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: 'string',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\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: 'string',\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n    type: 'string',\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  extensions: {\n    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n    type: 'object',\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\nexport const SliderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragStart: {\n    doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragEnd: {\n    doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SliderDocs.js","names":["SliderProperties","exports","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n    type: ['number', 'Array<number>'],\n    status: 'required',\n  },\n  min: {\n    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n    type: 'number',\n    status: 'optional',\n  },\n  max: {\n    doc: 'The maximum value. Defaults to `100`.',\n    type: 'number',\n    status: 'optional',\n  },\n  step: {\n    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Show the slider vertically. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  reverse: {\n    doc: 'Show the slider reversed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the slider will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  hideButtons: {\n    doc: 'Removes the helper buttons. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  multiThumbBehavior: {\n    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n    type: 'string',\n    status: 'optional',\n  },\n  thumbTitle: {\n    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  subtractTitle: {\n    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  addTitle: {\n    doc: 'Give the add button a title for accessibility reasons. Defaults to `Increase (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  numberFormat: {\n    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n    type: 'object',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  alwaysShowTooltip: {\n    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n    type: 'boolean',\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: 'string',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\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  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: ['error', 'info'],\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n    type: 'string',\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  extensions: {\n    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n    type: 'object',\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\nexport const SliderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragStart: {\n    doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragEnd: {\n    doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/space/SpaceDocs.d.ts

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

package/cjs/components/space/SpaceDocs.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpaceProperties = exports.SpaceGlobalProperties = void 0;
+const SpaceGlobalProperties = exports.SpaceGlobalProperties = {
+  space: {
+    doc: 'Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.',
+    type: ['object'],
+    status: 'optional'
+  },
+  top: {
+    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.',
+    type: ['string', 'number', 'boolean'],
+    status: 'optional'
+  },
+  right: {
+    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.',
+    type: ['string', 'number', 'boolean'],
+    status: 'optional'
+  },
+  bottom: {
+    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.',
+    type: ['string', 'number', 'boolean'],
+    status: 'optional'
+  },
+  left: {
+    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.',
+    type: ['string', 'number', 'boolean'],
+    status: 'optional'
+  }
+};
+const SpaceProperties = exports.SpaceProperties = {
+  element: {
+    doc: 'defines the HTML element used. Defaults to `div`.',
+    type: 'React.Element',
+    status: 'optional'
+  },
+  stretch: {
+    doc: 'if set to `true`, then the space element will be 100% in width.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  inline: {
+    doc: 'if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  innerSpace: {
+    doc: "Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.",
+    type: ['object', 'string', 'number', 'boolean'],
+    status: 'optional'
+  },
+  no_collapse: {
+    doc: "if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.",
+    type: 'boolean',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SpaceDocs.js.map

package/cjs/components/space/SpaceDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpaceDocs.js","names":["SpaceGlobalProperties","exports","space","doc","type","status","top","right","bottom","left","SpaceProperties","element","stretch","inline","innerSpace","no_collapse"],"sources":["../../../../src/components/space/SpaceDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SpaceGlobalProperties: PropertiesTableProps = {\n  space: {\n    doc: 'Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.',\n    type: ['object'],\n    status: 'optional',\n  },\n  top: {\n    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.',\n    type: ['string', 'number', 'boolean'],\n    status: 'optional',\n  },\n  right: {\n    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.',\n    type: ['string', 'number', 'boolean'],\n    status: 'optional',\n  },\n  bottom: {\n    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.',\n    type: ['string', 'number', 'boolean'],\n    status: 'optional',\n  },\n  left: {\n    doc: 'Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.',\n    type: ['string', 'number', 'boolean'],\n    status: 'optional',\n  },\n}\n\nexport const SpaceProperties: PropertiesTableProps = {\n  element: {\n    doc: 'defines the HTML element used. Defaults to `div`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'if set to `true`, then the space element will be 100% in width.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inline: {\n    doc: 'if set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  innerSpace: {\n    doc: \"Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.\",\n    type: ['object', 'string', 'number', 'boolean'],\n    status: 'optional',\n  },\n  no_collapse: {\n    doc: \"if set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,qBAA2C,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACzDE,KAAK,EAAE;IACLC,GAAG,EAAE,iIAAiI;IACtIC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDC,GAAG,EAAE;IACHH,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,qFAAqF;IAC1FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDG,MAAM,EAAE;IACNL,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,oFAAoF;IACzFC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV;AACF,CAAC;AAEM,MAAMK,eAAqC,GAAAT,OAAA,CAAAS,eAAA,GAAG;EACnDC,OAAO,EAAE;IACPR,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,MAAM,EAAE;IACNV,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IAC/CC,MAAM,EAAE;EACV,CAAC;EACDU,WAAW,EAAE;IACXZ,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}