@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.956a1af6

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

@@ -0,0 +1,376 @@
+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 from 'react';
+import { ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import { ActionMenu } from '../ActionMenu2';
+import { ActionList } from '../ActionList2';
+import Button, { ButtonInvisible } from '../Button';
+import Box from '../Box';
+import Text from '../Text';
+import TextInput from '../TextInput';
+import StyledOcticon from '../StyledOcticon';
+import FormGroup from '../FormGroup';
+import { ServerIcon, PlusCircleIcon, TriangleDownIcon, KebabHorizontalIcon, PencilIcon, ArchiveIcon, TrashIcon, ProjectIcon, ListUnorderedIcon, ArrowDownIcon, SearchIcon, VersionsIcon, TableIcon } from '@primer/octicons-react';
+const meta = {
+  title: 'Composite components/ActionMenu2',
+  component: ActionMenu,
+  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+};
+export default meta;
+export function SimpleListStory() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple Menu"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+SimpleListStory.storyName = 'Simple Menu';
+export function ActionsStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ActionMenu, {
+    overlayProps: {
+      width: 'medium'
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open Actions Menu"
+  }, /*#__PURE__*/React.createElement(ServerIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ServerIcon, null)), "Open current Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318O")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PlusCircleIcon, null)), "Create new Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
+    variant: "block"
+  }, "Create a brand new Codespace with a fresh image and checkout this branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")))));
+}
+ActionsStory.storyName = 'Actions';
+export function ExternalAnchor() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "External Anchor"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    ref: triggerRef,
+    onClick: () => setOpen(!open)
+  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    anchorRef: triggerRef
+  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+ExternalAnchor.storyName = 'External Anchor';
+export function ControlledMenu() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Controlled Menu"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    ref: triggerRef,
+    onClick: () => setOpen(!open)
+  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      // Because the component is controlled from outside, but the anchor is still internal,
+      // clicking the external button should not be counted as "clicking outside"
+      ignoreClickRefs: [triggerRef]
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Anchor"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Copy link')
+  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Quote reply')
+  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Edit comment')
+  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
+}
+ControlledMenu.storyName = 'Controlled Menu';
+export function CustomAnchor() {
+  const [actionFired, fireAction] = React.useState('');
+
+  const onSelect = name => fireAction(name);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Anchor"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Anchor, null, /*#__PURE__*/React.createElement("summary", {
+    style: {
+      cursor: 'pointer'
+    },
+    "aria-label": "Open column options"
+  }, /*#__PURE__*/React.createElement(KebabHorizontalIcon, null))), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Rename')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    onSelect: () => onSelect('Archive')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArchiveIcon, null)), "Archive all cards"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger",
+    onSelect: () => onSelect('Delete file')
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete"))));
+}
+CustomAnchor.storyName = 'Custom Anchor';
+export function MemexTableMenu() {
+  const [name, setName] = React.useState('Estimate');
+  const inputRef = /*#__PURE__*/React.createRef();
+  /** To add custom components to the Menu,
+   *  you need to switch to a controlled menu
+   */
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      setName(event.currentTarget.value);
+      setOpen(false);
+    }
+  };
+  /** This requires inside knowledge. If you to do this with onBlur
+   *  on the input, it doesn't work :(
+   */
+
+
+  const handleClickOutside = () => {
+    if (inputRef.current) setName(inputRef.current.value);
+    setOpen(false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex Table Menu"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: 200,
+      display: 'flex',
+      justifyContent: 'space-between',
+      p: 2,
+      border: '1px solid',
+      borderColor: 'border.default'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: 0,
+      fontWeight: 'bold'
+    }
+  }, name), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      onClickOutside: handleClickOutside
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open Estimate column options menu",
+    sx: {
+      p: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(TextInput, {
+    ref: inputRef,
+    sx: {
+      m: 2
+    },
+    defaultValue: name,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement(ActionMenu.Divider, {
+    sx: {
+      m: 0
+    }
+  }), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort ascending (123...)"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort descending (123...)"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, "Filter by values"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Group by values"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    disabled: true
+  }, "Hide field"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+MemexTableMenu.storyName = 'Memex Table Menu';
+/* copied from github/memex */
+
+const LayoutToggleItem = ({
+  selected,
+  children,
+  Icon,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    sx: {
+      flex: 'auto',
+      borderRadius: 2,
+      border: '1px solid',
+      borderColor: selected ? 'accent.emphasis' : 'border.default',
+      textAlign: 'center',
+      cursor: 'pointer',
+      backgroundColor: selected ? 'accent.subtle' : '',
+      boxShadow: selected ? theme => `inset 0 0 0 1px ${theme.colors.accent.emphasis}` : '',
+      mb: 2,
+      mt: 1,
+      '&:hover': {
+        backgroundColor: !selected ? 'canvas.subtle' : ''
+      },
+      '&:first-of-type': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px',
+        borderRight: selected ? undefined : '0'
+      },
+      '&:last-of-type': {
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px',
+        borderLeft: selected ? undefined : '0'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(FormGroup.Label, _extends({
+    htmlFor: "layout-selector",
+    sx: {
+      fontWeight: 'normal',
+      cursor: 'pointer',
+      px: 3,
+      py: 2,
+      mb: 0
+    }
+  }, props), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      textAlign: 'center',
+      flexDirection: 'column',
+      m: 'auto',
+      alignItems: 'center',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: selected ? 'fg.default' : 'fg.muted',
+      fontSize: 0
+    }
+  }, children))));
+};
+
+LayoutToggleItem.displayName = "LayoutToggleItem";
+
+/* copied from github/memex */
+const ViewChangeButtons = ({
+  setOpen
+}) => /*#__PURE__*/React.createElement(Box, {
+  sx: {
+    display: 'flex'
+  }
+}, /*#__PURE__*/React.createElement(ButtonInvisible, {
+  onClick: () => setOpen(false),
+  sx: {
+    flex: 'auto',
+    minWidth: '50%',
+    borderRight: '1px solid',
+    borderColor: 'border.default',
+    borderRadius: 0,
+    mt: -2,
+    mb: -2,
+    py: 3,
+    '&:hover': {
+      bg: 'canvas.inset'
+    }
+  }
+}, "Save changes"), /*#__PURE__*/React.createElement(ButtonInvisible, {
+  onClick: () => setOpen(false),
+  sx: {
+    flex: 'auto',
+    color: 'fg.muted',
+    borderRadius: 0,
+    mt: -2,
+    mb: -2,
+    py: 3,
+    fontWeight: 'normal',
+    '&:hover': {
+      bg: 'canvas.inset'
+    }
+  }
+}, "Discard changes"));
+
+ViewChangeButtons.displayName = "ViewChangeButtons";
+export function MemexViewOptionsMenu() {
+  const [open, setOpen] = React.useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex View Options Menu"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: 1,
+      mr: 3
+    }
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ProjectIcon,
+    sx: {
+      mr: 2
+    }
+  }), "React"), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    overlayProps: {
+      width: 'medium'
+    }
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open View options menu",
+    sx: {
+      p: 0,
+      width: 18,
+      height: 18,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Group, {
+    title: "Layout"
+  }, /*#__PURE__*/React.createElement("li", {
+    style: {
+      listStyle: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      mx: 3,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(LayoutToggleItem, {
+    selected: true,
+    Icon: TableIcon
+  }, "Table"), /*#__PURE__*/React.createElement(LayoutToggleItem, {
+    selected: false,
+    Icon: ProjectIcon
+  }, "Board")))), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
+    title: "Configuration"
+  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "Title, Assignees, Status, Labels, Repositories"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "group: none"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowDownIcon, null)), "sort: manual"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(SearchIcon, null)), "Search or filter this view")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename view"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(VersionsIcon, null)), "Save changes to new view"), /*#__PURE__*/React.createElement(ActionList.Item, {
+    disabled: true
+  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete view"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement("li", {
+    style: {
+      listStyle: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(ViewChangeButtons, {
+    setOpen: setOpen
+  }))))));
+}
+MemexViewOptionsMenu.storyName = 'Memex View Options Menu';
+export function UnexpectedSelectionVariant() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Expect error if selectionVariant is passed"), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, {
+    selectionVariant: "multiple"
+  }, /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Quote reply"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit comment"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
+    variant: "danger"
+  }, "Delete file"))));
+}
+UnexpectedSelectionVariant.storyName = 'Unexpected selectionVariant';

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

@@ -30,11 +30,11 @@ export default {
 };
 const StyledLabel = styled.label.withConfig({
   displayName: "Checkboxstories__StyledLabel",
-  componentId: "sdupvr-0"
+  componentId: "sc-sdupvr-0"
 })(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
 const StyledSubLabel = styled(Text).withConfig({
   displayName: "Checkboxstories__StyledSubLabel",
-  componentId: "sdupvr-1"
+  componentId: "sc-sdupvr-1"
 })(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
 export const Default = args => {
   const [isChecked, setChecked] = useState(false);

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

@@ -12,11 +12,7 @@ export default {
     }
   }
 };
-const GlobalStyle = createGlobalStyle`
-    body {
-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`;
+const GlobalStyle = createGlobalStyle(["body{background-color:", ";}"], themeGet('colors.bg.canvas'));
 
 function ActiveColorScheme() {
   const {

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

@@ -11,17 +11,7 @@ export default {
 }; // NOTE: the below styles are solely intended as a visual aid for
 // this Storybook story, but they're not recommended for a real site!
 
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${themeGet('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${themeGet('colors.auto.yellow.2')}
-  }
-`;
+const HelperGlobalStyling = createGlobalStyle(["*:focus{outline:2px solid ", " !important;}[data-focus-trap='active']{background-color:", "}[data-focus-trap='suspended']{background-color:", "}"], themeGet('colors.auto.blue.3'), themeGet('colors.auto.green.2'), themeGet('colors.auto.yellow.2'));
 const MarginButton = styled(Button).withConfig({
   displayName: "useFocusTrapstories__MarginButton",
   componentId: "sc-12zkn1e-0"

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

@@ -16,14 +16,10 @@ export default {
 }; // NOTE: the below styles are solely intended as a visual aid for
 // this Storybook story, but they're not recommended for a real site!
 
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.border.info')} !important;
-  }
-`;
+const HelperGlobalStyling = createGlobalStyle(["*:focus{outline:2px solid ", " !important;}"], themeGet('colors.border.info'));
 const MarginButton = styled(Button).withConfig({
   displayName: "useFocusZonestories__MarginButton",
-  componentId: "e94kdz-0"
+  componentId: "sc-e94kdz-0"
 })(["margin:", ";"], themeGet('space.1'));
 export const BasicFocusZone = () => {
   // Display each key press in the top-right corner of the page as a visual aid