@fluentui/react-migration-v8-v9 1.0.31 → 9.1.1

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,gBAAgB,EAChBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,gBAAgB,QACX,2BAA2B;AAElC,SAASC,YAAY,EAAEC,aAAa,QAAQ,yBAAyB;AAErE,SAASC,aAAa,EAAEC,SAAS,QAAQ,0BAA0B;AAEnE,SACEC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,EACbC,IAAI,EACJC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,UAAU,QACL,0BAA0B","names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/index.ts"],"sourcesContent":["export {\n  ActionButtonShim,\n  ButtonShim,\n  CommandButtonShim,\n  CompoundButtonShim,\n  DefaultButtonShim,\n  MenuButtonShim,\n  PrimaryButtonShim,\n  shimButtonProps,\n  ToggleButtonShim,\n} from './components/Button/index';\n\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\n\nexport { StackItemShim, StackShim } from './components/Stack/index';\n\nexport {\n  black,\n  blackAlpha,\n  brandWeb,\n  createBrandVariants,\n  createV8Theme,\n  createV9Theme,\n  grey,\n  grey14Alpha,\n  hcButtonFace,\n  hcButtonText,\n  hcCanvas,\n  hcCanvasText,\n  hcDisabled,\n  hcHighlight,\n  hcHighlightText,\n  hcHyperlink,\n  sharedColors,\n  white,\n  whiteAlpha,\n} from './components/Theme/index';\n\nexport type {\n  AlphaColors,\n  ColorVariants,\n  GlobalSharedColors,\n  Greys,\n  TextAlignment,\n  TextAlignments,\n} from './components/Theme/index';\n"]}
+{"version":3,"mappings":"AAAA,SACEA,gBAAgB,EAChBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,gBAAgB,QACX,2BAA2B;AAElC,SAASC,YAAY,EAAEC,aAAa,QAAQ,yBAAyB;AAErE,SAASC,aAAa,EAAEC,SAAS,QAAQ,0BAA0B;AAEnE,SACEC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,EACbC,IAAI,EACJC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,UAAU,QACL,0BAA0B","names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/index.ts"],"sourcesContent":["export {\n  ActionButtonShim,\n  ButtonShim,\n  CommandButtonShim,\n  CompoundButtonShim,\n  DefaultButtonShim,\n  MenuButtonShim,\n  PrimaryButtonShim,\n  shimButtonProps,\n  ToggleButtonShim,\n} from './components/Button/index';\n\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\n\nexport { StackItemShim, StackShim } from './components/Stack/index';\n\nexport {\n  black,\n  blackAlpha,\n  brandWeb,\n  createBrandVariants,\n  createV8Theme,\n  createV9Theme,\n  grey,\n  grey14Alpha,\n  hcButtonFace,\n  hcButtonText,\n  hcCanvas,\n  hcCanvasText,\n  hcDisabled,\n  hcHighlight,\n  hcHighlightText,\n  hcHyperlink,\n  sharedColors,\n  white,\n  whiteAlpha,\n} from './components/Theme/index';\n\nexport type {\n  AlphaColors,\n  ColorVariants,\n  GlobalSharedColors,\n  Greys,\n  TextAlignment,\n  TextAlignments,\n} from './components/Theme/index';\n"]}

package/lib/stories/ThemeShim/ThemePreviewV8.js

@@ -0,0 +1,316 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/naming-convention */
+import * as React from 'react';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
+import { ChoiceGroup } from '@fluentui/react/lib/ChoiceGroup';
+import { CommandBar } from '@fluentui/react/lib/CommandBar';
+import { DefaultButton, PrimaryButton, IconButton } from '@fluentui/react/lib/Button';
+import { Dropdown } from '@fluentui/react/lib/Dropdown';
+import { Icon } from '@fluentui/react/lib/Icon';
+import { Link } from '@fluentui/react/lib/Link';
+import { mergeStyles } from '@fluentui/react';
+import { Persona, PersonaPresence } from '@fluentui/react/lib/Persona';
+import { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';
+import { Slider } from '@fluentui/react/lib/Slider';
+import { Stack } from '@fluentui/react/lib/Stack';
+import { Text } from '@fluentui/react/lib/Text';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { Toggle } from '@fluentui/react/lib/Toggle';
+const iconButtonStyles = /*#__PURE__*/mergeStyles({
+  color: '#0078D4'
+});
+const commandBarItems = [{
+  key: 'newItem',
+  name: 'New',
+  cacheKey: 'myCacheKey',
+  iconProps: {
+    iconName: 'Add'
+  },
+  ariaLabel: 'New',
+  subMenuProps: {
+    items: [{
+      key: 'emailMessage',
+      name: 'Email message',
+      iconProps: {
+        iconName: 'Mail'
+      },
+      ['data-automation-id']: 'newEmailButton'
+    }, {
+      key: 'calendarEvent',
+      name: 'Calendar event',
+      iconProps: {
+        iconName: 'Calendar'
+      }
+    }]
+  }
+}, {
+  key: 'upload',
+  name: 'Upload',
+  iconProps: {
+    iconName: 'Upload'
+  },
+  onClick: () => console.log('Upload'),
+  ['data-automation-id']: 'uploadButton'
+}, {
+  key: 'share',
+  name: 'Share',
+  iconProps: {
+    iconName: 'Share'
+  },
+  onClick: () => console.log('Share')
+}, {
+  key: 'download',
+  name: 'Download',
+  iconProps: {
+    iconName: 'Download'
+  },
+  onClick: () => console.log('Download')
+}, {
+  key: 'more',
+  name: 'More',
+  iconProps: {
+    iconName: 'More'
+  },
+  onClick: () => console.log('More')
+}];
+const commandBarFarItems = [{
+  key: 'search',
+  ariaLabel: 'Search',
+  iconProps: {
+    iconName: 'Search'
+  },
+  onClick: () => console.log('Search')
+}, {
+  key: 'filter',
+  name: 'Filter',
+  ariaLabel: 'Filter',
+  iconProps: {
+    iconName: 'Filter'
+  },
+  iconOnly: true,
+  onClick: () => console.log('Filter')
+}, {
+  key: 'list',
+  name: 'List',
+  ariaLabel: 'List',
+  iconProps: {
+    iconName: 'List'
+  },
+  iconOnly: true,
+  onClick: () => console.log('List')
+}];
+const layoutStyles = {
+  root: /*#__PURE__*/mergeStyles({
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    gridTemplateRows: 'auto',
+    gridColumnGap: '32px',
+    gridRowGap: '32px',
+    padding: '16px'
+  }),
+  commandBar: /*#__PURE__*/mergeStyles({
+    gridColumnStart: '1',
+    gridColumnEnd: '4'
+  })
+};
+const stackXXXLGap = {
+  childrenGap: 32
+};
+const stackXLGap = {
+  childrenGap: 20
+};
+const stackLGap = {
+  childrenGap: 16
+};
+const stackMNudgeGap = {
+  childrenGap: 10
+};
+const checkboxStackTokens = {
+  childrenGap: 13
+};
+export class ThemePreviewV8 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      learnMoreLinkDisabled: false,
+      selectOneDropdownDisabled: false,
+      textFieldDisabled: false,
+      checkboxOneDisabled: false,
+      checkboxTwoDisabled: false,
+      checkboxThreeDisabled: false,
+      choicegroupDisabled: false,
+      sliderDisabled: false,
+      likeIconButtonDisabled: false,
+      bookmarkIconButtonDisabled: false,
+      sunnyIconButtonDisabled: false,
+      primaryButtonDisabled: false,
+      defaultButtonDisabled: false
+    };
+    this._onToggleChange = this._onToggleChange.bind(this);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        backgroundColor: this.props.backgroundColor,
+        color: this.props.textColor
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: layoutStyles.root
+    }, /*#__PURE__*/React.createElement("div", {
+      className: layoutStyles.commandBar
+    }, /*#__PURE__*/React.createElement(CommandBar, {
+      farItems: commandBarFarItems,
+      items: commandBarItems
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Stack, {
+      tokens: stackXXXLGap
+    }, /*#__PURE__*/React.createElement(Stack, {
+      tokens: stackXLGap
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "small",
+      styles: {
+        root: {
+          color: this.props.textColor
+        }
+      }
+    }, "STORIES"), /*#__PURE__*/React.createElement(Text, {
+      variant: "xxLarge",
+      styles: {
+        root: {
+          color: this.props.textColor,
+          lineHeight: '1em'
+        }
+      }
+    }, "Make an impression"), /*#__PURE__*/React.createElement(Text, {
+      variant: "medium",
+      styles: {
+        root: {
+          color: this.props.textColor
+        }
+      }
+    }, "Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate information to people inside or outisde your team. Share your ideas, results, and more in this visually compelling format."), /*#__PURE__*/React.createElement(Link, {
+      disabled: this.state.learnMoreLinkDisabled
+    }, "Learn more ", /*#__PURE__*/React.createElement(Icon, {
+      iconName: "ChevronRight"
+    }))), /*#__PURE__*/React.createElement(Persona, {
+      text: "Cameron Evans",
+      secondaryText: "Senior Researcher at Contoso",
+      presence: PersonaPresence.online
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Stack, {
+      tokens: stackXXXLGap
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      selectedKey: "content",
+      label: "Select one",
+      options: [{
+        key: 'content',
+        text: 'Content'
+      }, {
+        key: 'morecontent',
+        text: 'More content'
+      }],
+      disabled: this.state.selectOneDropdownDisabled
+    }), /*#__PURE__*/React.createElement(TextField, {
+      disabled: this.state.textFieldDisabled,
+      label: "Enter text here",
+      placeholder: "Placeholder"
+    }), /*#__PURE__*/React.createElement(Stack, {
+      horizontal: true,
+      tokens: stackXLGap
+    }, /*#__PURE__*/React.createElement(Stack, {
+      tokens: checkboxStackTokens,
+      grow: 1
+    }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: this.state.checkboxOneDisabled,
+      label: "Option 1"
+    }), /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: this.state.checkboxTwoDisabled,
+      label: "Option 2",
+      defaultChecked: true
+    }), /*#__PURE__*/React.createElement(Checkbox, {
+      disabled: this.state.checkboxThreeDisabled,
+      label: "Option 3",
+      defaultChecked: true
+    })), /*#__PURE__*/React.createElement(Stack, {
+      tokens: stackMNudgeGap,
+      grow: 1
+    }, /*#__PURE__*/React.createElement(ChoiceGroup, {
+      defaultSelectedKey: "A",
+      options: [{
+        key: 'A',
+        text: 'Option 1'
+      }, {
+        key: 'B',
+        text: 'Option 2'
+      }, {
+        key: 'C',
+        text: 'Option 3'
+      }],
+      disabled: this.state.choicegroupDisabled
+    }))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Stack, {
+      tokens: stackXXXLGap
+    }, /*#__PURE__*/React.createElement(Slider, {
+      disabled: this.state.sliderDisabled,
+      max: 11
+    }), /*#__PURE__*/React.createElement(Toggle, {
+      onText: "On",
+      offText: "Off",
+      inlineLabel: true,
+      label: "Toggle for disabled states",
+      onChange: this._onToggleChange
+    }), /*#__PURE__*/React.createElement(Pivot, null, /*#__PURE__*/React.createElement(PivotItem, {
+      headerText: "Home"
+    }), /*#__PURE__*/React.createElement(PivotItem, {
+      headerText: "Pages"
+    }), /*#__PURE__*/React.createElement(PivotItem, {
+      headerText: "Documents"
+    }), /*#__PURE__*/React.createElement(PivotItem, {
+      headerText: "Activity"
+    })), /*#__PURE__*/React.createElement(Stack, {
+      horizontal: true,
+      tokens: stackLGap
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      disabled: this.state.likeIconButtonDisabled,
+      iconProps: {
+        iconName: 'Like'
+      },
+      className: iconButtonStyles
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      disabled: this.state.bookmarkIconButtonDisabled,
+      iconProps: {
+        iconName: 'SingleBookmark'
+      },
+      className: iconButtonStyles
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      disabled: this.state.sunnyIconButtonDisabled,
+      iconProps: {
+        iconName: 'Sunny'
+      },
+      className: iconButtonStyles
+    })), /*#__PURE__*/React.createElement(Stack, {
+      horizontal: true,
+      tokens: stackMNudgeGap
+    }, /*#__PURE__*/React.createElement(PrimaryButton, {
+      disabled: this.state.primaryButtonDisabled,
+      text: "Primary button"
+    }), /*#__PURE__*/React.createElement(DefaultButton, {
+      disabled: this.state.defaultButtonDisabled,
+      text: "Default button"
+    }))))));
+  }
+  _onToggleChange() {
+    this.setState({
+      learnMoreLinkDisabled: !this.state.learnMoreLinkDisabled,
+      selectOneDropdownDisabled: !this.state.selectOneDropdownDisabled,
+      textFieldDisabled: !this.state.textFieldDisabled,
+      checkboxOneDisabled: !this.state.checkboxOneDisabled,
+      checkboxTwoDisabled: !this.state.checkboxTwoDisabled,
+      checkboxThreeDisabled: !this.state.checkboxThreeDisabled,
+      sliderDisabled: !this.state.sliderDisabled,
+      likeIconButtonDisabled: !this.state.likeIconButtonDisabled,
+      bookmarkIconButtonDisabled: !this.state.bookmarkIconButtonDisabled,
+      sunnyIconButtonDisabled: !this.state.sunnyIconButtonDisabled,
+      primaryButtonDisabled: !this.state.primaryButtonDisabled,
+      defaultButtonDisabled: !this.state.defaultButtonDisabled
+    });
+  }
+}
+//# sourceMappingURL=ThemePreviewV8.js.map

package/lib/stories/ThemeShim/ThemePreviewV8.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["React","Checkbox","ChoiceGroup","CommandBar","DefaultButton","PrimaryButton","IconButton","Dropdown","Icon","Link","mergeStyles","Persona","PersonaPresence","Pivot","PivotItem","Slider","Stack","Text","TextField","Toggle","iconButtonStyles","color","commandBarItems","key","name","cacheKey","iconProps","iconName","ariaLabel","subMenuProps","items","onClick","console","log","commandBarFarItems","iconOnly","layoutStyles","root","display","gridTemplateColumns","gridTemplateRows","gridColumnGap","gridRowGap","padding","commandBar","gridColumnStart","gridColumnEnd","stackXXXLGap","childrenGap","stackXLGap","stackLGap","stackMNudgeGap","checkboxStackTokens","ThemePreviewV8","Component","constructor","props","state","learnMoreLinkDisabled","selectOneDropdownDisabled","textFieldDisabled","checkboxOneDisabled","checkboxTwoDisabled","checkboxThreeDisabled","choicegroupDisabled","sliderDisabled","likeIconButtonDisabled","bookmarkIconButtonDisabled","sunnyIconButtonDisabled","primaryButtonDisabled","defaultButtonDisabled","_onToggleChange","bind","render","style","backgroundColor","textColor","className","farItems","tokens","variant","styles","lineHeight","disabled","text","secondaryText","presence","online","selectedKey","label","options","placeholder","horizontal","grow","defaultChecked","defaultSelectedKey","max","onText","offText","inlineLabel","onChange","headerText","setState"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/stories/ThemeShim/ThemePreviewV8.tsx"],"sourcesContent":["/* eslint-disable no-console */\n/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport { Checkbox } from '@fluentui/react/lib/Checkbox';\nimport { ChoiceGroup } from '@fluentui/react/lib/ChoiceGroup';\nimport { CommandBar } from '@fluentui/react/lib/CommandBar';\nimport { DefaultButton, PrimaryButton, IconButton } from '@fluentui/react/lib/Button';\nimport { Dropdown } from '@fluentui/react/lib/Dropdown';\nimport { Icon } from '@fluentui/react/lib/Icon';\nimport { Link } from '@fluentui/react/lib/Link';\nimport { mergeStyles } from '@fluentui/react';\nimport { Persona, PersonaPresence } from '@fluentui/react/lib/Persona';\nimport { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';\nimport { Slider } from '@fluentui/react/lib/Slider';\nimport { IStackTokens, Stack } from '@fluentui/react/lib/Stack';\nimport { Text } from '@fluentui/react/lib/Text';\nimport { TextField } from '@fluentui/react/lib/TextField';\nimport { Toggle } from '@fluentui/react/lib/Toggle';\n\nexport interface ISamplesProps {\n  backgroundColor: string;\n  textColor: string;\n}\n\nexport interface ISamplesState {\n  learnMoreLinkDisabled: boolean;\n  selectOneDropdownDisabled: boolean;\n  textFieldDisabled: boolean;\n  checkboxOneDisabled: boolean;\n  checkboxTwoDisabled: boolean;\n  checkboxThreeDisabled: boolean;\n  choicegroupDisabled: boolean;\n  sliderDisabled: boolean;\n  likeIconButtonDisabled: boolean;\n  bookmarkIconButtonDisabled: boolean;\n  sunnyIconButtonDisabled: boolean;\n  primaryButtonDisabled: boolean;\n  defaultButtonDisabled: boolean;\n}\n\nconst iconButtonStyles = mergeStyles({\n  color: '#0078D4',\n});\n\nconst commandBarItems = [\n  {\n    key: 'newItem',\n    name: 'New',\n    cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache\n    iconProps: {\n      iconName: 'Add',\n    },\n    ariaLabel: 'New',\n    subMenuProps: {\n      items: [\n        {\n          key: 'emailMessage',\n          name: 'Email message',\n          iconProps: {\n            iconName: 'Mail',\n          },\n          ['data-automation-id']: 'newEmailButton',\n        },\n        {\n          key: 'calendarEvent',\n          name: 'Calendar event',\n          iconProps: {\n            iconName: 'Calendar',\n          },\n        },\n      ],\n    },\n  },\n  {\n    key: 'upload',\n    name: 'Upload',\n    iconProps: {\n      iconName: 'Upload',\n    },\n    onClick: () => console.log('Upload'),\n    ['data-automation-id']: 'uploadButton',\n  },\n  {\n    key: 'share',\n    name: 'Share',\n    iconProps: {\n      iconName: 'Share',\n    },\n    onClick: () => console.log('Share'),\n  },\n  {\n    key: 'download',\n    name: 'Download',\n    iconProps: {\n      iconName: 'Download',\n    },\n    onClick: () => console.log('Download'),\n  },\n  {\n    key: 'more',\n    name: 'More',\n    iconProps: {\n      iconName: 'More',\n    },\n    onClick: () => console.log('More'),\n  },\n];\n\nconst commandBarFarItems = [\n  {\n    key: 'search',\n    ariaLabel: 'Search',\n    iconProps: {\n      iconName: 'Search',\n    },\n    onClick: () => console.log('Search'),\n  },\n  {\n    key: 'filter',\n    name: 'Filter',\n    ariaLabel: 'Filter',\n    iconProps: {\n      iconName: 'Filter',\n    },\n    iconOnly: true,\n    onClick: () => console.log('Filter'),\n  },\n  {\n    key: 'list',\n    name: 'List',\n    ariaLabel: 'List',\n    iconProps: {\n      iconName: 'List',\n    },\n    iconOnly: true,\n    onClick: () => console.log('List'),\n  },\n];\n\nconst layoutStyles = {\n  root: mergeStyles({\n    display: 'grid',\n    gridTemplateColumns: '1fr 1fr 1fr',\n    gridTemplateRows: 'auto',\n    gridColumnGap: '32px',\n    gridRowGap: '32px',\n    padding: '16px',\n  }),\n  commandBar: mergeStyles({\n    gridColumnStart: '1',\n    gridColumnEnd: '4',\n  }),\n};\n\nconst stackXXXLGap: IStackTokens = { childrenGap: 32 };\nconst stackXLGap: IStackTokens = { childrenGap: 20 };\nconst stackLGap: IStackTokens = { childrenGap: 16 };\nconst stackMNudgeGap: IStackTokens = { childrenGap: 10 };\n\nconst checkboxStackTokens: IStackTokens = {\n  childrenGap: 13,\n};\n\nexport class ThemePreviewV8 extends React.Component<ISamplesProps, ISamplesState> {\n  constructor(props: ISamplesProps) {\n    super(props);\n    this.state = {\n      learnMoreLinkDisabled: false,\n      selectOneDropdownDisabled: false,\n      textFieldDisabled: false,\n      checkboxOneDisabled: false,\n      checkboxTwoDisabled: false,\n      checkboxThreeDisabled: false,\n      choicegroupDisabled: false,\n      sliderDisabled: false,\n      likeIconButtonDisabled: false,\n      bookmarkIconButtonDisabled: false,\n      sunnyIconButtonDisabled: false,\n      primaryButtonDisabled: false,\n      defaultButtonDisabled: false,\n    };\n    this._onToggleChange = this._onToggleChange.bind(this);\n  }\n  public render() {\n    return (\n      <div style={{ backgroundColor: this.props.backgroundColor, color: this.props.textColor }}>\n        <div className={layoutStyles.root}>\n          <div className={layoutStyles.commandBar}>\n            <CommandBar farItems={commandBarFarItems} items={commandBarItems} />\n          </div>\n          <div>\n            <Stack tokens={stackXXXLGap}>\n              <Stack tokens={stackXLGap}>\n                <Text variant=\"small\" styles={{ root: { color: this.props.textColor } }}>\n                  STORIES\n                </Text>\n                <Text variant=\"xxLarge\" styles={{ root: { color: this.props.textColor, lineHeight: '1em' } }}>\n                  Make an impression\n                </Text>\n                <Text variant=\"medium\" styles={{ root: { color: this.props.textColor } }}>\n                  Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate\n                  information to people inside or outisde your team. Share your ideas, results, and more in this\n                  visually compelling format.\n                </Text>\n                <Link disabled={this.state.learnMoreLinkDisabled}>\n                  Learn more <Icon iconName=\"ChevronRight\" />\n                </Link>\n              </Stack>\n              <Persona\n                text=\"Cameron Evans\"\n                secondaryText=\"Senior Researcher at Contoso\"\n                presence={PersonaPresence.online}\n              />\n            </Stack>\n          </div>\n          <div>\n            <Stack tokens={stackXXXLGap}>\n              <Dropdown\n                selectedKey=\"content\"\n                label=\"Select one\"\n                options={[\n                  { key: 'content', text: 'Content' },\n                  { key: 'morecontent', text: 'More content' },\n                ]}\n                disabled={this.state.selectOneDropdownDisabled}\n              />\n              <TextField disabled={this.state.textFieldDisabled} label=\"Enter text here\" placeholder=\"Placeholder\" />\n              <Stack horizontal tokens={stackXLGap}>\n                <Stack tokens={checkboxStackTokens} grow={1}>\n                  <div />\n                  <Checkbox disabled={this.state.checkboxOneDisabled} label=\"Option 1\" />\n                  <Checkbox disabled={this.state.checkboxTwoDisabled} label=\"Option 2\" defaultChecked />\n                  <Checkbox disabled={this.state.checkboxThreeDisabled} label=\"Option 3\" defaultChecked />\n                </Stack>\n                <Stack tokens={stackMNudgeGap} grow={1}>\n                  <ChoiceGroup\n                    defaultSelectedKey=\"A\"\n                    options={[\n                      { key: 'A', text: 'Option 1' },\n                      { key: 'B', text: 'Option 2' },\n                      { key: 'C', text: 'Option 3' },\n                    ]}\n                    disabled={this.state.choicegroupDisabled}\n                  />\n                </Stack>\n              </Stack>\n            </Stack>\n          </div>\n          <div>\n            <Stack tokens={stackXXXLGap}>\n              <Slider disabled={this.state.sliderDisabled} max={11} />\n              <Toggle\n                onText=\"On\"\n                offText=\"Off\"\n                inlineLabel\n                label=\"Toggle for disabled states\"\n                onChange={this._onToggleChange}\n              />\n              <Pivot>\n                <PivotItem headerText=\"Home\" />\n                <PivotItem headerText=\"Pages\" />\n                <PivotItem headerText=\"Documents\" />\n                <PivotItem headerText=\"Activity\" />\n              </Pivot>\n              <Stack horizontal tokens={stackLGap}>\n                <IconButton\n                  disabled={this.state.likeIconButtonDisabled}\n                  iconProps={{ iconName: 'Like' }}\n                  className={iconButtonStyles}\n                />\n                <IconButton\n                  disabled={this.state.bookmarkIconButtonDisabled}\n                  iconProps={{ iconName: 'SingleBookmark' }}\n                  className={iconButtonStyles}\n                />\n                <IconButton\n                  disabled={this.state.sunnyIconButtonDisabled}\n                  iconProps={{ iconName: 'Sunny' }}\n                  className={iconButtonStyles}\n                />\n              </Stack>\n              <Stack horizontal tokens={stackMNudgeGap}>\n                <PrimaryButton disabled={this.state.primaryButtonDisabled} text=\"Primary button\" />\n                <DefaultButton disabled={this.state.defaultButtonDisabled} text=\"Default button\" />\n              </Stack>\n            </Stack>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private _onToggleChange() {\n    this.setState({\n      learnMoreLinkDisabled: !this.state.learnMoreLinkDisabled,\n      selectOneDropdownDisabled: !this.state.selectOneDropdownDisabled,\n      textFieldDisabled: !this.state.textFieldDisabled,\n      checkboxOneDisabled: !this.state.checkboxOneDisabled,\n      checkboxTwoDisabled: !this.state.checkboxTwoDisabled,\n      checkboxThreeDisabled: !this.state.checkboxThreeDisabled,\n      sliderDisabled: !this.state.sliderDisabled,\n      likeIconButtonDisabled: !this.state.likeIconButtonDisabled,\n      bookmarkIconButtonDisabled: !this.state.bookmarkIconButtonDisabled,\n      sunnyIconButtonDisabled: !this.state.sunnyIconButtonDisabled,\n      primaryButtonDisabled: !this.state.primaryButtonDisabled,\n      defaultButtonDisabled: !this.state.defaultButtonDisabled,\n    });\n  }\n}\n"]}

package/lib/stories/ThemeShim/ThemePreviewV9.js

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, Body1, Title3, TabList, Tab, Input, Button, Caption1, Dropdown, Option, Slider, Badge, Switch, Radio, RadioGroup, Checkbox, Avatar, useId, Caption2 } from '@fluentui/react-components';
+import { SearchRegular, bundleIcon, ChevronRightRegular, MeetNowRegular, MeetNowFilled, CalendarLtrFilled, CalendarLtrRegular } from '@fluentui/react-icons';
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    z8tnut: "fqag9an",
+    z189sj: ["f1gbmcue", "f1rh9g5y"],
+    Byoj8tv: "fp67ikv",
+    uwmqm3: ["f1rh9g5y", "f1gbmcue"]
+  },
+  threeCol: {
+    mc9l5x: "f13qh94s",
+    Bt984gj: "f1s2louj",
+    Brf1p80: "f4d9j23",
+    Budl1dq: "f18eqifj",
+    wkccdc: "f1olsevy",
+    wvm1r4: "ftxeir9"
+  },
+  col1: {
+    mc9l5x: "f22iagw",
+    Brf1p80: "f1869bpl",
+    Beiy3e4: "f1vx9l62",
+    i8kkvl: "f1v0c5lh",
+    Belr9w4: "f13377fj"
+  },
+  col2: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bt984gj: "f122n59",
+    i8kkvl: "f1v0c5lh",
+    Belr9w4: "f13377fj"
+  },
+  col3: {
+    mc9l5x: "f13qh94s",
+    Budl1dq: "ftow3ju",
+    wkccdc: "f1y77emp",
+    a6qtfi: "fzoc0u6",
+    wvm1r4: "f1ab651c",
+    Brf1p80: "f4d9j23",
+    Bt984gj: "f122n59"
+  },
+  twoCol: {
+    Br312pm: "fwpfdsa",
+    Bw0ie65: "fz1yyy6"
+  },
+  controls: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23"
+  },
+  icons: {
+    mc9l5x: "f13qh94s",
+    Budl1dq: "f1ea4fvb",
+    wkccdc: "ffh4ag3",
+    a6qtfi: "fzoc0u6",
+    wvm1r4: "f1ab651c",
+    Brf1p80: "f4d9j23"
+  },
+  avatar: {
+    mc9l5x: "f22iagw",
+    i8kkvl: "f1v0c5lh",
+    Belr9w4: "f13377fj"
+  },
+  avatarText: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Brf1p80: ["fc7pyfw", "fgbriwd"]
+  }
+}, {
+  d: [".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".f13qh94s{display:grid;}", ".f1s2louj{-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f18eqifj{grid-template-columns:repeat(3, 1fr);}", ".f1olsevy{grid-template-rows:auto;}", ".ftxeir9{grid-column-gap:var(--spacingHorizontalXXXL);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1v0c5lh{-webkit-column-gap:var(--spacingVerticalL);column-gap:var(--spacingVerticalL);}", ".f13377fj{row-gap:var(--spacingVerticalL);}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftow3ju{grid-template-columns:1fr 1fr;}", ".f1y77emp{grid-template-rows:repeat(4, auto);}", ".fzoc0u6{grid-row-gap:var(--spacingVerticalS);}", ".f1ab651c{grid-column-gap:var(--spacingHorizontalS);}", ".fwpfdsa{grid-column-start:1;}", ".fz1yyy6{grid-column-end:3;}", ".f1ea4fvb{grid-template-columns:auto auto;}", ".ffh4ag3{grid-template-rows:auto auto;}", ".fc7pyfw{-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;}", ".fgbriwd{-webkit-box-pack:right;-ms-flex-pack:right;-webkit-justify-content:right;justify-content:right;}"]
+});
+const Column1 = () => {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.col1
+  }, /*#__PURE__*/React.createElement(Title3, {
+    block: true
+  }, "Make an impression"), /*#__PURE__*/React.createElement(Body1, {
+    block: true
+  }, "Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate information to people inside or outside your team. Share your ideas, results, and more in this visually compelling format."), /*#__PURE__*/React.createElement("div", {
+    className: styles.avatar
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    color: "brand",
+    initials: "CE",
+    badge: {
+      status: 'available',
+      'aria-label': 'available'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.avatarText
+  }, "Cameron Evans", /*#__PURE__*/React.createElement(Caption2, null, "Senior Researcher at Contoso"))));
+};
+const Column2 = () => {
+  const styles = useStyles();
+  const dropdownId = useId('dropdown-default');
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.col2
+  }, /*#__PURE__*/React.createElement(TabList, {
+    defaultSelectedValue: "tab1"
+  }, /*#__PURE__*/React.createElement(Tab, {
+    value: "tab1"
+  }, "Home"), /*#__PURE__*/React.createElement(Tab, {
+    value: "tab2"
+  }, "Pages"), /*#__PURE__*/React.createElement(Tab, {
+    value: "tab3"
+  }, "Documents")), /*#__PURE__*/React.createElement(Input, {
+    placeholder: "Find",
+    contentAfter: /*#__PURE__*/React.createElement(Button, {
+      "aria-label": "Find",
+      appearance: "transparent",
+      icon: /*#__PURE__*/React.createElement(SearchRegular, null),
+      size: "small"
+    })
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    "aria-labelledby": dropdownId,
+    placeholder: "Select",
+    inlinePopup: true
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "Action 1"
+  }, "Action 1"), /*#__PURE__*/React.createElement(Option, {
+    value: "Action 2"
+  }, "Action 2 "), /*#__PURE__*/React.createElement(Option, {
+    value: "Action 3"
+  }, "Action 3")));
+};
+const DemoIcons = () => {
+  const styles = useStyles();
+  const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular);
+  const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.icons
+  }, /*#__PURE__*/React.createElement(Badge, {
+    size: "medium",
+    appearance: "filled",
+    icon: /*#__PURE__*/React.createElement(CalendarLtrIcon, null)
+  }), /*#__PURE__*/React.createElement(Badge, {
+    size: "medium",
+    appearance: "ghost",
+    icon: /*#__PURE__*/React.createElement(CalendarLtrIcon, null)
+  }), /*#__PURE__*/React.createElement(Badge, {
+    size: "medium",
+    appearance: "outline",
+    icon: /*#__PURE__*/React.createElement(MeetNowIcon, null)
+  }), /*#__PURE__*/React.createElement(Badge, {
+    size: "medium",
+    appearance: "tint",
+    icon: /*#__PURE__*/React.createElement(MeetNowIcon, null)
+  }));
+};
+const Column3 = () => {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.col3
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary"
+  }, "Sign Up"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "transparent",
+    icon: /*#__PURE__*/React.createElement(ChevronRightRegular, null),
+    iconPosition: "after"
+  }, "Learn More"), /*#__PURE__*/React.createElement(Slider, {
+    className: styles.twoCol,
+    defaultValue: 50
+  }), /*#__PURE__*/React.createElement(DemoIcons, null), /*#__PURE__*/React.createElement("div", {
+    className: styles.controls
+  }, /*#__PURE__*/React.createElement(Switch, {
+    defaultChecked: true,
+    label: "On"
+  }), /*#__PURE__*/React.createElement(Switch, {
+    label: "Off"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.controls
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    defaultChecked: true,
+    label: "Option 1"
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: "Option 2"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.controls
+  }, /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(Radio, {
+    defaultChecked: true,
+    label: "Option 1"
+  }), /*#__PURE__*/React.createElement(Radio, {
+    label: "Option 2"
+  }))));
+};
+export const ThemePreviewV9 = props => {
+  const styles = useStyles();
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(Caption1, null, "Examples"), /*#__PURE__*/React.createElement("div", {
+    className: mergeClasses(styles.threeCol, props.className)
+  }, /*#__PURE__*/React.createElement(Column1, null), /*#__PURE__*/React.createElement(Column2, null), /*#__PURE__*/React.createElement(Column3, null)));
+};
+//# sourceMappingURL=ThemePreviewV9.js.map

package/lib/stories/ThemeShim/ThemePreviewV9.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["React","mergeClasses","shorthands","tokens","Body1","Title3","TabList","Tab","Input","Button","Caption1","Dropdown","Option","Slider","Badge","Switch","Radio","RadioGroup","Checkbox","Avatar","useId","Caption2","SearchRegular","bundleIcon","ChevronRightRegular","MeetNowRegular","MeetNowFilled","CalendarLtrFilled","CalendarLtrRegular","useStyles","Column1","styles","className","col1","block","avatar","color","initials","badge","status","avatarText","Column2","dropdownId","col2","defaultSelectedValue","value","placeholder","contentAfter","appearance","icon","size","inlinePopup","DemoIcons","MeetNowIcon","CalendarLtrIcon","icons","Column3","col3","iconPosition","twoCol","defaultValue","controls","defaultChecked","label","ThemePreviewV9","props","root","threeCol"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/stories/ThemeShim/ThemePreviewV9.tsx"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport {\n  tokens,\n  Body1,\n  Title3,\n  TabList,\n  Tab,\n  Input,\n  Button,\n  Caption1,\n  Dropdown,\n  Option,\n  Slider,\n  Badge,\n  Switch,\n  Radio,\n  RadioGroup,\n  Checkbox,\n  Avatar,\n  useId,\n  Caption2,\n} from '@fluentui/react-components';\nimport {\n  SearchRegular,\n  bundleIcon,\n  ChevronRightRegular,\n  MeetNowRegular,\n  MeetNowFilled,\n  CalendarLtrFilled,\n  CalendarLtrRegular,\n} from '@fluentui/react-icons';\n\nexport interface ContentProps {\n  className?: string;\n}\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('16px'),\n  },\n  threeCol: {\n    display: 'grid',\n    alignItems: 'start',\n    justifyContent: 'center',\n    gridTemplateColumns: 'repeat(3, 1fr)',\n    gridTemplateRows: 'auto',\n    gridColumnGap: tokens.spacingHorizontalXXXL,\n  },\n  col1: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flexDirection: 'column',\n    ...shorthands.gap(tokens.spacingVerticalL),\n  },\n  col2: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingVerticalL),\n  },\n  col3: {\n    display: 'grid',\n    gridTemplateColumns: '1fr 1fr',\n    gridTemplateRows: 'repeat(4, auto)',\n    gridRowGap: tokens.spacingVerticalS,\n    gridColumnGap: tokens.spacingHorizontalS,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  twoCol: {\n    gridColumnStart: 1,\n    gridColumnEnd: 3,\n  },\n  controls: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icons: {\n    display: 'grid',\n    gridTemplateColumns: 'auto auto',\n    gridTemplateRows: 'auto auto',\n    gridRowGap: tokens.spacingVerticalS,\n    gridColumnGap: tokens.spacingHorizontalS,\n    justifyContent: 'center',\n  },\n  avatar: {\n    display: 'flex',\n    ...shorthands.gap(tokens.spacingVerticalL),\n  },\n  avatarText: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'left',\n  },\n});\n\nconst Column1 = () => {\n  const styles = useStyles();\n  return (\n    <div className={styles.col1}>\n      <Title3 block>Make an impression</Title3>\n      <Body1 block>\n        Make a big impression with this clean, modern, and mobile-friendly site. Use it to communicate information to\n        people inside or outside your team. Share your ideas, results, and more in this visually compelling format.\n      </Body1>\n      <div className={styles.avatar}>\n        <Avatar\n          color=\"brand\"\n          initials=\"CE\"\n          badge={{\n            status: 'available',\n            'aria-label': 'available',\n          }}\n        />\n        <div className={styles.avatarText}>\n          Cameron Evans\n          <Caption2>Senior Researcher at Contoso</Caption2>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst Column2 = () => {\n  const styles = useStyles();\n  const dropdownId = useId('dropdown-default');\n  return (\n    <div className={styles.col2}>\n      <TabList defaultSelectedValue=\"tab1\">\n        <Tab value=\"tab1\">Home</Tab>\n        <Tab value=\"tab2\">Pages</Tab>\n        <Tab value=\"tab3\">Documents</Tab>\n      </TabList>\n      <Input\n        placeholder=\"Find\"\n        contentAfter={<Button aria-label=\"Find\" appearance=\"transparent\" icon={<SearchRegular />} size=\"small\" />}\n      />\n      <Dropdown aria-labelledby={dropdownId} placeholder=\"Select\" inlinePopup>\n        <Option value=\"Action 1\">Action 1</Option>\n        <Option value=\"Action 2\">Action 2 </Option>\n        <Option value=\"Action 3\">Action 3</Option>\n      </Dropdown>\n    </div>\n  );\n};\n\nconst DemoIcons = () => {\n  const styles = useStyles();\n  const MeetNowIcon = bundleIcon(MeetNowFilled, MeetNowRegular);\n  const CalendarLtrIcon = bundleIcon(CalendarLtrFilled, CalendarLtrRegular);\n  return (\n    <div className={styles.icons}>\n      <Badge size=\"medium\" appearance=\"filled\" icon={<CalendarLtrIcon />} />\n      <Badge size=\"medium\" appearance=\"ghost\" icon={<CalendarLtrIcon />} />\n      <Badge size=\"medium\" appearance=\"outline\" icon={<MeetNowIcon />} />\n      <Badge size=\"medium\" appearance=\"tint\" icon={<MeetNowIcon />} />\n    </div>\n  );\n};\n\nconst Column3 = () => {\n  const styles = useStyles();\n  return (\n    <div className={styles.col3}>\n      <Button appearance=\"primary\">Sign Up</Button>\n      <Button appearance=\"transparent\" icon={<ChevronRightRegular />} iconPosition=\"after\">\n        Learn More\n      </Button>\n      <Slider className={styles.twoCol} defaultValue={50} />\n      <DemoIcons />\n      <div className={styles.controls}>\n        <Switch defaultChecked={true} label=\"On\" />\n        <Switch label=\"Off\" />\n      </div>\n      <div className={styles.controls}>\n        <Checkbox defaultChecked={true} label=\"Option 1\" />\n        <Checkbox label=\"Option 2\" />\n      </div>\n      <div className={styles.controls}>\n        <RadioGroup>\n          <Radio defaultChecked={true} label=\"Option 1\" />\n          <Radio label=\"Option 2\" />\n        </RadioGroup>\n      </div>\n    </div>\n  );\n};\n\nexport const ThemePreviewV9: React.FC<ContentProps> = props => {\n  const styles = useStyles();\n  return (\n    <div className={styles.root}>\n      <Caption1>Examples</Caption1>\n      <div className={mergeClasses(styles.threeCol, props.className)}>\n        <Column1 />\n        <Column2 />\n        <Column3 />\n      </div>\n    </div>\n  );\n};\n"]}

package/lib-commonjs/components/Button/ActionButtonShim.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAIA;AAEA;AAEA;;;AAGaA,wBAAgB,gBAEzBC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;EACnC,MAAMC,YAAY,GAAG;IACnB,GAAGF,KAAK;IACRG,gBAAgB,EAAE;GACnB;EAED,MAAMC,SAAS,GAAGC,iCAAe,CAACH,YAAY,CAAC;EAE/C,OAAOJ,oBAACQ,yBAAM;IAAA,GAAMN,KAAgD;IAAA,GAAMI,SAAS;IAAEG,UAAU,EAAC;EAAa,EAAG;AAClH,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","variantProps","variantClassName","shimProps","shimButtonProps_1","react_components_1","appearance"],"sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims a v8 ActionButton to render a v9 Button\n */\nexport const ActionButtonShim: React.ForwardRefExoticComponent<\n  IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const variantProps = {\n    ...props,\n    variantClassName: 'ms-Button--action ms-Button--command',\n  };\n\n  const shimProps = shimButtonProps(variantProps);\n\n  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance=\"transparent\" />;\n});\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAIA;AAEA;AAEA;;;AAGaA,wBAAgB,gBAEzBC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;EACnC,MAAMC,YAAY,GAAG;IACnB,GAAGF,KAAK;IACRG,gBAAgB,EAAE;GACnB;EAED,MAAMC,SAAS,GAAGC,iCAAe,CAACH,YAAY,CAAC;EAE/C,OAAOJ,oBAACQ,yBAAM;IAAA,GAAMN,KAAgD;IAAA,GAAMI,SAAS;IAAEG,UAAU,EAAC;EAAa,EAAG;AAClH,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","variantProps","variantClassName","shimProps","shimButtonProps_1","react_components_1","appearance"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/components/Button/ActionButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims a v8 ActionButton to render a v9 Button\n */\nexport const ActionButtonShim: React.ForwardRefExoticComponent<\n  IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const variantProps = {\n    ...props,\n    variantClassName: 'ms-Button--action ms-Button--command',\n  };\n\n  const shimProps = shimButtonProps(variantProps);\n\n  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance=\"transparent\" />;\n});\n"]}

package/lib-commonjs/components/Button/ButtonShim.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAIA;AAEA;AACA;AACA;AAEaA,kBAAU,gBAEnBC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;;EACnC,MAAMC,SAAS,GAAGC,iCAAe,CAACH,KAAK,CAAC;EAExC,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAON,oBAACO,mCAAgB;MAAA,GAAKL;IAAK,GAAGA,KAAK,CAACM,QAAQ,CAAoB;;EAEzE,IAAIN,KAAK,CAACO,aAAa,KAAI,WAAK,CAACC,mBAAmB,+CAAzBR,KAAK,EAAuBA,KAAK,CAAC,GAAE;IAC7D,OAAOF,oBAACW,uCAAkB;MAAA,GAAKT;IAAK,EAAI;;EAG1C,OAAOF,oBAACY,yBAAM;IAAA,GAAMV,KAAgD;IAAA,GAAME;EAAS,EAAI;AACzF,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","shimProps","shimButtonProps_1","toggle","ToggleButtonShim_1","children","secondaryText","onRenderDescription","CompoundButtonShim_1","react_components_1"],"sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Button/ButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IBaseButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\nimport { ToggleButtonShim } from './ToggleButtonShim';\nimport { CompoundButtonShim } from './CompoundButtonShim';\n\nexport const ButtonShim: React.ForwardRefExoticComponent<\n  IBaseButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const shimProps = shimButtonProps(props);\n\n  if (props.toggle) {\n    return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;\n  }\n  if (props.secondaryText || props.onRenderDescription?.(props)) {\n    return <CompoundButtonShim {...props} />;\n  }\n\n  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAIA;AAEA;AACA;AACA;AAEaA,kBAAU,gBAEnBC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;;EACnC,MAAMC,SAAS,GAAGC,iCAAe,CAACH,KAAK,CAAC;EAExC,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAON,oBAACO,mCAAgB;MAAA,GAAKL;IAAK,GAAGA,KAAK,CAACM,QAAQ,CAAoB;;EAEzE,IAAIN,KAAK,CAACO,aAAa,KAAI,WAAK,CAACC,mBAAmB,+CAAzBR,KAAK,EAAuBA,KAAK,CAAC,GAAE;IAC7D,OAAOF,oBAACW,uCAAkB;MAAA,GAAKT;IAAK,EAAI;;EAG1C,OAAOF,oBAACY,yBAAM;IAAA,GAAMV,KAAgD;IAAA,GAAME;EAAS,EAAI;AACzF,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","shimProps","shimButtonProps_1","toggle","ToggleButtonShim_1","children","secondaryText","onRenderDescription","CompoundButtonShim_1","react_components_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/components/Button/ButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IBaseButtonProps } from '@fluentui/react';\n\nimport { Button } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\nimport { ToggleButtonShim } from './ToggleButtonShim';\nimport { CompoundButtonShim } from './CompoundButtonShim';\n\nexport const ButtonShim: React.ForwardRefExoticComponent<\n  IBaseButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const shimProps = shimButtonProps(props);\n\n  if (props.toggle) {\n    return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;\n  }\n  if (props.secondaryText || props.onRenderDescription?.(props)) {\n    return <CompoundButtonShim {...props} />;\n  }\n\n  return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"]}

package/lib-commonjs/components/Button/CommandButtonShim.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;;;AAGA;AAASA;EAAAC;EAAAC;IAAA,0CAAgB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Button/CommandButtonShim.tsx"],"sourcesContent":["/**\n * Shims v8 CommandButtonShim to render a v9 Button\n */\nexport { ActionButtonShim as CommandButtonShim } from './ActionButtonShim';\n"]}
+{"version":3,"mappings":";;;;;;AAAA;;;AAGA;AAASA;EAAAC;EAAAC;IAAA,0CAAgB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/components/Button/CommandButtonShim.tsx"],"sourcesContent":["/**\n * Shims v8 CommandButtonShim to render a v9 Button\n */\nexport { ActionButtonShim as CommandButtonShim } from './ActionButtonShim';\n"]}

package/lib-commonjs/components/Button/CompoundButtonShim.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAIA;AAGA;AAEA;;;AAGaA,0BAAkB,gBAE3BC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;;EACnC,MAAMC,YAAY,GAAG;IACnB,GAAGF,KAAK;IACRG,gBAAgB,EAAEH,KAAK,CAACI,OAAO,GAAG,4BAA4B,GAAG;GAClE;EAED,MAAMC,SAAS,GAAwB;IACrC,GAAGC,iCAAe,CAACJ,YAAY,CAAC;IAChCK,gBAAgB,EAAEP,KAAK,CAACQ,aAAa,KAAI,WAAK,CAACC,mBAAmB,+CAAzBT,KAAK,EAAuBA,KAAK,CAAC;GAC5E;EAED,OAAOF,oBAACY,iCAAc;IAAA,GAAMV,KAAgD;IAAA,GAAMK;EAAS,EAAI;AACjG,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","variantProps","variantClassName","primary","shimProps","shimButtonProps_1","secondaryContent","secondaryText","onRenderDescription","react_components_1"],"sourceRoot":"../src/","sources":["packages/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { CompoundButton } from '@fluentui/react-components';\nimport type { CompoundButtonProps } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims v8 CompoundButton to render a v9 CompoundButton\n */\nexport const CompoundButtonShim: React.ForwardRefExoticComponent<\n  IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const variantProps = {\n    ...props,\n    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',\n  };\n\n  const shimProps: CompoundButtonProps = {\n    ...shimButtonProps(variantProps),\n    secondaryContent: props.secondaryText || props.onRenderDescription?.(props),\n  };\n\n  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAIA;AAGA;AAEA;;;AAGaA,0BAAkB,gBAE3BC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,IAAI,KAAI;;EACnC,MAAMC,YAAY,GAAG;IACnB,GAAGF,KAAK;IACRG,gBAAgB,EAAEH,KAAK,CAACI,OAAO,GAAG,4BAA4B,GAAG;GAClE;EAED,MAAMC,SAAS,GAAwB;IACrC,GAAGC,iCAAe,CAACJ,YAAY,CAAC;IAChCK,gBAAgB,EAAEP,KAAK,CAACQ,aAAa,KAAI,WAAK,CAACC,mBAAmB,+CAAzBT,KAAK,EAAuBA,KAAK,CAAC;GAC5E;EAED,OAAOF,oBAACY,iCAAc;IAAA,GAAMV,KAAgD;IAAA,GAAMK;EAAS,EAAI;AACjG,CAAC,CAAC","names":["exports","React","forwardRef","props","_ref","variantProps","variantClassName","primary","shimProps","shimButtonProps_1","secondaryContent","secondaryText","onRenderDescription","react_components_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-migration-v8-v9/src/components/Button/CompoundButtonShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { IButtonProps } from '@fluentui/react';\n\nimport { CompoundButton } from '@fluentui/react-components';\nimport type { CompoundButtonProps } from '@fluentui/react-components';\n\nimport { shimButtonProps } from './shimButtonProps';\n\n/**\n * Shims v8 CompoundButton to render a v9 CompoundButton\n */\nexport const CompoundButtonShim: React.ForwardRefExoticComponent<\n  IButtonProps & React.RefAttributes<HTMLButtonElement>\n> = React.forwardRef((props, _ref) => {\n  const variantProps = {\n    ...props,\n    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',\n  };\n\n  const shimProps: CompoundButtonProps = {\n    ...shimButtonProps(variantProps),\n    secondaryContent: props.secondaryText || props.onRenderDescription?.(props),\n  };\n\n  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;\n});\n"]}