@digigov/react-core 2.0.0-rc.7 → 2.0.0-rc.8

package/AdminAside/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,19 @@ exports[`renders the AdminAside with no prop 1`] = `
 <ForwardRef(AdminAside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-admin-side-content"
+    className="ds-admin-aside"
     item={true}
+    lg={3}
+    md={4}
+    spacing={4}
+    xs={12}
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-admin-side-content"
+      className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
     >
       <aside
-        className="ds-admin-side-content"
+        className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
       >
         hello
       </aside>

package/AdminAside/index.js

@@ -13,9 +13,13 @@ export var AdminAside = /*#__PURE__*/React.forwardRef(function AdminAside(_ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Grid, _extends({
     as: "aside",
-    ref: ref,
     item: true,
-    className: clsx(className, true && 'ds-admin-side-content')
+    xs: 12,
+    md: 4,
+    lg: 3,
+    spacing: 4,
+    ref: ref,
+    className: clsx(className, true && 'ds-admin-aside')
   }, props), children);
 });
 export default AdminAside;

package/AdminContainer/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AdminContainer)>
+exports[`renders the AdminContainer with no grid 1`] = `
+<ForwardRef(AdminContainer)
+  grid={false}
+>
   <ForwardRef(Container)
     fullWidth={true}
     grid={false}
@@ -17,11 +19,37 @@ exports[`renders the AdminContainer with no props 1`] = `
         <div
           className="ds-container--full-width ds-container"
         >
-          <div
-            className="ds-admin-main-wrapper"
-          >
-            hello
-          </div>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
+</ForwardRef(AdminContainer)>
+`;
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AdminContainer)>
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={true}
+  >
+    <ForwardRef(Grid)
+      className="ds-container--full-width ds-container"
+      container={true}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+      >
+        <div
+          className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+        >
+          hello
         </div>
       </ForwardRef(Base)>
     </ForwardRef(Grid)>

package/AdminContainer/index.d.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 import { ContainerProps } from '@digigov/react-core/Container';
 export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> {
+    /**
+     * grid is optional. Set to false if you don't need grid layout.
+     * @value true
+     * @value false
+     * @default true
+     */
+    grid?: boolean;
 }
 /**
  * AdminContainer is a wrapper for the content of the page
  * Use AdminContainer inside AdminLayout component
  */
-export declare const AdminContainer: React.ForwardRefExoticComponent<Pick<AdminContainerProps, "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "spacing" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "container" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "fullWidth"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AdminContainer: React.ForwardRefExoticComponent<Pick<AdminContainerProps, "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "spacing" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "grid" | "container" | "item" | "xs" | "sm" | "md" | "lg" | "xl" | "fullWidth"> & React.RefAttributes<HTMLDivElement>>;
 export default AdminContainer;

package/AdminContainer/index.js

@@ -1,24 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["grid", "className", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Container from '@digigov/react-core/Container';
 /**
  * AdminContainer is a wrapper for the content of the page
  * Use AdminContainer inside AdminLayout component
  */
 export var AdminContainer = /*#__PURE__*/React.forwardRef(function AdminContainer(_ref, ref) {
-  var className = _ref.className,
+  var _ref$grid = _ref.grid,
+    grid = _ref$grid === void 0 ? true : _ref$grid,
+    className = _ref.className,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Container, _extends({
     ref: ref,
     fullWidth: true,
-    grid: false,
+    grid: grid,
     className: className
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'ds-admin-main-wrapper')
-  }, children));
+  }, props), children);
 });
 export default AdminContainer;

package/AdminContainer/index.test/index.js

@@ -4,4 +4,10 @@ import AdminContainer from '@digigov/react-core/AdminContainer';
 var _ref = /*#__PURE__*/React.createElement(AdminContainer, null, "hello");
 it('renders the AdminContainer with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/React.createElement(AdminContainer, {
+  grid: false
+}, "hello");
+it('renders the AdminContainer with no grid', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
 });

package/AdminMain/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,18 @@ exports[`renders the AdminMain with no prop 1`] = `
 <ForwardRef(AdminMain)>
   <ForwardRef(Grid)
     as="main"
-    className="ds-admin-main-content"
+    className="ds-admin-main"
     item={true}
+    lg={9}
+    md={8}
+    xs={12}
   >
     <ForwardRef(Base)
       as="main"
-      className="ds-admin-main-content"
+      className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
     >
       <main
-        className="ds-admin-main-content"
+        className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
       >
         hello
       </main>

package/AdminMain/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "id"];
 import React from 'react';
 import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
@@ -10,12 +10,17 @@ import Grid from '@digigov/react-core/Grid';
 export var AdminMain = /*#__PURE__*/React.forwardRef(function AdminMain(_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'main-content' : _ref$id,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Grid, _extends({
     item: true,
     as: "main",
+    xs: 12,
+    md: 8,
+    lg: 9,
     ref: ref,
-    className: clsx(className, true && 'ds-admin-main-content')
+    className: clsx(className, true && 'ds-admin-main')
   }, props), children);
 });
 export default AdminMain;

package/AutoCompleteInput/__snapshots__/index.test.tsx.snap

@@ -1,87 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AutoCompleteInput with no props 1`] = `
-<ForwardRef(AutoCompleteInput)>
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--default ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--default ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 1`] = `
-<ForwardRef(AutoCompleteInput)
-  showAllValues={true}
->
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 2`] = `
+exports[`renders the AutoCompleteInput with isFocused 1`] = `
 <ForwardRef(AutoCompleteInput)
-  showAllValues={true}
+  isFocused={true}
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused 1`] = `
+exports[`renders the AutoCompleteInput with isFocused and name props 1`] = `
 <ForwardRef(AutoCompleteInput)
   isFocused={true}
-  showAllValues={true}
+  name="some-name"
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
+    name="some-name"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
+      name="some-name"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused name props 1`] = `
-<ForwardRef(AutoCompleteInput)
-  isFocused={true}
-  name="some-name"
-  showAllValues={true}
->
+exports[`renders the AutoCompleteInput with no props 1`] = `
+<ForwardRef(AutoCompleteInput)>
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-    name="some-name"
+    className="ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-      name="some-name"
+      className="ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>

package/AutoCompleteResultList/__snapshots__/index.test.tsx.snap

@@ -1,51 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AutoCompleteResultList with isVisible  displayMenu="inline props 1`] = `
-<ForwardRef(List)
-  displayMenu="inline"
-  isVisible={true}
->
-  <ForwardRef(Base)
-    as="ul"
-    className="ds-autocomplete__menu--inline ds-autocomplete__menu--visible ds-autocomplete__menu"
-  >
-    <ul
-      className="ds-autocomplete__menu--inline ds-autocomplete__menu--visible ds-autocomplete__menu"
-    >
-      Hello
-    </ul>
-  </ForwardRef(Base)>
-</ForwardRef(List)>
-`;
-
-exports[`renders the AutoCompleteResultList with isVisible displayMenu="overlay props 1`] = `
-<ForwardRef(List)
-  displayMenu="overlay"
-  isVisible={true}
->
-  <ForwardRef(Base)
-    as="ul"
-    className="ds-autocomplete__menu--overlay ds-autocomplete__menu--visible ds-autocomplete__menu"
-  >
-    <ul
-      className="ds-autocomplete__menu--overlay ds-autocomplete__menu--visible ds-autocomplete__menu"
-    >
-      Hello
-    </ul>
-  </ForwardRef(Base)>
-</ForwardRef(List)>
-`;
-
 exports[`renders the AutoCompleteResultList with isVisible props 1`] = `
 <ForwardRef(List)
   isVisible={true}
 >
   <ForwardRef(Base)
     as="ul"
-    className="ds-autocomplete__menu--visible ds-autocomplete__menu"
+    className="ds-autocomplete__menu"
   >
     <ul
-      className="ds-autocomplete__menu--visible ds-autocomplete__menu"
+      className="ds-autocomplete__menu"
     >
       Hello
     </ul>

package/ModalContainer/index.d.ts

@@ -13,6 +13,13 @@ export interface ModalContainerProps extends BaseProps<'div'> {
      * @default false
      */
     dense?: boolean;
+    /**
+     * gaps is optional.
+     * @value false there will be no extra gaps among children components.
+     * @value true
+     * @default true
+     */
+    gaps?: boolean;
 }
 /**
  * Modals can be used to open a pop-up dialog box and provide critical information
@@ -20,5 +27,5 @@ export interface ModalContainerProps extends BaseProps<'div'> {
  * remain on screen until confirmed, dismissed, or a required action has been taken
  * Use Modal as parent component to wrap ModalHeading, ModalText and ModalAction components
  */
-export declare const ModalContainer: React.ForwardRefExoticComponent<Pick<ModalContainerProps, "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "dense"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalContainer: React.ForwardRefExoticComponent<Pick<ModalContainerProps, "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "dense" | "gaps"> & React.RefAttributes<HTMLDivElement>>;
 export default ModalContainer;

package/ModalContainer/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "open", "dense"];
+var _excluded = ["className", "gaps", "children", "open", "dense"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -12,18 +12,20 @@ import Base from '@digigov/react-core/Base';
  */
 export var ModalContainer = /*#__PURE__*/React.forwardRef(function ModalContainer(_ref, ref) {
   var className = _ref.className,
+    _ref$gaps = _ref.gaps,
+    gaps = _ref$gaps === void 0 ? true : _ref$gaps,
     children = _ref.children,
     open = _ref.open,
     dense = _ref.dense,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Base, _extends({
+    ref: ref,
     as: "div",
     className: clsx(className, dense && 'ds-modal--dense', true && 'ds-modal', open && 'ds-modal--open')
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(true && 'ds-modal__body')
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: clsx(true && 'ds-modal__container')
-  }, children)));
+    className: "ds-modal__body"
+  }, gaps ? /*#__PURE__*/React.createElement("div", {
+    className: "ds-modal__container"
+  }, children) : children));
 });
 export default ModalContainer;

package/ModalHeading/index.js

@@ -14,8 +14,7 @@ export var ModalHeading = /*#__PURE__*/React.forwardRef(function ModalHeading(_r
   return /*#__PURE__*/React.createElement(Heading, _extends({
     ref: ref,
     size: "md",
-    element: "h2",
-    marginBottom: 0
+    element: "h2"
   }, props), children);
 });
 export default ModalHeading;

package/Skeleton/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface SkeletonProps extends BaseProps<'span'> {
+    /**
+     * variant prop determines the style of the skeleton element.
+     * @value 'circular', it renders a circular skeleton.
+     * @value 'rectangular', it renders a rectangular skeleton.
+     * @value 'text', it renders a text skeleton.
+     * @value 'button', it renders a button skeleton.
+     * @default 'text'
+     */
+    variant?: 'circular' | 'rectangular' | 'text' | 'button';
+    /**
+     * width prop determines the width of the skeleton element.
+     * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+     * @default undefined
+     */
+    width?: number | string;
+    /**
+     * height prop determines the height of the skeleton element.
+     * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+     * @default undefined
+     */
+    height?: number | string;
+    /**
+   * fontSize is optional. 'sm' is the default value.
+   * Use 'xl' when this Skeleton is for a main page title.
+   * The fontSize works only for variant 'text'.
+   * You don't need fontSize if you wrap Skeleton in a typography component.
+   * @value 'xl'
+   * @value 'lg'
+   * @value 'md'
+   * @value 'sm'
+   * @value 'xs'
+   * @default 'sm'
+   */
+    fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    /**
+     * animation prop determines if the skeleton should animate or not.
+     * @default true
+     */
+    animation?: boolean;
+}
+/**
+ * Use Skeleton component while a page is loading.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<Pick<SkeletonProps, "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "height" | "id" | "lang" | "width" | "role" | "tabIndex" | "fontSize" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "animation"> & React.RefAttributes<HTMLSpanElement>>;
+export default Skeleton;

package/Skeleton/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width", "height", "fontSize", "variant", "animation", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
+/**
+ * Use Skeleton component while a page is loading.
+ */
+export var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(_ref, ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    fontSize = _ref.fontSize,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'text' : _ref$variant,
+    _ref$animation = _ref.animation,
+    animation = _ref$animation === void 0 ? true : _ref$animation,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "span",
+    ref: ref,
+    className: clsx(className, fontSize !== undefined && variant === 'text' && "ds-skeleton--font-".concat(fontSize), !!animation && 'ds-skeleton--animate', !!children && !width && 'ds-skeleton--width-fit-content', !!variant && !children && "ds-skeleton--".concat(variant), true && 'ds-skeleton')
+  }, props, {
+    style: {
+      width: typeof width === 'number' ? "".concat(width, "px") : width,
+      maxWidth: !!width ? '100%' : undefined,
+      height: typeof height === 'number' ? "".concat(height, "px") : height
+    }
+  }), variant === 'button' && /*#__PURE__*/React.createElement("span", {
+    className: clsx(height === undefined && width === undefined && 'ds-skeleton__line--size-default', true && 'ds-skeleton__line')
+  }), children);
+});
+export default Skeleton;

package/Skeleton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/Skeleton/index.js"
+}