@fluentui/react-migration-v8-v9 9.1.0 → 9.1.2

package/CHANGELOG.json

@@ -2,7 +2,51 @@
   "name": "@fluentui/react-migration-v8-v9",
   "entries": [
     {
-      "date": "Thu, 26 Jan 2023 13:27:47 GMT",
+      "date": "Tue, 07 Feb 2023 14:10:47 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-components to v9.14.0",
+            "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 Jan 2023 19:53:56 GMT",
+      "tag": "@fluentui/react-migration-v8-v9_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "none": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-migration-v8-v9",
+            "commit": "a864688a78bff922b8ba9accf77f69af41a58633",
+            "comment": "chore: import Dropdown and Option from react-components"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-components to v9.13.0",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-migration-v8-v9",
+            "comment": "Bump @fluentui/react-utilities to v9.5.1",
+            "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 13:30:57 GMT",
       "tag": "@fluentui/react-migration-v8-v9_v9.1.0",
       "version": "9.1.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Thu, 26 Jan 2023 13:27:47 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Feb 2023 14:10:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.1.2)
+
+Tue, 07 Feb 2023 14:10:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.1.1..@fluentui/react-migration-v8-v9_v9.1.2)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.14.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
+
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.1.1)
+
+Tue, 31 Jan 2023 19:53:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.1.0..@fluentui/react-migration-v8-v9_v9.1.1)
+
+### Patches
+
+- Bump @fluentui/react-components to v9.13.0 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.1.0)
 
-Thu, 26 Jan 2023 13:27:47 GMT
+Thu, 26 Jan 2023 13:30:57 GMT
 
 ### Minor changes
 

package/lib/stories/ThemeShim/ThemePreviewV9.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, Body1, Title3, TabList, Tab, Input, Button, Caption1, Slider, Badge, Switch, Radio, RadioGroup, Checkbox, Avatar, useId, Caption2 } from '@fluentui/react-components';
-import { Dropdown, Option } from '@fluentui/react-components/unstable';
+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: {

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","mergeClasses","shorthands","tokens","Body1","Title3","TabList","Tab","Input","Button","Caption1","Slider","Badge","Switch","Radio","RadioGroup","Checkbox","Avatar","useId","Caption2","Dropdown","Option","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  Slider,\n  Badge,\n  Switch,\n  Radio,\n  RadioGroup,\n  Checkbox,\n  Avatar,\n  useId,\n  Caption2,\n} from '@fluentui/react-components';\nimport { Dropdown, Option } from '@fluentui/react-components/unstable';\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"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SACEC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,GAAG,EACHC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,QAAQ,QACH,4BAA4B;AACnC,SACEC,aAAa,EACbC,UAAU,EACVC,mBAAmB,EACnBC,cAAc,EACdC,aAAa,EACbC,iBAAiB,EACjBC,kBAAkB,QACb,uBAAuB;AAM9B,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4DhB;AAEF,MAAMC,OAAO,GAAG,MAAK;EACnB,MAAMC,MAAM,GAAGF,SAAS,EAAE;EAC1B,oBACE7B;IAAKgC,SAAS,EAAED,MAAM,CAACE;EAAI,gBACzBjC,oBAACK,MAAM;IAAC6B,KAAK;EAAA,wBAA4B,eACzClC,oBAACI,KAAK;IAAC8B,KAAK;EAAA,+NAGJ,eACRlC;IAAKgC,SAAS,EAAED,MAAM,CAACI;EAAM,gBAC3BnC,oBAACmB,MAAM;IACLiB,KAAK,EAAC,OAAO;IACbC,QAAQ,EAAC,IAAI;IACbC,KAAK,EAAE;MACLC,MAAM,EAAE,WAAW;MACnB,YAAY,EAAE;;EACf,EACD,eACFvC;IAAKgC,SAAS,EAAED,MAAM,CAACS;EAAU,iCAE/BxC,oBAACqB,QAAQ,uCAAwC,CAC7C,CACF,CACF;AAEV,CAAC;AAED,MAAMoB,OAAO,GAAG,MAAK;EACnB,MAAMV,MAAM,GAAGF,SAAS,EAAE;EAC1B,MAAMa,UAAU,GAAGtB,KAAK,CAAC,kBAAkB,CAAC;EAC5C,oBACEpB;IAAKgC,SAAS,EAAED,MAAM,CAACY;EAAI,gBACzB3C,oBAACM,OAAO;IAACsC,oBAAoB,EAAC;EAAM,gBAClC5C,oBAACO,GAAG;IAACsC,KAAK,EAAC;EAAM,UAAW,eAC5B7C,oBAACO,GAAG;IAACsC,KAAK,EAAC;EAAM,WAAY,eAC7B7C,oBAACO,GAAG;IAACsC,KAAK,EAAC;EAAM,eAAgB,CACzB,eACV7C,oBAACQ,KAAK;IACJsC,WAAW,EAAC,MAAM;IAClBC,YAAY,eAAE/C,oBAACS,MAAM;MAAA,cAAY,MAAM;MAACuC,UAAU,EAAC,aAAa;MAACC,IAAI,eAAEjD,oBAACsB,aAAa,OAAG;MAAE4B,IAAI,EAAC;IAAO;EAAG,EACzG,eACFlD,oBAACW,QAAQ;IAAA,mBAAkB+B,UAAU;IAAEI,WAAW,EAAC,QAAQ;IAACK,WAAW;EAAA,gBACrEnD,oBAACY,MAAM;IAACiC,KAAK,EAAC;EAAU,cAAkB,eAC1C7C,oBAACY,MAAM;IAACiC,KAAK,EAAC;EAAU,eAAmB,eAC3C7C,oBAACY,MAAM;IAACiC,KAAK,EAAC;EAAU,cAAkB,CACjC,CACP;AAEV,CAAC;AAED,MAAMO,SAAS,GAAG,MAAK;EACrB,MAAMrB,MAAM,GAAGF,SAAS,EAAE;EAC1B,MAAMwB,WAAW,GAAG9B,UAAU,CAACG,aAAa,EAAED,cAAc,CAAC;EAC7D,MAAM6B,eAAe,GAAG/B,UAAU,CAACI,iBAAiB,EAAEC,kBAAkB,CAAC;EACzE,oBACE5B;IAAKgC,SAAS,EAAED,MAAM,CAACwB;EAAK,gBAC1BvD,oBAACc,KAAK;IAACoC,IAAI,EAAC,QAAQ;IAACF,UAAU,EAAC,QAAQ;IAACC,IAAI,eAAEjD,oBAACsD,eAAe;EAAG,EAAI,eACtEtD,oBAACc,KAAK;IAACoC,IAAI,EAAC,QAAQ;IAACF,UAAU,EAAC,OAAO;IAACC,IAAI,eAAEjD,oBAACsD,eAAe;EAAG,EAAI,eACrEtD,oBAACc,KAAK;IAACoC,IAAI,EAAC,QAAQ;IAACF,UAAU,EAAC,SAAS;IAACC,IAAI,eAAEjD,oBAACqD,WAAW;EAAG,EAAI,eACnErD,oBAACc,KAAK;IAACoC,IAAI,EAAC,QAAQ;IAACF,UAAU,EAAC,MAAM;IAACC,IAAI,eAAEjD,oBAACqD,WAAW;EAAG,EAAI,CAC5D;AAEV,CAAC;AAED,MAAMG,OAAO,GAAG,MAAK;EACnB,MAAMzB,MAAM,GAAGF,SAAS,EAAE;EAC1B,oBACE7B;IAAKgC,SAAS,EAAED,MAAM,CAAC0B;EAAI,gBACzBzD,oBAACS,MAAM;IAACuC,UAAU,EAAC;EAAS,aAAiB,eAC7ChD,oBAACS,MAAM;IAACuC,UAAU,EAAC,aAAa;IAACC,IAAI,eAAEjD,oBAACwB,mBAAmB,OAAG;IAAEkC,YAAY,EAAC;EAAO,gBAE3E,eACT1D,oBAACa,MAAM;IAACmB,SAAS,EAAED,MAAM,CAAC4B,MAAM;IAAEC,YAAY,EAAE;EAAE,EAAI,eACtD5D,oBAACoD,SAAS,OAAG,eACbpD;IAAKgC,SAAS,EAAED,MAAM,CAAC8B;EAAQ,gBAC7B7D,oBAACe,MAAM;IAAC+C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAI,EAAG,eAC3C/D,oBAACe,MAAM;IAACgD,KAAK,EAAC;EAAK,EAAG,CAClB,eACN/D;IAAKgC,SAAS,EAAED,MAAM,CAAC8B;EAAQ,gBAC7B7D,oBAACkB,QAAQ;IAAC4C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAU,EAAG,eACnD/D,oBAACkB,QAAQ;IAAC6C,KAAK,EAAC;EAAU,EAAG,CACzB,eACN/D;IAAKgC,SAAS,EAAED,MAAM,CAAC8B;EAAQ,gBAC7B7D,oBAACiB,UAAU,qBACTjB,oBAACgB,KAAK;IAAC8C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAU,EAAG,eAChD/D,oBAACgB,KAAK;IAAC+C,KAAK,EAAC;EAAU,EAAG,CACf,CACT,CACF;AAEV,CAAC;AAED,OAAO,MAAMC,cAAc,GAA2BC,KAAK,IAAG;EAC5D,MAAMlC,MAAM,GAAGF,SAAS,EAAE;EAC1B,oBACE7B;IAAKgC,SAAS,EAAED,MAAM,CAACmC;EAAI,gBACzBlE,oBAACU,QAAQ,mBAAoB,eAC7BV;IAAKgC,SAAS,EAAE/B,YAAY,CAAC8B,MAAM,CAACoC,QAAQ,EAAEF,KAAK,CAACjC,SAAS;EAAC,gBAC5DhC,oBAAC8B,OAAO,OAAG,eACX9B,oBAACyC,OAAO,OAAG,eACXzC,oBAACwD,OAAO,OAAG,CACP,CACF;AAEV,CAAC","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/stories/ThemeShim/ThemePreviewV9.js

@@ -7,7 +7,6 @@ exports.ThemePreviewV9 = void 0;
 const React = /*#__PURE__*/require("react");
 const react_1 = /*#__PURE__*/require("@griffel/react");
 const react_components_1 = /*#__PURE__*/require("@fluentui/react-components");
-const unstable_1 = /*#__PURE__*/require("@fluentui/react-components/unstable");
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
 const useStyles = /*#__PURE__*/react_1.makeStyles({
   root: {
@@ -112,15 +111,15 @@ const Column2 = () => {
       icon: React.createElement(react_icons_1.SearchRegular, null),
       size: "small"
     })
-  }), React.createElement(unstable_1.Dropdown, {
+  }), React.createElement(react_components_1.Dropdown, {
     "aria-labelledby": dropdownId,
     placeholder: "Select",
     inlinePopup: true
-  }, React.createElement(unstable_1.Option, {
+  }, React.createElement(react_components_1.Option, {
     value: "Action 1"
-  }, "Action 1"), React.createElement(unstable_1.Option, {
+  }, "Action 1"), React.createElement(react_components_1.Option, {
     value: "Action 2"
-  }, "Action 2 "), React.createElement(unstable_1.Option, {
+  }, "Action 2 "), React.createElement(react_components_1.Option, {
     value: "Action 3"
   }, "Action 3")));
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAmBA;AACA;AAcA,MAAMA,SAAS,gBAAGC,kBAAU,CAAC;EAC3BC,IAAI,EAAE;IACJ,iBAAGD,kBAAU,CAACE,OAAO,CAAC,MAAM;GAC7B;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,OAAO;IACnBC,cAAc,EAAE,QAAQ;IACxBC,mBAAmB,EAAE,gBAAgB;IACrCC,gBAAgB,EAAE,MAAM;IACxBC,aAAa,EAAEC,yBAAM,CAACC;GACvB;EACDC,IAAI,EAAE;IACJR,OAAO,EAAE,MAAM;IACfE,cAAc,EAAE,eAAe;IAC/BO,aAAa,EAAE,QAAQ;IACvB,iBAAGb,kBAAU,CAACc,GAAG,CAACJ,yBAAM,CAACK,gBAAgB;GAC1C;EACDC,IAAI,EAAE;IACJZ,OAAO,EAAE,MAAM;IACfS,aAAa,EAAE,QAAQ;IACvBR,UAAU,EAAE,QAAQ;IACpB,iBAAGL,kBAAU,CAACc,GAAG,CAACJ,yBAAM,CAACK,gBAAgB;GAC1C;EACDE,IAAI,EAAE;IACJb,OAAO,EAAE,MAAM;IACfG,mBAAmB,EAAE,SAAS;IAC9BC,gBAAgB,EAAE,iBAAiB;IACnCU,UAAU,EAAER,yBAAM,CAACS,gBAAgB;IACnCV,aAAa,EAAEC,yBAAM,CAACU,kBAAkB;IACxCd,cAAc,EAAE,QAAQ;IACxBD,UAAU,EAAE;GACb;EACDgB,MAAM,EAAE;IACNC,eAAe,EAAE,CAAC;IAClBC,aAAa,EAAE;GAChB;EACDC,QAAQ,EAAE;IACRpB,OAAO,EAAE,MAAM;IACfS,aAAa,EAAE,QAAQ;IACvBR,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;GACjB;EACDmB,KAAK,EAAE;IACLrB,OAAO,EAAE,MAAM;IACfG,mBAAmB,EAAE,WAAW;IAChCC,gBAAgB,EAAE,WAAW;IAC7BU,UAAU,EAAER,yBAAM,CAACS,gBAAgB;IACnCV,aAAa,EAAEC,yBAAM,CAACU,kBAAkB;IACxCd,cAAc,EAAE;GACjB;EACDoB,MAAM,EAAE;IACNtB,OAAO,EAAE,MAAM;IACf,iBAAGJ,kBAAU,CAACc,GAAG,CAACJ,yBAAM,CAACK,gBAAgB;GAC1C;EACDY,UAAU,EAAE;IACVvB,OAAO,EAAE,MAAM;IACfS,aAAa,EAAE,QAAQ;IACvBP,cAAc,EAAE;;CAEnB,CAAC;AAEF,MAAMsB,OAAO,GAAG,MAAK;EACnB,MAAMC,MAAM,GAAG9B,SAAS,EAAE;EAC1B,OACE+B;IAAKC,SAAS,EAAEF,MAAM,CAACjB;EAAI,GACzBkB,oBAACpB,yBAAM;IAACsB,KAAK;EAAA,wBAA4B,EACzCF,oBAACpB,wBAAK;IAACsB,KAAK;EAAA,+NAGJ,EACRF;IAAKC,SAAS,EAAEF,MAAM,CAACH;EAAM,GAC3BI,oBAACpB,yBAAM;IACLuB,KAAK,EAAC,OAAO;IACbC,QAAQ,EAAC,IAAI;IACbC,KAAK,EAAE;MACLC,MAAM,EAAE,WAAW;MACnB,YAAY,EAAE;;EACf,EACD,EACFN;IAAKC,SAAS,EAAEF,MAAM,CAACF;EAAU,oBAE/BG,oBAACpB,2BAAQ,uCAAwC,CAC7C,CACF,CACF;AAEV,CAAC;AAED,MAAM2B,OAAO,GAAG,MAAK;EACnB,MAAMR,MAAM,GAAG9B,SAAS,EAAE;EAC1B,MAAMuC,UAAU,GAAG5B,wBAAK,CAAC,kBAAkB,CAAC;EAC5C,OACEoB;IAAKC,SAAS,EAAEF,MAAM,CAACb;EAAI,GACzBc,oBAACpB,0BAAO;IAAC6B,oBAAoB,EAAC;EAAM,GAClCT,oBAACpB,sBAAG;IAAC8B,KAAK,EAAC;EAAM,UAAW,EAC5BV,oBAACpB,sBAAG;IAAC8B,KAAK,EAAC;EAAM,WAAY,EAC7BV,oBAACpB,sBAAG;IAAC8B,KAAK,EAAC;EAAM,eAAgB,CACzB,EACVV,oBAACpB,wBAAK;IACJ+B,WAAW,EAAC,MAAM;IAClBC,YAAY,EAAEZ,oBAACpB,yBAAM;MAAA,cAAY,MAAM;MAACiC,UAAU,EAAC,aAAa;MAACC,IAAI,EAAEd,oBAACe,2BAAa,OAAG;MAAEC,IAAI,EAAC;IAAO;EAAG,EACzG,EACFhB,oBAACiB,mBAAQ;IAAA,mBAAkBT,UAAU;IAAEG,WAAW,EAAC,QAAQ;IAACO,WAAW;EAAA,GACrElB,oBAACiB,iBAAM;IAACP,KAAK,EAAC;EAAU,cAAkB,EAC1CV,oBAACiB,iBAAM;IAACP,KAAK,EAAC;EAAU,eAAmB,EAC3CV,oBAACiB,iBAAM;IAACP,KAAK,EAAC;EAAU,cAAkB,CACjC,CACP;AAEV,CAAC;AAED,MAAMS,SAAS,GAAG,MAAK;EACrB,MAAMpB,MAAM,GAAG9B,SAAS,EAAE;EAC1B,MAAMmD,WAAW,GAAGL,wBAAU,CAACA,2BAAa,EAAEA,4BAAc,CAAC;EAC7D,MAAMM,eAAe,GAAGN,wBAAU,CAACA,+BAAiB,EAAEA,gCAAkB,CAAC;EACzE,OACEf;IAAKC,SAAS,EAAEF,MAAM,CAACJ;EAAK,GAC1BK,oBAACpB,wBAAK;IAACoC,IAAI,EAAC,QAAQ;IAACH,UAAU,EAAC,QAAQ;IAACC,IAAI,EAAEd,oBAACqB,eAAe;EAAG,EAAI,EACtErB,oBAACpB,wBAAK;IAACoC,IAAI,EAAC,QAAQ;IAACH,UAAU,EAAC,OAAO;IAACC,IAAI,EAAEd,oBAACqB,eAAe;EAAG,EAAI,EACrErB,oBAACpB,wBAAK;IAACoC,IAAI,EAAC,QAAQ;IAACH,UAAU,EAAC,SAAS;IAACC,IAAI,EAAEd,oBAACoB,WAAW;EAAG,EAAI,EACnEpB,oBAACpB,wBAAK;IAACoC,IAAI,EAAC,QAAQ;IAACH,UAAU,EAAC,MAAM;IAACC,IAAI,EAAEd,oBAACoB,WAAW;EAAG,EAAI,CAC5D;AAEV,CAAC;AAED,MAAME,OAAO,GAAG,MAAK;EACnB,MAAMvB,MAAM,GAAG9B,SAAS,EAAE;EAC1B,OACE+B;IAAKC,SAAS,EAAEF,MAAM,CAACZ;EAAI,GACzBa,oBAACpB,yBAAM;IAACiC,UAAU,EAAC;EAAS,aAAiB,EAC7Cb,oBAACpB,yBAAM;IAACiC,UAAU,EAAC,aAAa;IAACC,IAAI,EAAEd,oBAACe,iCAAmB,OAAG;IAAEQ,YAAY,EAAC;EAAO,gBAE3E,EACTvB,oBAACpB,yBAAM;IAACqB,SAAS,EAAEF,MAAM,CAACR,MAAM;IAAEiC,YAAY,EAAE;EAAE,EAAI,EACtDxB,oBAACmB,SAAS,OAAG,EACbnB;IAAKC,SAAS,EAAEF,MAAM,CAACL;EAAQ,GAC7BM,oBAACpB,yBAAM;IAAC6C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAI,EAAG,EAC3C1B,oBAACpB,yBAAM;IAAC8C,KAAK,EAAC;EAAK,EAAG,CAClB,EACN1B;IAAKC,SAAS,EAAEF,MAAM,CAACL;EAAQ,GAC7BM,oBAACpB,2BAAQ;IAAC6C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAU,EAAG,EACnD1B,oBAACpB,2BAAQ;IAAC8C,KAAK,EAAC;EAAU,EAAG,CACzB,EACN1B;IAAKC,SAAS,EAAEF,MAAM,CAACL;EAAQ,GAC7BM,oBAACpB,6BAAU,QACToB,oBAACpB,wBAAK;IAAC6C,cAAc,EAAE,IAAI;IAAEC,KAAK,EAAC;EAAU,EAAG,EAChD1B,oBAACpB,wBAAK;IAAC8C,KAAK,EAAC;EAAU,EAAG,CACf,CACT,CACF;AAEV,CAAC;AAEM,MAAMC,cAAc,GAA2BC,KAAK,IAAG;EAC5D,MAAM7B,MAAM,GAAG9B,SAAS,EAAE;EAC1B,OACE+B;IAAKC,SAAS,EAAEF,MAAM,CAAC5B;EAAI,GACzB6B,oBAACpB,2BAAQ,mBAAoB,EAC7BoB;IAAKC,SAAS,EAAE/B,oBAAY,CAAC6B,MAAM,CAAC1B,QAAQ,EAAEuD,KAAK,CAAC3B,SAAS;EAAC,GAC5DD,oBAACF,OAAO,OAAG,EACXE,oBAACO,OAAO,OAAG,EACXP,oBAACsB,OAAO,OAAG,CACP,CACF;AAEV,CAAC;AAZYO,sBAAc","names":["useStyles","react_1","root","padding","threeCol","display","alignItems","justifyContent","gridTemplateColumns","gridTemplateRows","gridColumnGap","react_components_1","spacingHorizontalXXXL","col1","flexDirection","gap","spacingVerticalL","col2","col3","gridRowGap","spacingVerticalS","spacingHorizontalS","twoCol","gridColumnStart","gridColumnEnd","controls","icons","avatar","avatarText","Column1","styles","React","className","block","color","initials","badge","status","Column2","dropdownId","defaultSelectedValue","value","placeholder","contentAfter","appearance","icon","react_icons_1","size","unstable_1","inlinePopup","DemoIcons","MeetNowIcon","CalendarLtrIcon","Column3","iconPosition","defaultValue","defaultChecked","label","ThemePreviewV9","props","exports"],"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  Slider,\n  Badge,\n  Switch,\n  Radio,\n  RadioGroup,\n  Checkbox,\n  Avatar,\n  useId,\n  Caption2,\n} from '@fluentui/react-components';\nimport { Dropdown, Option } from '@fluentui/react-components/unstable';\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"]}
+{"version":3,"mappings":"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","names":["useStyles","react_1","root","padding","threeCol","display","alignItems","justifyContent","gridTemplateColumns","gridTemplateRows","gridColumnGap","react_components_1","spacingHorizontalXXXL","col1","flexDirection","gap","spacingVerticalL","col2","col3","gridRowGap","spacingVerticalS","spacingHorizontalS","twoCol","gridColumnStart","gridColumnEnd","controls","icons","avatar","avatarText","Column1","styles","React","className","block","color","initials","badge","status","Column2","dropdownId","defaultSelectedValue","value","placeholder","contentAfter","appearance","icon","react_icons_1","size","inlinePopup","DemoIcons","MeetNowIcon","CalendarLtrIcon","Column3","iconPosition","defaultValue","defaultChecked","label","ThemePreviewV9","props","exports"],"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,12 +32,12 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "3.3.4",
-    "@fluentui/fluent2-theme": "^8.104.12",
-    "@fluentui/react": "^8.104.7",
-    "@fluentui/react-components": "^9.12.0",
+    "@fluentui/fluent2-theme": "^8.104.19",
+    "@fluentui/react": "^8.105.5",
+    "@fluentui/react-components": "^9.14.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.0",
+    "@fluentui/react-utilities": "^9.5.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },