@plesk/ui-library 3.35.0 → 3.35.2

package/types/src/components/index.d.ts

@@ -11,6 +11,7 @@ export { default as Card } from './Card';
 export * from './Card';
 export { default as CardList } from './CardList';
 export { default as Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as CodeEditor } from './CodeEditor';
@@ -37,13 +38,16 @@ export type { FormProps, FormValues, FormInstanceHandles } from './Form';
 export * from './Form';
 export { default as FormField } from './FormField';
 export { default as FormFieldCheckbox } from './FormFieldCheckbox';
+export type { FormFieldCheckboxProps } from './FormFieldCheckbox';
 export { default as FormFieldPassword } from './FormFieldPassword';
 export * from './FormFieldPassword';
 export { default as FormFieldRadioButtons } from './FormFieldRadioButtons';
 export { default as FormFieldText } from './FormFieldText';
 export { default as FormFieldSelect } from './FormFieldSelect';
 export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
 export { default as GridCol } from './GridCol';
+export type { GridColProps } from './GridCol';
 export { default as Heading } from './Heading';
 export { default as Hint } from './Hint';
 export { default as Icon } from './Icon';
@@ -76,11 +80,15 @@ export { default as Paragraph } from './Paragraph';
 export { default as Plaintext } from './Plaintext';
 export { default as Popover } from './Popover';
 export { default as Progress } from './Progress';
+export type { ProgressProps } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressDialog } from './ProgressDialog';
+export type { ProgressDialogProps } from './ProgressDialog';
 export { default as ProgressDialogStep } from './ProgressDialogStep';
 export { default as ProgressStep } from './ProgressStep';
+export type { ProgressStepProps } from './ProgressStep';
 export { default as Rating } from './Rating';
+export type { RatingProps } from './Rating';
 export { default as Section } from './Section';
 export * from './Section';
 export { default as SegmentedControl } from './SegmentedControl';
@@ -92,8 +100,11 @@ export { default as StatusMessage } from './StatusMessage';
 export { default as Subnav } from './Subnav';
 export * from './Subnav';
 export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
 export { default as SwitchesPanel } from './SwitchesPanel';
+export type { SwitchesPanelProps } from './SwitchesPanel';
 export { default as SwitchesPanelItem } from './SwitchesPanelItem';
+export type { SwitchesPanelItemProps } from './SwitchesPanelItem';
 export { default as Tabs } from './Tabs';
 export * from './Tabs';
 export { default as Text } from './Text';
@@ -101,10 +112,12 @@ export { default as Toaster } from './Toaster';
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';
+export type { TranslateProps } from './Translate';
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
-export { default as Skeleton } from './Skeleton';
-export * from './Skeleton';
+export { default as Skeleton, SkeletonTabs, SkeletonText } from './Skeleton';
+export type { SkeletonProps, SkeletonTabsProps, SkeletonTextProps } from './Skeleton';
 export { PortalContext } from './Layer';

package/types/src/components/utils.d.ts

@@ -27,5 +27,5 @@ export declare const createFocusManager: (containerRef: RefObject<HTMLElement>,
     focusLast: (attempt?: number) => boolean;
 };
 export declare const mergeRefs: <T>(...refs: Ref<T | null>[]) => (value: T | null) => void;
-export declare const normalizeSize: (value?: string | number | undefined) => string | number | undefined;
+export declare const normalizeSize: (value?: number | string) => string | number | undefined;
 export {};

package/cjs/components/Alert/Alert.stories.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Intents = exports.Basic = void 0;
-var _Alert = _interopRequireDefault(require("./Alert"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Content'
-};
-const Intents = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "info",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "success",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "warning",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "danger",
-    ...Basic.args
-  })]
-});
-exports.Intents = Intents;

package/cjs/components/Button/Button.stories.js

@@ -1,109 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.States = exports.Intents = exports.Ghost = exports.Basic = exports.Arrows = void 0;
-var _Button = _interopRequireDefault(require("./Button"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Click me'
-};
-const Ghost = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-  ghost: true,
-  ...args
-});
-exports.Ghost = Ghost;
-Ghost.args = {
-  icon: 'gear'
-};
-const Intents = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "info",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "success",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "warning",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "danger",
-    ...Basic.args
-  })]
-});
-exports.Intents = Intents;
-const Arrows = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      size: "lg",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      icon: "cpu",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      intent: "danger",
-      ...Basic.args
-    })]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      size: "lg",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      icon: "cpu",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      intent: "danger",
-      ...Basic.args
-    })]
-  })]
-});
-exports.Arrows = Arrows;
-const States = () => [{
-  intent: 'primary'
-}, {
-  disabled: true
-}, {
-  ghost: true
-}].map((props, index) =>
-/*#__PURE__*/
-// eslint-disable-next-line react/no-array-index-key
-(0, _jsxRuntime.jsxs)("p", {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "hovered",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "active",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "loading",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "focused",
-    ...Basic.args,
-    ...props
-  })]
-}, index.toString()));
-exports.States = States;

package/cjs/components/Cuttable/Cuttable.stories.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithItemList = exports.Basic = void 0;
-var _Cuttable = _interopRequireDefault(require("./Cuttable"));
-var _Paragraph = _interopRequireDefault(require("../Paragraph"));
-var _ItemList = require("../ItemList/ItemList.stories");
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cuttable.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 1'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 2'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 3'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 4'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 5'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 6'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 7'
-    })]
-  })
-};
-const WithItemList = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cuttable.default, {
-  ...args
-});
-exports.WithItemList = WithItemList;
-WithItemList.args = {
-  maxHeight: 60,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemList.Basic, {
-    ..._ItemList.Basic.args
-  })
-};

package/cjs/components/Dialog/Dialog.stories.js

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithSideBanner = exports.Basic = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
-var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      onClick: () => setIsOpen(true),
-      "data-id": "trigger",
-      children: 'Open'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
-      ...args,
-      "data-type": "test",
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false)
-    })]
-  });
-};
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Dialog content.',
-  title: 'Title',
-  subtitle: 'Subtitle'
-};
-const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = {
-  ...Basic.args,
-  size: 'xs',
-  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-    src: _placeholder_400x.default
-  }),
-  sideBannerContainer: {
-    background: 'skyblue'
-  }
-};

package/cjs/components/Drawer/Drawer.stories.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithSideBanner = exports.WithForm = exports.WithClosingConfirmation = exports.Basic = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _Drawer = _interopRequireDefault(require("./Drawer"));
-var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      onClick: () => setIsOpen(true),
-      "data-id": "trigger",
-      children: 'Open'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
-      ...args,
-      "data-type": "test",
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false)
-    })]
-  });
-};
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Drawer content.',
-  title: 'Title',
-  subtitle: 'Subtitle'
-};
-const WithForm = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithForm = WithForm;
-WithForm.args = {
-  ...Basic.args,
-  form: {}
-};
-const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = {
-  ...Basic.args,
-  size: 'xs',
-  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-    src: _placeholder_400x.default
-  }),
-  sideBannerContainer: {
-    background: 'skyblue'
-  }
-};
-const WithClosingConfirmation = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithClosingConfirmation = WithClosingConfirmation;
-WithClosingConfirmation.args = {
-  ...Basic.args,
-  closingConfirmation: true
-};

package/cjs/components/Form/Form.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = void 0;
-var _Form = _interopRequireDefault(require("./Form"));
-var _FormFieldText = _interopRequireDefault(require("../FormFieldText"));
-var _FormFieldPassword = _interopRequireDefault(require("../FormFieldPassword"));
-var _FormFieldCheckbox = _interopRequireDefault(require("../FormFieldCheckbox"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  values: {
-    field1: 'Value 1',
-    field2: 'Value 2',
-    field3: true
-  },
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldText.default, {
-    label: "Field 1",
-    name: "field1"
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldPassword.default, {
-    label: "Field 2",
-    name: "field2"
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldCheckbox.default, {
-    label: "Field 3",
-    name: "field3"
-  }, "3")]
-};

package/cjs/components/FormFieldCheckbox/FormFieldCheckbox.stories.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithFullDescription = exports.Basic = void 0;
-var _Form = _interopRequireDefault(require("../Form"));
-var _FormFieldCheckbox = _interopRequireDefault(require("./FormFieldCheckbox"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldCheckbox.default, {
-    ...args
-  })
-});
-exports.Basic = Basic;
-Basic.args = {
-  name: 'name',
-  label: 'Lorem ipsum dolor sit amet.'
-};
-const WithFullDescription = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithFullDescription = WithFullDescription;
-WithFullDescription.args = {
-  ...Basic.args,
-  label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a. Morbi ac erat sed elit ullamcorper laoreet sed eget tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-  fullDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a.',
-  required: true
-};

package/cjs/components/Icon/Icon.stories.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = exports.All = void 0;
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {};
-const All = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  style: {
-    display: 'inline-block'
-  },
-  id: "icons",
-  children: _constants.NAMES_12.map(name => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      margin: 16
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: name
-    })
-  }, name))
-});
-exports.All = All;

package/cjs/components/ItemLink/ItemLink.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = void 0;
-var _ItemLink = _interopRequireDefault(require("./ItemLink"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemLink.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Add new item',
-  onClick: () => {},
-  'data-test': 'item-link'
-};

package/cjs/components/ItemList/ItemList.stories.js

@@ -1,122 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Selectables = exports.Reorderables = exports.HoverableItems = exports.HoverableItemList = exports.Cards = exports.Basic = void 0;
-var _react = require("react");
-var _ItemList = _interopRequireDefault(require("./ItemList"));
-var _Item = _interopRequireDefault(require("../Item"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemList.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  minColumnWidth: 220,
-  gap: 'md',
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
-    value: "1",
-    title: "Title 1",
-    description: "Description 1",
-    "data-test": "item1",
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "star-circle-filled",
-      intent: "info"
-    }),
-    onClick: () => {},
-    children: 'Content 1'
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
-    value: "2",
-    title: "Title 2",
-    description: "Description 2",
-    "data-test": "item2",
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "star-circle-filled",
-      intent: "success"
-    }),
-    onClick: () => {},
-    children: 'Content 2'
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
-    value: "3",
-    title: "Title 3",
-    description: "Description 3",
-    "data-test": "item3",
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "star-circle-filled",
-      intent: "warning"
-    }),
-    onClick: () => {},
-    hoverable: true,
-    children: 'Content 3'
-  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
-    value: "4",
-    title: "Title 4",
-    description: "Description 4",
-    "data-test": "item4",
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: "star-circle-filled",
-      intent: "danger"
-    }),
-    onClick: () => {},
-    disabled: true,
-    hoverable: true,
-    children: 'Content 4'
-  }, "4")]
-};
-const Cards = Basic.bind(null);
-exports.Cards = Cards;
-Cards.args = {
-  ...Basic.args,
-  children: Basic.args.children.map(child => child ? /*#__PURE__*/(0, _react.cloneElement)(child, {
-    view: 'card',
-    footer: `Footer ${child.props.value}`
-  }) : null)
-};
-const Reorderables = Basic.bind(null);
-exports.Reorderables = Reorderables;
-Reorderables.args = {
-  ...Basic.args,
-  reorderable: true
-};
-const Selectables = Basic.bind(null);
-exports.Selectables = Selectables;
-Selectables.args = {
-  ...Basic.args,
-  selectable: true,
-  defaultValue: '2'
-};
-const HoverableItemList = Basic.bind(null);
-exports.HoverableItemList = HoverableItemList;
-HoverableItemList.args = {
-  ...Basic.args,
-  hoverable: true,
-  defaultValue: '2',
-  children: Basic.args.children.map((child, index) => {
-    if (!child) {
-      return null;
-    }
-    return /*#__PURE__*/(0, _react.cloneElement)(child, {
-      hoverable: index === 0 ? false : undefined
-    });
-  })
-};
-const HoverableItems = Basic.bind(null);
-exports.HoverableItems = HoverableItems;
-HoverableItems.args = {
-  ...Basic.args,
-  hoverable: false,
-  defaultValue: '2',
-  children: Basic.args.children.map((child, index) => {
-    if (!child) {
-      return null;
-    }
-    return /*#__PURE__*/(0, _react.cloneElement)(child, {
-      hoverable: index % 2 === 0
-    });
-  })
-};