@canonical/react-components 1.6.0 → 1.7.0

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomComponent = void 0;
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _SideNavigationLink.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};
+const CustomComponent = exports.CustomComponent = {
+  args: {
+    component: props => /*#__PURE__*/_react.default.createElement("button", props),
+    icon: "drag",
+    label: "Models"
+  }
+};

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationText from "./SideNavigationText";
+declare const meta: Meta<typeof SideNavigationText>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationText>;
+export declare const Default: Story;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _SideNavigationText.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    children: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SkipLink/SkipLink.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SkipLink from "./SkipLink";
+declare const meta: Meta<typeof SkipLink>;
+export default meta;
+type Story = StoryObj<typeof SkipLink>;
+export declare const Default: Story;

package/dist/components/SkipLink/SkipLink.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SkipLink = _interopRequireDefault(require("./SkipLink"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _SkipLink.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SkipLink.default, null), /*#__PURE__*/_react.default.createElement("p", null, "Click inside this example box, then hit the \"Tab\" key to make the skip link focused and visible.")),
+  name: "Default"
+};

package/dist/components/SkipLink/SkipLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Slider/Slider.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Slider from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+export declare const WithInput: Story;

package/dist/components/Slider/Slider.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithInput = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Slider = _interopRequireDefault(require("./Slider"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Template = args => {
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(50);
+  return /*#__PURE__*/_react.default.createElement(_Slider.default, _extends({}, args, {
+    onChange: e => setSelectedValue(Number(e.target.value)),
+    value: selectedValue
+  }));
+};
+const meta = {
+  component: _Slider.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    disabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: false
+  }
+};
+
+/**
+ * You can also optionally provide a numeric representation of the slider value.
+ */
+const WithInput = exports.WithInput = {
+  render: Template.bind({}),
+  name: "With input",
+  args: {
+    disabled: false,
+    inputDisabled: false,
+    label: "Volume",
+    max: 100,
+    min: 0,
+    showInput: true
+  }
+};

package/dist/components/Slider/Slider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Spinner from "./Spinner";
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+export declare const Default: Story;
+export declare const Text: Story;
+export declare const Assertive: Story;

package/dist/components/Spinner/Spinner.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Default = exports.Assertive = void 0;
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Spinner.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const Text = exports.Text = {
+  name: "Text",
+  args: {
+    text: "Loading..."
+  }
+};
+const Assertive = exports.Assertive = {
+  name: "Assertive",
+  args: {
+    ariaLive: "assertive"
+  }
+};

package/dist/components/Spinner/Spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/StatusLabel/StatusLabel.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import StatusLabel from "./StatusLabel";
+declare const meta: Meta<typeof StatusLabel>;
+export default meta;
+type Story = StoryObj<typeof StatusLabel>;
+export declare const Default: Story;
+export declare const Positive: Story;
+export declare const Caution: Story;
+export declare const Negative: Story;
+export declare const Information: Story;

package/dist/components/StatusLabel/StatusLabel.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Positive = exports.Negative = exports.Information = exports.Default = exports.Caution = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StatusLabel = _interopRequireWildcard(require("./StatusLabel"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _StatusLabel.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: _StatusLabel.StatusLabelAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Label",
+    appearance: _StatusLabel.StatusLabelAppearance.POSITIVE
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, null, "Default"),
+  name: "Default"
+};
+const Positive = exports.Positive = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "positive"
+  }, "Positive"),
+  name: "Positive"
+};
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "caution"
+  }, "Caution"),
+  name: "Caution"
+};
+const Negative = exports.Negative = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "negative"
+  }, "Negative"),
+  name: "Negative"
+};
+const Information = exports.Information = {
+  render: () => /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+    appearance: "information"
+  }, "Information"),
+  name: "Information"
+};

package/dist/components/StatusLabel/StatusLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Stepper/Step/Step.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Step from "./Step";
+declare const meta: Meta<typeof Step>;
+export default meta;
+type Story = StoryObj<typeof Step>;
+export declare const Default: Story;

package/dist/components/Stepper/Step/Step.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Step = _interopRequireDefault(require("./Step"));
+var _Stepper = _interopRequireDefault(require("../Stepper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const meta = {
+  component: _Step.default,
+  render: args => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, _extends({
+      key: "step"
+    }, args))]
+  }),
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    title: "Step 1",
+    index: 1,
+    enabled: false,
+    hasProgressLine: false,
+    iconName: "number",
+    handleClick: () => {}
+  }
+};

package/dist/components/Stepper/Step/Step.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Stepper from "./Stepper";
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+export declare const Default: Story;
+export declare const HorizontalStepper: Story;
+export declare const VerticalOptional: Story;
+export declare const HorizontalOptional: Story;
+export declare const VerticalSelected: Story;
+export declare const HorizontalSelected: Story;

package/dist/components/Stepper/Stepper.stories.js

@@ -0,0 +1,289 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VerticalSelected = exports.VerticalOptional = exports.HorizontalStepper = exports.HorizontalSelected = exports.HorizontalOptional = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Stepper = _interopRequireDefault(require("./Stepper"));
+var _Step = _interopRequireDefault(require("./Step"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Stepper.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    variant: "vertical",
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Default Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Default Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "spinner",
+      iconClassName: "u-animation--spin",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Default Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Default Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  }
+};
+const HorizontalStepper = exports.HorizontalStepper = {
+  name: "Horizontal Stepper",
+  render: () => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: false,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: false,
+      hasProgressLine: true,
+      iconName: "error",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "spinner",
+      iconClassName: "u-animation--spin",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  })
+};
+const VerticalOptional = exports.VerticalOptional = {
+  name: "Vertical variant: Optional labels and links",
+  render: () => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical optional Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical optional Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical optional Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical optional Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      linkProps: {
+        children: "Optional link"
+      },
+      iconName: "number",
+      handleClick: () => {}
+    })]
+  })
+};
+const HorizontalOptional = exports.HorizontalOptional = {
+  name: "Horizontal variant: Optional labels and links",
+  render: () => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal optional Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal optional Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal optional Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal optional Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    })]
+  })
+};
+const VerticalSelected = exports.VerticalSelected = {
+  name: "Vertical variant: Selected step",
+  render: () => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical Selected Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical Selected Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      handleClick: () => {},
+      label: "Optional label",
+      selected: true
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical Selected Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Vertical Selected Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      linkProps: {
+        children: "Optional link"
+      },
+      iconName: "number",
+      label: "Optional label",
+      handleClick: () => {}
+    })]
+  })
+};
+const HorizontalSelected = exports.HorizontalSelected = {
+  name: "Horizontal variant: Selected step",
+  render: () => /*#__PURE__*/_react.default.createElement(_Stepper.default, {
+    variant: "horizontal",
+    steps: [/*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Selected Step 1",
+      title: "Step 1",
+      index: 1,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      label: "Optional label",
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Selected Step 2",
+      title: "Step 2",
+      index: 2,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "success",
+      selected: true,
+      handleClick: () => {},
+      label: "Optional label"
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Selected Step 3",
+      title: "Step 3",
+      index: 3,
+      enabled: true,
+      hasProgressLine: true,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    }), /*#__PURE__*/_react.default.createElement(_Step.default, {
+      key: "Horizontal Selected Step 4",
+      title: "Step 4",
+      index: 4,
+      enabled: false,
+      hasProgressLine: false,
+      iconName: "number",
+      label: "Optional label",
+      linkProps: {
+        children: "Optional link"
+      },
+      handleClick: () => {}
+    })]
+  })
+};

package/dist/components/Stepper/Stepper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Strip/Strip.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Strip from "./Strip";
+declare const meta: Meta<typeof Strip>;
+export default meta;
+type Story = StoryObj<typeof Strip>;
+export declare const LightStrip: Story;
+export declare const DarkStrip: Story;
+export declare const AccentStrip: Story;
+export declare const ImageStrip: Story;
+export declare const BorderedStrip: Story;
+export declare const DeepStrip: Story;
+export declare const ShallowStrip: Story;