@fluentui/react-toolbar 9.0.0-beta.12 → 9.0.0-beta.14

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle';\n    name: string;\n    value: string;\n  };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}
+{"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle';\n    name: string;\n    value: string;\n  };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}

package/lib/components/ToolbarToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,kBAAT,QAAmC,sBAAnC","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,kBAAT,QAAmC,sBAAnC","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/Toolbar.cy.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const React = /*#__PURE__*/require("react");
+
+const react_1 = /*#__PURE__*/require("@cypress/react");
+
+const react_provider_1 = /*#__PURE__*/require("@fluentui/react-provider");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const Toolbar_1 = /*#__PURE__*/require("../Toolbar");
+
+const ToolbarButton_1 = /*#__PURE__*/require("../ToolbarButton");
+
+const ToolbarToggleButton_1 = /*#__PURE__*/require("../ToolbarToggleButton");
+
+const ToolbarRadioButton_1 = /*#__PURE__*/require("../ToolbarRadioButton");
+
+const button = "[type='button']";
+
+const mount = element => {
+  react_1.mount(React.createElement(react_provider_1.FluentProvider, {
+    theme: react_theme_1.teamsLightTheme
+  }, element));
+};
+
+describe('Toolbar', () => {
+  describe('Navigation', () => {
+    it('should navigate with arrows', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarButton_1.ToolbarButton, null, "First"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Second"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Third"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Fourth")));
+      cy.get(button).eq(0).focus().get(button).eq(0).should('be.focused') // Navigate with right arrow to the right
+      .type('{rightArrow}').get(button).eq(1).should('be.focused') // Navigate with down arrow to the right
+      .type('{downArrow}').get(button).eq(2).should('be.focused') // Navigate with up arrow to the right
+      .type('{upArrow}').get(button).eq(1).should('be.focused') // Navigate with left arrow to the right
+      .type('{leftArrow}').get(button).eq(0).should('be.focused');
+    });
+    it('should have circular navigation', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarButton_1.ToolbarButton, null, "First"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Second"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Third"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Fourth")));
+      cy.get(button).eq(3).focus().get(button).eq(3).should('be.focused') // Navigate from last to first
+      .type('{rightArrow}').get(button).eq(0).should('be.focused') // Navigate from first to last
+      .type('{leftArrow}').get(button).eq(3).should('be.focused');
+    });
+  });
+  describe('Toggle Button', () => {
+    it('should toggle button state on click', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarToggleButton_1.ToolbarToggleButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+    it('should set default checked values', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, React.createElement(ToolbarToggleButton_1.ToolbarToggleButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+  });
+  describe('Radio Button', () => {
+    it('should toggle button state on click', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+    it('should set default checked values', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+    it('should check new value and uncheck previously checked', () => {
+      mount(React.createElement(Toolbar_1.Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First"), React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
+        name: "group",
+        value: "second"
+      }, "Second")));
+      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true').get(button).eq(1).click().get(button).eq(1).should('have.attr', 'aria-pressed', 'true').get(button).eq(0).should('have.attr', 'aria-pressed', 'false');
+    });
+  });
+});
+//# sourceMappingURL=Toolbar.cy.js.map

package/lib-commonjs/components/Toolbar/Toolbar.cy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.cy.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mount as mountBase } from '@cypress/react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { teamsLightTheme } from '@fluentui/react-theme';\n\nimport { Toolbar } from '../Toolbar';\nimport { ToolbarButton } from '../ToolbarButton';\nimport { ToolbarToggleButton } from '../ToolbarToggleButton';\nimport { ToolbarRadioButton } from '../ToolbarRadioButton';\n\nconst button = \"[type='button']\";\n\nconst mount = (element: JSX.Element) => {\n  mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);\n};\n\ndescribe('Toolbar', () => {\n  describe('Navigation', () => {\n    it('should navigate with arrows', () => {\n      mount(\n        <Toolbar>\n          <ToolbarButton>First</ToolbarButton>\n          <ToolbarButton>Second</ToolbarButton>\n          <ToolbarButton>Third</ToolbarButton>\n          <ToolbarButton>Fourth</ToolbarButton>\n        </Toolbar>,\n      );\n\n      cy.get(button)\n        .eq(0)\n        .focus()\n        .get(button)\n        .eq(0)\n        .should('be.focused')\n        // Navigate with right arrow to the right\n        .type('{rightArrow}')\n        .get(button)\n        .eq(1)\n        .should('be.focused')\n        // Navigate with down arrow to the right\n        .type('{downArrow}')\n        .get(button)\n        .eq(2)\n        .should('be.focused')\n        // Navigate with up arrow to the right\n        .type('{upArrow}')\n        .get(button)\n        .eq(1)\n        .should('be.focused')\n        // Navigate with left arrow to the right\n        .type('{leftArrow}')\n        .get(button)\n        .eq(0)\n        .should('be.focused');\n    });\n\n    it('should have circular navigation', () => {\n      mount(\n        <Toolbar>\n          <ToolbarButton>First</ToolbarButton>\n          <ToolbarButton>Second</ToolbarButton>\n          <ToolbarButton>Third</ToolbarButton>\n          <ToolbarButton>Fourth</ToolbarButton>\n        </Toolbar>,\n      );\n\n      cy.get(button)\n        .eq(3)\n        .focus()\n        .get(button)\n        .eq(3)\n        .should('be.focused')\n        // Navigate from last to first\n        .type('{rightArrow}')\n        .get(button)\n        .eq(0)\n        .should('be.focused')\n        // Navigate from first to last\n        .type('{leftArrow}')\n        .get(button)\n        .eq(3)\n        .should('be.focused');\n    });\n  });\n\n  describe('Toggle Button', () => {\n    it('should toggle button state on click', () => {\n      mount(\n        <Toolbar>\n          <ToolbarToggleButton name=\"group\" value=\"first\">\n            First\n          </ToolbarToggleButton>\n        </Toolbar>,\n      );\n\n      cy.get(button)\n        .eq(0)\n        .focus()\n        .get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'false')\n        .get(button)\n        .eq(0)\n        .click()\n        .get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'true');\n    });\n\n    it('should set default checked values', () => {\n      mount(\n        <Toolbar\n          defaultCheckedValues={{\n            group: ['first'],\n          }}\n        >\n          <ToolbarToggleButton name=\"group\" value=\"first\">\n            First\n          </ToolbarToggleButton>\n        </Toolbar>,\n      );\n\n      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n    });\n  });\n\n  describe('Radio Button', () => {\n    it('should toggle button state on click', () => {\n      mount(\n        <Toolbar>\n          <ToolbarRadioButton name=\"group\" value=\"first\">\n            First\n          </ToolbarRadioButton>\n        </Toolbar>,\n      );\n\n      cy.get(button)\n        .eq(0)\n        .focus()\n        .get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'false')\n        .get(button)\n        .eq(0)\n        .click()\n        .get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'true');\n    });\n\n    it('should set default checked values', () => {\n      mount(\n        <Toolbar\n          defaultCheckedValues={{\n            group: ['first'],\n          }}\n        >\n          <ToolbarRadioButton name=\"group\" value=\"first\">\n            First\n          </ToolbarRadioButton>\n        </Toolbar>,\n      );\n\n      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n    });\n\n    it('should check new value and uncheck previously checked', () => {\n      mount(\n        <Toolbar\n          defaultCheckedValues={{\n            group: ['first'],\n          }}\n        >\n          <ToolbarRadioButton name=\"group\" value=\"first\">\n            First\n          </ToolbarRadioButton>\n          <ToolbarRadioButton name=\"group\" value=\"second\">\n            Second\n          </ToolbarRadioButton>\n        </Toolbar>,\n      );\n\n      cy.get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'true')\n        .get(button)\n        .eq(1)\n        .click()\n        .get(button)\n        .eq(1)\n        .should('have.attr', 'aria-pressed', 'true')\n        .get(button)\n        .eq(0)\n        .should('have.attr', 'aria-pressed', 'false');\n    });\n  });\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/ToolbarContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/renderToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/useToolbar.js

@@ -28,7 +28,7 @@ const useToolbar_unstable = (props, ref) => {
   } = props;
   const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
     circular: true,
-    axis: 'horizontal'
+    axis: 'both'
   });
   const initialState = {
     size,
@@ -73,7 +73,7 @@ const useToolbar_unstable = (props, ref) => {
     if (name && value) {
       onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
         name,
-        checkedItems: checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]
+        checkedItems: [value]
       });
     }
   });

package/lib-commonjs/components/Toolbar/useToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: checkedValues?.[name],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/useToolbarStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarButton/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n  const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n  useButtonStyles_unstable(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n  const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n  useButtonStyles_unstable(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n  useToolbarDividerStyles_unstable(state);\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarDivider_unstable(props, ref);\n  useToolbarDividerStyles_unstable(state);\n  return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n  props: ToolbarDividerProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  root: {\n    display: 'inline-flex',\n    maxWidth: '1px',\n  },\n  vertical: {\n    maxWidth: 'initial',\n  },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n  useDividerStyles_unstable(state);\n  const { vertical } = state;\n  const toolbarDividerStyles = useBaseStyles();\n  state.root.className = mergeClasses(\n    state.root.className,\n    toolbarDividerStyles.root,\n    !vertical && toolbarDividerStyles.vertical,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarRadioButton/ToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarRadioButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarRadioButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -39,9 +39,6 @@ const useToolbarRadioButton_unstable = (props, ref) => {
     value: props.value
   };
   const handleOnClick = react_utilities_1.useEventCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
     handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
     onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
   });

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,WAAtC,CAApB;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CACnB,CAAD,IAAyG;IACvG,CAAC,CAAC,cAAF;IACA,CAAC,CAAC,eAAF;IACA;IAEA,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CARmB,CAAtB;EAWA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,WAAtC,CAApB;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CACnB,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmB,CAAtB;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAGF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;;AAET,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AAAgB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;;AAEzB,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,qBAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAET,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,oBAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAGF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;;AAET,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AAAgB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;;AAEzB,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,qBAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAET,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,oBAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.0.0-beta.12",
+  "version": "9.0.0-beta.14",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -21,25 +21,24 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-toolbar/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.7",
-    "@fluentui/react-divider": "^9.1.3",
-    "@fluentui/react-theme": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.0",
-    "@fluentui/react-context-selector": "^9.1.0",
-    "@fluentui/react-radio": "^9.0.10",
-    "@fluentui/react-tabster": "^9.2.1",
+    "@fluentui/react-button": "^9.1.9",
+    "@fluentui/react-divider": "^9.1.5",
+    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-context-selector": "^9.1.2",
+    "@fluentui/react-radio": "^9.0.12",
+    "@fluentui/react-tabster": "^9.3.1",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },
@@ -55,5 +54,13 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }