@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/lib-esm/stories/SelectPanel.stories.js

@@ -0,0 +1,334 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useRef, useState } from 'react';
+import { theme, ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import { DropdownButton } from '../DropdownMenu';
+import { SelectPanel } from '../SelectPanel';
+import Box from '../Box';
+const meta = {
+  title: 'Composite components/SelectPanel',
+  component: SelectPanel,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+
+function getColorCircle(color) {
+  return function () {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: color,
+      borderColor: color,
+      width: 14,
+      height: 14,
+      borderRadius: 10,
+      margin: "auto",
+      borderWidth: "1px",
+      borderStyle: "solid"
+    });
+  };
+}
+
+const items = [{
+  leadingVisual: getColorCircle('#a2eeef'),
+  text: 'enhancement',
+  id: 1
+}, {
+  leadingVisual: getColorCircle('#d73a4a'),
+  text: 'bug',
+  id: 2
+}, {
+  leadingVisual: getColorCircle('#0cf478'),
+  text: 'good first issue',
+  id: 3
+}, {
+  leadingVisual: getColorCircle('#ffd78e'),
+  text: 'design',
+  id: 4
+}, {
+  leadingVisual: getColorCircle('#ff0000'),
+  text: 'blocker',
+  id: 5
+}, {
+  leadingVisual: getColorCircle('#a4f287'),
+  text: 'backend',
+  id: 6
+}, {
+  leadingVisual: getColorCircle('#8dc6fc'),
+  text: 'frontend',
+  id: 7
+}];
+export function MultiSelectStory() {
+  const [selected, setSelected] = React.useState([items[0], items[1]]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select labels that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+MultiSelectStory.storyName = 'Multi Select';
+export function SingleSelectStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+SingleSelectStory.storyName = 'Single Select';
+export function ExternalAnchorStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Select Panel With External Anchor"), /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    onClick: () => setOpen(!open)
+  }, "Custom: ", (selected === null || selected === void 0 ? void 0 : selected.text) || 'Click Me'), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+ExternalAnchorStory.storyName = 'With External Anchor';
+export function SelectPanelHeightInitialWithOverflowingItemsStory() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsStory() {
+  const underflowingItems = [items[0], items[1]];
+  const [selected, setSelected] = React.useState(underflowingItems[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items';
+export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const [fetchedItems, setFetchedItems] = useState([]);
+  const filteredItems = React.useMemo(() => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), [fetchedItems, filter]);
+  const [open, setOpen] = useState(false);
+  const [height, setHeight] = useState('auto');
+
+  const onOpenChange = () => {
+    setOpen(!open);
+    setTimeout(() => {
+      setFetchedItems([items[0], items[1]]);
+      setHeight('initial');
+    }, 1500);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: onOpenChange,
+    loading: filteredItems.length === 0,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height,
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)';
+export function SelectPanelAboveTallBody() {
+  const [selected, setSelected] = React.useState(items[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'cornflowerblue',
+      height: '100vh'
+    }
+  }, "This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal is far down the page"));
+}
+SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body';
+export function SelectPanelHeightAndScroll() {
+  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items];
+  const [selectedA, setSelectedA] = React.useState(longItems[0]);
+  const [selectedB, setSelectedB] = React.useState(longItems[0]);
+  const [filter, setFilter] = React.useState('');
+  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [openA, setOpenA] = useState(false);
+  const [openB, setOpenB] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "With height:medium"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openA,
+    onOpenChange: setOpenA,
+    items: filteredItems,
+    selected: selectedA,
+    onSelectedChange: setSelectedA,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'medium'
+    }
+  }), /*#__PURE__*/React.createElement("h2", null, "With height:auto, maxheight:medium"), /*#__PURE__*/React.createElement(SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openB,
+    onOpenChange: setOpenB,
+    items: filteredItems,
+    selected: selectedB,
+    onSelectedChange: setSelectedB,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'auto',
+      maxHeight: 'medium'
+    }
+  }));
+}
+SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll';

package/lib-esm/stories/TextInputWithTokens.stories.js

@@ -0,0 +1,196 @@
+import React, { useCallback, useState } from 'react';
+import { BaseStyles, Box, ThemeProvider } from '..';
+import TextInputWithTokens from '../TextInputWithTokens';
+import IssueLabelToken from '../Token/IssueLabelToken';
+export default {
+  title: 'Forms/Text Input with Tokens',
+  component: TextInputWithTokens,
+  decorators: [Story => {
+    const [lastKey, setLastKey] = useState('none');
+    const reportKey = useCallback(event => {
+      setLastKey(event.key);
+    }, []);
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      onKeyDownCapture: reportKey
+    }, /*#__PURE__*/React.createElement(Box, {
+      position: "absolute",
+      right: 5,
+      top: 2
+    }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(Box, {
+      paddingTop: 5
+    }, /*#__PURE__*/React.createElement(Story, null)))));
+  }]
+};
+const mockTokens = [{
+  text: 'zero',
+  id: 0
+}, {
+  text: 'one',
+  id: 1
+}, {
+  text: 'two',
+  id: 2
+}, {
+  text: 'three',
+  id: 3
+}, {
+  text: 'four',
+  id: 4
+}, {
+  text: 'five',
+  id: 5
+}, {
+  text: 'six',
+  id: 6
+}, {
+  text: 'seven',
+  id: 7
+}, {
+  text: 'twenty',
+  id: 20
+}, {
+  text: 'twentyone',
+  id: 21
+}];
+export const Default = () => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+Default.displayName = "Default";
+export const UsingIssueLabelTokens = () => {
+  const [tokens, setTokens] = useState([{
+    text: 'enhancement',
+    id: 1,
+    fillColor: '#a2eeef'
+  }, {
+    text: 'bug',
+    id: 2,
+    fillColor: '#d73a4a'
+  }, {
+    text: 'good first issue',
+    id: 3,
+    fillColor: '#0cf478'
+  }]);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokenComponent: IssueLabelToken,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+UsingIssueLabelTokens.displayName = "UsingIssueLabelTokens";
+export const TokenSizeVariants = () => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    sx: {
+      gap: '1em'
+    }
+  }, /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "small"
+  }), /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "large"
+  }), /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "extralarge"
+  }));
+};
+TokenSizeVariants.displayName = "TokenSizeVariants";
+export const MaxHeight = () => {
+  const [tokens, setTokens] = useState(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    maxHeight: "100px"
+  }));
+};
+MaxHeight.displayName = "MaxHeight";
+MaxHeight.storyName = 'maxHeight 200px';
+export const TokenWrappingPrevented = () => {
+  const [tokens, setTokens] = useState(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    maxWidth: "500px"
+  }, /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    preventTokenWrapping: true,
+    block: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  }));
+};
+TokenWrappingPrevented.displayName = "TokenWrappingPrevented";
+export const TokenRemoveButtonsHidden = () => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    hideTokenRemoveButtons: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
+export const Unstyled = () => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove // TODO: come up with a nicer way to unstyle an input component
+    ,
+    sx: {
+      border: '0',
+      padding: '0',
+      boxShadow: 'none',
+      ':focus-within': {
+        border: '0',
+        boxShadow: 'none'
+      }
+    }
+  });
+};
+Unstyled.displayName = "Unstyled";

package/lib-esm/stories/ThemeProvider.stories.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ThemeProvider, BaseStyles, Box, themeGet, useTheme } from '..';
+import { createGlobalStyle } from 'styled-components';
+export default {
+  title: 'Generic behaviors/ThemeProvider',
+  component: ThemeProvider,
+  argTypes: {
+    theme: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+const GlobalStyle = createGlobalStyle`
+    body {
+        background-color: ${themeGet('colors.bg.canvas')};
+    }
+`;
+
+function ActiveColorScheme() {
+  const {
+    colorScheme
+  } = useTheme();
+  return /*#__PURE__*/React.createElement("span", null, "Active color scheme: ", colorScheme);
+}
+
+ActiveColorScheme.displayName = "ActiveColorScheme";
+export const Default = args => {
+  return /*#__PURE__*/React.createElement(ThemeProvider, args, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActiveColorScheme, null)));
+};
+Default.displayName = "Default";
+Default.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark'
+};
+
+function NightMode() {
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    colorMode: "night"
+  }, /*#__PURE__*/React.createElement(Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always night mode (", /*#__PURE__*/React.createElement(ActiveColorScheme, null), ")"));
+}
+
+NightMode.displayName = "NightMode";
+
+function InverseMode() {
+  const {
+    resolvedColorMode
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    colorMode: resolvedColorMode === 'day' ? 'night' : 'day'
+  }, /*#__PURE__*/React.createElement(Box, {
+    my: 3,
+    p: 3,
+    color: "fg.default",
+    bg: "canvas.default",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "border.default",
+    borderRadius: 2
+  }, "Always inverse of parent mode (", /*#__PURE__*/React.createElement(ActiveColorScheme, null), ")"));
+}
+
+InverseMode.displayName = "InverseMode";
+export const Nested = args => {
+  return /*#__PURE__*/React.createElement(ThemeProvider, args, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ActiveColorScheme, null), /*#__PURE__*/React.createElement(NightMode, null), /*#__PURE__*/React.createElement(InverseMode, null)));
+};
+Nested.displayName = "Nested";
+Nested.args = {
+  colorMode: 'day',
+  dayScheme: 'light',
+  nightScheme: 'dark_dimmed'
+};