@nulogy/components 14.5.0 → 14.6.1

package/dist/main.js

@@ -25981,30 +25981,6 @@
       }, props));
     };
 
-    var Label = styled__default["default"].label.withConfig({
-      displayName: "Label",
-      componentId: "sc-lf392x-0"
-    })(function (_ref) {
-      var _ref$color = _ref.color,
-          color = _ref$color === void 0 ? "black" : _ref$color;
-      return {
-        color: color,
-        display: "inline-block"
-      };
-    }, display, space, color);
-
-    var LabelText$1 = styled__default["default"].span.withConfig({
-      displayName: "LabelText",
-      componentId: "sc-1crkhtp-0"
-    })(function (_ref) {
-      var theme = _ref.theme;
-      return {
-        fontSize: theme.fontSizes.small,
-        fontWeight: theme.fontWeights.bold,
-        lineHeight: theme.lineHeights.smallTextCompressed
-      };
-    });
-
     /**!
      * @fileOverview Kickass library to create and place poppers near their reference elements.
      * @version 1.16.1
@@ -29249,32 +29225,41 @@
       }, tooltip));
     });
 
-    function FramedIcon(_a) {
-      var isTooltipOpenByDefault = _a.isTooltipOpenByDefault,
-          tooltip = _a.tooltip,
-          maxWidth = _a.maxWidth,
-          iconSize = _a.iconSize,
-          iconProps = __rest$3(_a, ["isTooltipOpenByDefault", "tooltip", "maxWidth", "iconSize"]);
+    var Label = styled__default["default"].label.withConfig({
+      displayName: "Label",
+      componentId: "sc-lf392x-0"
+    })(function (_ref) {
+      var _ref$color = _ref.color,
+          color = _ref$color === void 0 ? "black" : _ref$color;
+      return {
+        color: color,
+        display: "inline-block"
+      };
+    }, display, space, color);
 
-      return /*#__PURE__*/React__default["default"].createElement(Flex, {
-        height: "x3",
-        width: "x3",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-        borderRadius: "medium"
-      }, tooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
-        tooltip: tooltip,
-        defaultOpen: isTooltipOpenByDefault,
-        maxWidth: maxWidth
-      }, /*#__PURE__*/React__default["default"].createElement(Icon, Object.assign({
-        color: "darkGrey",
-        size: iconSize !== null && iconSize !== void 0 ? iconSize : "x2"
-      }, iconProps))) : /*#__PURE__*/React__default["default"].createElement(Icon, Object.assign({
-        color: "darkGrey",
-        size: iconSize !== null && iconSize !== void 0 ? iconSize : "x2"
-      }, iconProps)));
-    }
+    var LabelContent = styled__default["default"].span.withConfig({
+      displayName: "LabelText__LabelContent",
+      componentId: "sc-1crkhtp-0"
+    })(function (_ref) {
+      var theme = _ref.theme;
+      return {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: theme.space.x0_5,
+        alignItems: "baseline"
+      };
+    });
+    var LabelText = styled__default["default"].span.withConfig({
+      displayName: "LabelText",
+      componentId: "sc-1crkhtp-1"
+    })(function (_ref2) {
+      var theme = _ref2.theme;
+      return {
+        fontSize: theme.fontSizes.small,
+        fontWeight: theme.fontWeights.bold,
+        lineHeight: theme.lineHeights.smallTextCompressed
+      };
+    });
 
     function FieldLabel(_a) {
       var labelText = _a.labelText,
@@ -29289,21 +29274,19 @@
       }, props), /*#__PURE__*/React__default["default"].createElement(Box, {
         mb: children && "x1",
         "data-testid": "field-label"
-      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
-        alignItems: "center"
-      }, /*#__PURE__*/React__default["default"].createElement(Flex, {
-        alignItems: "baseline"
-      }, /*#__PURE__*/React__default["default"].createElement(LabelText$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(LabelContent, {
+        "data-testid": "label-content"
+      }, /*#__PURE__*/React__default["default"].createElement(LabelText, {
         "data-testid": "label-text"
       }, labelText), requirementText && /*#__PURE__*/React__default["default"].createElement(RequirementText, {
-        "data-testid": "requirement-text"
-      }, requirementText)), hint && /*#__PURE__*/React__default["default"].createElement(Flex, {
-        display: "inline-flex",
-        ml: "half"
-      }, /*#__PURE__*/React__default["default"].createElement(FramedIcon, {
-        iconSize: "x2_5",
-        icon: "info",
+        "data-testid": "requirement-text",
+        ml: "none"
+      }, requirementText), hint && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
         tooltip: hint
+      }, /*#__PURE__*/React__default["default"].createElement(InlineIcon, {
+        color: "darkGrey",
+        size: "x2",
+        icon: "info"
       }))), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText$1, {
         "data-testid": "help-text"
       }, helpText)), children);
@@ -35900,7 +35883,8 @@
           labelText = _a.labelText,
           helpText = _a.helpText,
           requirementText = _a.requirementText,
-          props = __rest$3(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText"]);
+          hint = _a.hint,
+          props = __rest$3(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText", "hint"]);
 
       var otherProps = Object.assign(Object.assign({}, props), {
         errorMessage: errorMessage,
@@ -35909,7 +35893,20 @@
       return /*#__PURE__*/React__default["default"].createElement(Fieldset, {
         className: className,
         id: id
-      }, /*#__PURE__*/React__default["default"].createElement(Legend, null, /*#__PURE__*/React__default["default"].createElement(LabelText, null, labelText), requirementText && /*#__PURE__*/React__default["default"].createElement(RequirementText, null, requirementText)), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText$1, null, helpText), getCheckboxButtons(otherProps), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
+      }, /*#__PURE__*/React__default["default"].createElement(Legend, null, /*#__PURE__*/React__default["default"].createElement(LabelContent, {
+        "data-testid": "label-content"
+      }, /*#__PURE__*/React__default["default"].createElement(LabelText, {
+        "data-testid": "label-text"
+      }, labelText), requirementText && /*#__PURE__*/React__default["default"].createElement(RequirementText, {
+        "data-testid": "requirement-text",
+        ml: "none"
+      }, requirementText), hint && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        tooltip: hint
+      }, /*#__PURE__*/React__default["default"].createElement(InlineIcon, {
+        color: "darkGrey",
+        size: "x2",
+        icon: "info"
+      })))), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText$1, null, helpText), getCheckboxButtons(otherProps), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
         mt: "x1",
         errorMessage: errorMessage,
         errorList: errorList
@@ -35939,22 +35936,11 @@
       return checkboxButtons;
     };
 
-    var LabelText = styled__default["default"].span.withConfig({
-      displayName: "CheckboxGroup__LabelText",
+    var Legend = styled__default["default"].legend.withConfig({
+      displayName: "CheckboxGroup__Legend",
       componentId: "sc-ubmlt9-0"
     })(function (_ref) {
       var theme = _ref.theme;
-      return {
-        fontSize: theme.fontSizes.small,
-        fontWeight: theme.fontWeights.bold,
-        lineHeight: theme.lineHeights.smallTextBase
-      };
-    });
-    var Legend = styled__default["default"].legend.withConfig({
-      displayName: "CheckboxGroup__Legend",
-      componentId: "sc-ubmlt9-1"
-    })(function (_ref2) {
-      var theme = _ref2.theme;
       return {
         marginBottom: theme.space.x1
       };
@@ -62280,6 +62266,7 @@
     })(function (_ref) {
       var align = _ref.align,
           compact = _ref.compact,
+          verticalAlign = _ref.verticalAlign,
           theme = _ref.theme;
       var padding = compact ? theme.space.x1 : theme.space.x2;
       return {
@@ -62287,6 +62274,7 @@
         paddingBottom: padding,
         textAlign: align,
         paddingRight: padding,
+        verticalAlign: verticalAlign || "middle",
         "&:first-child": {
           paddingLeft: padding
         }
@@ -62325,7 +62313,8 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledTableCell, {
         align: column.align,
-        compact: compact
+        compact: compact,
+        verticalAlign: row.verticalAlign
       }, cellContent);
     };
 
@@ -62360,11 +62349,12 @@
     });
 
     var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
-      return rows.length > 0 ? rows.map(function (row) {
+      return rows.length > 0 ? rows.map(function (row, rowIndex) {
+        var rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
         return /*#__PURE__*/React__default["default"].createElement(TableBodyRow, {
+          key: rowKey,
           row: row,
           columns: columns,
-          key: row[keyField],
           keyField: keyField,
           rowHovers: rowHovers,
           compact: compact,

package/dist/main.module.js

@@ -25964,30 +25964,6 @@ var RequirementText = function RequirementText(props) {
   }, props));
 };
 
-var Label = styled.label.withConfig({
-  displayName: "Label",
-  componentId: "sc-lf392x-0"
-})(function (_ref) {
-  var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "black" : _ref$color;
-  return {
-    color: color,
-    display: "inline-block"
-  };
-}, display, space, color);
-
-var LabelText$1 = styled.span.withConfig({
-  displayName: "LabelText",
-  componentId: "sc-1crkhtp-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontSize: theme.fontSizes.small,
-    fontWeight: theme.fontWeights.bold,
-    lineHeight: theme.lineHeights.smallTextCompressed
-  };
-});
-
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
  * @version 1.16.1
@@ -29232,32 +29208,41 @@ var Tooltip$1 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, tooltip));
 });
 
-function FramedIcon(_a) {
-  var isTooltipOpenByDefault = _a.isTooltipOpenByDefault,
-      tooltip = _a.tooltip,
-      maxWidth = _a.maxWidth,
-      iconSize = _a.iconSize,
-      iconProps = __rest$3(_a, ["isTooltipOpenByDefault", "tooltip", "maxWidth", "iconSize"]);
+var Label = styled.label.withConfig({
+  displayName: "Label",
+  componentId: "sc-lf392x-0"
+})(function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "black" : _ref$color;
+  return {
+    color: color,
+    display: "inline-block"
+  };
+}, display, space, color);
 
-  return /*#__PURE__*/React__default.createElement(Flex, {
-    height: "x3",
-    width: "x3",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    borderRadius: "medium"
-  }, tooltip ? /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    tooltip: tooltip,
-    defaultOpen: isTooltipOpenByDefault,
-    maxWidth: maxWidth
-  }, /*#__PURE__*/React__default.createElement(Icon, Object.assign({
-    color: "darkGrey",
-    size: iconSize !== null && iconSize !== void 0 ? iconSize : "x2"
-  }, iconProps))) : /*#__PURE__*/React__default.createElement(Icon, Object.assign({
-    color: "darkGrey",
-    size: iconSize !== null && iconSize !== void 0 ? iconSize : "x2"
-  }, iconProps)));
-}
+var LabelContent = styled.span.withConfig({
+  displayName: "LabelText__LabelContent",
+  componentId: "sc-1crkhtp-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.space.x0_5,
+    alignItems: "baseline"
+  };
+});
+var LabelText = styled.span.withConfig({
+  displayName: "LabelText",
+  componentId: "sc-1crkhtp-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontSize: theme.fontSizes.small,
+    fontWeight: theme.fontWeights.bold,
+    lineHeight: theme.lineHeights.smallTextCompressed
+  };
+});
 
 function FieldLabel(_a) {
   var labelText = _a.labelText,
@@ -29272,21 +29257,19 @@ function FieldLabel(_a) {
   }, props), /*#__PURE__*/React__default.createElement(Box, {
     mb: children && "x1",
     "data-testid": "field-label"
-  }, /*#__PURE__*/React__default.createElement(Flex, {
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Flex, {
-    alignItems: "baseline"
-  }, /*#__PURE__*/React__default.createElement(LabelText$1, {
+  }, /*#__PURE__*/React__default.createElement(LabelContent, {
+    "data-testid": "label-content"
+  }, /*#__PURE__*/React__default.createElement(LabelText, {
     "data-testid": "label-text"
   }, labelText), requirementText && /*#__PURE__*/React__default.createElement(RequirementText, {
-    "data-testid": "requirement-text"
-  }, requirementText)), hint && /*#__PURE__*/React__default.createElement(Flex, {
-    display: "inline-flex",
-    ml: "half"
-  }, /*#__PURE__*/React__default.createElement(FramedIcon, {
-    iconSize: "x2_5",
-    icon: "info",
+    "data-testid": "requirement-text",
+    ml: "none"
+  }, requirementText), hint && /*#__PURE__*/React__default.createElement(Tooltip$1, {
     tooltip: hint
+  }, /*#__PURE__*/React__default.createElement(InlineIcon, {
+    color: "darkGrey",
+    size: "x2",
+    icon: "info"
   }))), helpText && /*#__PURE__*/React__default.createElement(HelpText$1, {
     "data-testid": "help-text"
   }, helpText)), children);
@@ -35883,7 +35866,8 @@ function CheckboxGroup(_a) {
       labelText = _a.labelText,
       helpText = _a.helpText,
       requirementText = _a.requirementText,
-      props = __rest$3(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText"]);
+      hint = _a.hint,
+      props = __rest$3(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText", "hint"]);
 
   var otherProps = Object.assign(Object.assign({}, props), {
     errorMessage: errorMessage,
@@ -35892,7 +35876,20 @@ function CheckboxGroup(_a) {
   return /*#__PURE__*/React__default.createElement(Fieldset, {
     className: className,
     id: id
-  }, /*#__PURE__*/React__default.createElement(Legend, null, /*#__PURE__*/React__default.createElement(LabelText, null, labelText), requirementText && /*#__PURE__*/React__default.createElement(RequirementText, null, requirementText)), helpText && /*#__PURE__*/React__default.createElement(HelpText$1, null, helpText), getCheckboxButtons(otherProps), /*#__PURE__*/React__default.createElement(InlineValidation, {
+  }, /*#__PURE__*/React__default.createElement(Legend, null, /*#__PURE__*/React__default.createElement(LabelContent, {
+    "data-testid": "label-content"
+  }, /*#__PURE__*/React__default.createElement(LabelText, {
+    "data-testid": "label-text"
+  }, labelText), requirementText && /*#__PURE__*/React__default.createElement(RequirementText, {
+    "data-testid": "requirement-text",
+    ml: "none"
+  }, requirementText), hint && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    tooltip: hint
+  }, /*#__PURE__*/React__default.createElement(InlineIcon, {
+    color: "darkGrey",
+    size: "x2",
+    icon: "info"
+  })))), helpText && /*#__PURE__*/React__default.createElement(HelpText$1, null, helpText), getCheckboxButtons(otherProps), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
     errorList: errorList
@@ -35922,22 +35919,11 @@ var getCheckboxButtons = function getCheckboxButtons(props) {
   return checkboxButtons;
 };
 
-var LabelText = styled.span.withConfig({
-  displayName: "CheckboxGroup__LabelText",
+var Legend = styled.legend.withConfig({
+  displayName: "CheckboxGroup__Legend",
   componentId: "sc-ubmlt9-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return {
-    fontSize: theme.fontSizes.small,
-    fontWeight: theme.fontWeights.bold,
-    lineHeight: theme.lineHeights.smallTextBase
-  };
-});
-var Legend = styled.legend.withConfig({
-  displayName: "CheckboxGroup__Legend",
-  componentId: "sc-ubmlt9-1"
-})(function (_ref2) {
-  var theme = _ref2.theme;
   return {
     marginBottom: theme.space.x1
   };
@@ -62263,6 +62249,7 @@ var StyledTableCell = styled.td.withConfig({
 })(function (_ref) {
   var align = _ref.align,
       compact = _ref.compact,
+      verticalAlign = _ref.verticalAlign,
       theme = _ref.theme;
   var padding = compact ? theme.space.x1 : theme.space.x2;
   return {
@@ -62270,6 +62257,7 @@ var StyledTableCell = styled.td.withConfig({
     paddingBottom: padding,
     textAlign: align,
     paddingRight: padding,
+    verticalAlign: verticalAlign || "middle",
     "&:first-child": {
       paddingLeft: padding
     }
@@ -62308,7 +62296,8 @@ var TableCell = function TableCell(_ref2) {
 
   return /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: column.align,
-    compact: compact
+    compact: compact,
+    verticalAlign: row.verticalAlign
   }, cellContent);
 };
 
@@ -62343,11 +62332,12 @@ var StyledTr = styled.tr.withConfig({
 });
 
 var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
-  return rows.length > 0 ? rows.map(function (row) {
+  return rows.length > 0 ? rows.map(function (row, rowIndex) {
+    var rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;
     return /*#__PURE__*/React__default.createElement(TableBodyRow, {
+      key: rowKey,
       row: row,
       columns: columns,
-      key: row[keyField],
       keyField: keyField,
       rowHovers: rowHovers,
       compact: compact,

package/dist/src/Checkbox/CheckboxGroup.d.ts

@@ -14,6 +14,7 @@ interface CheckboxGroupProps {
     requirementText?: string;
     required?: boolean;
     disabled?: boolean;
+    hint?: string;
 }
-export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: CheckboxGroupProps): React.JSX.Element;
+export default function CheckboxGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, hint, ...props }: CheckboxGroupProps): React.JSX.Element;
 export {};

package/dist/src/FieldLabel/FieldLabel.story.d.ts

@@ -14,3 +14,4 @@ export declare const WithRequirementText: () => React.JSX.Element;
 export declare const WithAllAdditionalText: () => React.JSX.Element;
 export declare const WithAssociatedCustomInputComponent: () => React.JSX.Element;
 export declare const WithHint: () => React.JSX.Element;
+export declare const WithRangeOfInputComponents: () => React.JSX.Element;

package/dist/src/FieldLabel/LabelText.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LabelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export default LabelText;

package/dist/src/Table/{BaseTable.story.d.ts → stories/BaseTable.story.d.ts}

@@ -16,3 +16,4 @@ export declare const WithMetadata: () => React.JSX.Element;
 export declare const WithFullWidthSection: () => React.JSX.Element;
 export declare const WithAFooter: () => React.JSX.Element;
 export declare const WithRowBorder: () => React.JSX.Element;
+export declare const WithVerticalAlignment: () => React.JSX.Element;

package/dist/src/Table/stories/CustomContent.story.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Inputs: () => React.JSX.Element;
+export declare const TextVariants: () => React.JSX.Element;

package/dist/src/Table/stories/Density.story.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Compact: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Table/stories/TableWithExpandableRows.story.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithExpandableRows: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithRowsExpandedByDefault: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "14.5.0",
+  "version": "14.6.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -85,7 +85,7 @@
     "@storybook/addon-knobs": "^6.1.9",
     "@storybook/addon-storysource": "^6.1.9",
     "@storybook/addon-toolbars": "^6.1.9",
-    "@storybook/addon-viewport": "^6.1.9",
+    "@storybook/addon-viewport": "^8.1.11",
     "@storybook/codemod": "^6.1.9",
     "@storybook/react": "6.3.12",
     "@storybook/theming": "^6.1.9",

package/dist/src/FieldLabel/FramedIcon.d.ts

@@ -1,12 +0,0 @@
-import React, { ReactElement } from "react";
-import { IconName } from "@nulogy/icons";
-interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> {
-    iconSize: string;
-    icon: IconName | "loading";
-    focusable?: boolean;
-    maxWidth?: string;
-    tooltip?: string | ReactElement;
-    isTooltipOpenByDefault?: boolean;
-}
-export default function FramedIcon({ isTooltipOpenByDefault, tooltip, maxWidth, iconSize, ...iconProps }: FramedIconProps): React.JSX.Element;
-export {};

package/dist/src/Table/TableWithExpandableRows.story.d.ts

@@ -1,19 +0,0 @@
-declare namespace _default {
-    const title: string;
-}
-export default _default;
-export function WithExpandableRows(): React.JSX.Element;
-export namespace WithExpandableRows {
-    namespace story {
-        const name: string;
-    }
-}
-export function WithRowsExpandedByDefault(): React.JSX.Element;
-export namespace WithRowsExpandedByDefault {
-    export namespace story_1 {
-        const name_1: string;
-        export { name_1 as name };
-    }
-    export { story_1 as story };
-}
-import React from "react";