@fluentui/react-carousel 9.9.6 → 9.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/CHANGELOG.md +33 -2
  2. package/dist/index.d.ts +8 -8
  3. package/lib/components/Carousel/useCarouselStyles.styles.js +1 -0
  4. package/lib/components/Carousel/useCarouselStyles.styles.js.map +1 -1
  5. package/lib/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
  6. package/lib/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
  7. package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js +3 -1
  8. package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
  9. package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +2 -0
  10. package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
  11. package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +2 -0
  12. package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
  13. package/lib/components/CarouselButton/CarouselButton.types.js.map +1 -1
  14. package/lib/components/CarouselButton/useCarouselButton.js +1 -0
  15. package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
  16. package/lib/components/CarouselCard/useCarouselCard.js +3 -0
  17. package/lib/components/CarouselCard/useCarouselCard.js.map +1 -1
  18. package/lib/components/CarouselCard/useCarouselCardStyles.styles.js +1 -0
  19. package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
  20. package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
  21. package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
  22. package/lib/components/CarouselContext.js.map +1 -1
  23. package/lib/components/CarouselContext.types.js +3 -1
  24. package/lib/components/CarouselContext.types.js.map +1 -1
  25. package/lib/components/CarouselNav/CarouselNav.js +1 -1
  26. package/lib/components/CarouselNav/CarouselNav.js.map +1 -1
  27. package/lib/components/CarouselNav/CarouselNav.types.js +1 -1
  28. package/lib/components/CarouselNav/CarouselNav.types.js.map +1 -1
  29. package/lib/components/CarouselNav/CarouselNavContext.js +0 -11
  30. package/lib/components/CarouselNav/CarouselNavContext.js.map +1 -1
  31. package/lib/components/CarouselNav/useCarouselNav.js +0 -1
  32. package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
  33. package/lib/components/CarouselNav/useCarouselNavContextValues.js +13 -0
  34. package/lib/components/CarouselNav/useCarouselNavContextValues.js.map +1 -0
  35. package/lib/components/CarouselNav/useCarouselNavStyles.styles.js +1 -0
  36. package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
  37. package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
  38. package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
  39. package/lib/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
  40. package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +1 -0
  41. package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
  42. package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
  43. package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
  44. package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
  45. package/lib/components/CarouselNavContainer/useCarouselNavContainer.js +0 -1
  46. package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
  47. package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +4 -0
  48. package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
  49. package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +4 -0
  50. package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
  51. package/lib/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
  52. package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -0
  53. package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
  54. package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +2 -0
  55. package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
  56. package/lib/components/CarouselSlider/CarouselSlider.js +1 -1
  57. package/lib/components/CarouselSlider/CarouselSlider.js.map +1 -1
  58. package/lib/components/CarouselSlider/CarouselSliderContext.js +0 -11
  59. package/lib/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
  60. package/lib/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
  61. package/lib/components/CarouselSlider/useCarouselSlider.js +0 -1
  62. package/lib/components/CarouselSlider/useCarouselSlider.js.map +1 -1
  63. package/lib/components/CarouselSlider/useCarouselSliderContextValues.js +13 -0
  64. package/lib/components/CarouselSlider/useCarouselSliderContextValues.js.map +1 -0
  65. package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js +1 -0
  66. package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
  67. package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
  68. package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
  69. package/lib/components/CarouselViewport/CarouselViewport.js +1 -1
  70. package/lib/components/CarouselViewport/CarouselViewport.js.map +1 -1
  71. package/lib/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
  72. package/lib/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
  73. package/lib/components/CarouselViewport/useCarouselViewport.js +4 -0
  74. package/lib/components/CarouselViewport/useCarouselViewport.js.map +1 -1
  75. package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -0
  76. package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
  77. package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
  78. package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
  79. package/lib/components/useEmblaCarousel.js +1 -0
  80. package/lib/components/useEmblaCarousel.js.map +1 -1
  81. package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js +1 -0
  82. package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map +1 -1
  83. package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
  84. package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
  85. package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js +3 -3
  86. package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
  87. package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +2 -0
  88. package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
  89. package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +2 -0
  90. package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
  91. package/lib-commonjs/components/CarouselButton/CarouselButton.types.js.map +1 -1
  92. package/lib-commonjs/components/CarouselButton/useCarouselButton.js +1 -0
  93. package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
  94. package/lib-commonjs/components/CarouselCard/useCarouselCard.js +3 -0
  95. package/lib-commonjs/components/CarouselCard/useCarouselCard.js.map +1 -1
  96. package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js +1 -0
  97. package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
  98. package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
  99. package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
  100. package/lib-commonjs/components/CarouselContext.js.map +1 -1
  101. package/lib-commonjs/components/CarouselContext.types.js +3 -3
  102. package/lib-commonjs/components/CarouselContext.types.js.map +1 -1
  103. package/lib-commonjs/components/CarouselNav/CarouselNav.js +2 -2
  104. package/lib-commonjs/components/CarouselNav/CarouselNav.js.map +1 -1
  105. package/lib-commonjs/components/CarouselNav/CarouselNav.types.js +0 -2
  106. package/lib-commonjs/components/CarouselNav/CarouselNav.types.js.map +1 -1
  107. package/lib-commonjs/components/CarouselNav/CarouselNavContext.js +0 -14
  108. package/lib-commonjs/components/CarouselNav/CarouselNavContext.js.map +1 -1
  109. package/lib-commonjs/components/CarouselNav/useCarouselNav.js +0 -2
  110. package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map +1 -1
  111. package/lib-commonjs/components/CarouselNav/useCarouselNavContextValues.js +24 -0
  112. package/lib-commonjs/components/CarouselNav/useCarouselNavContextValues.js.map +1 -0
  113. package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js +1 -0
  114. package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
  115. package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
  116. package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
  117. package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
  118. package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +1 -0
  119. package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
  120. package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
  121. package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
  122. package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
  123. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js +0 -2
  124. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
  125. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +4 -0
  126. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
  127. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +4 -0
  128. package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
  129. package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
  130. package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -0
  131. package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
  132. package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +2 -0
  133. package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
  134. package/lib-commonjs/components/CarouselSlider/CarouselSlider.js +2 -2
  135. package/lib-commonjs/components/CarouselSlider/CarouselSlider.js.map +1 -1
  136. package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js +0 -14
  137. package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
  138. package/lib-commonjs/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
  139. package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js +0 -2
  140. package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js.map +1 -1
  141. package/lib-commonjs/components/CarouselSlider/useCarouselSliderContextValues.js +24 -0
  142. package/lib-commonjs/components/CarouselSlider/useCarouselSliderContextValues.js.map +1 -0
  143. package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js +1 -0
  144. package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
  145. package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
  146. package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
  147. package/lib-commonjs/components/CarouselViewport/CarouselViewport.js +2 -2
  148. package/lib-commonjs/components/CarouselViewport/CarouselViewport.js.map +1 -1
  149. package/lib-commonjs/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
  150. package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
  151. package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js +4 -0
  152. package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js.map +1 -1
  153. package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -0
  154. package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
  155. package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
  156. package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
  157. package/lib-commonjs/components/useEmblaCarousel.js +1 -0
  158. package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
  159. package/package.json +8 -8
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './CarouselNavContext';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;oCAGsB,uBAAuB;mCACjC,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,wDAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './useCarouselNavContextValues';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;6CAGsB,gCAAgC;mCAC1C,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,iEAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
@@ -2,5 +2,3 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
6
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":""}
@@ -18,9 +18,6 @@ _export(exports, {
18
18
  },
19
19
  useCarouselNavContext: function() {
20
20
  return useCarouselNavContext;
21
- },
22
- useCarouselNavContextValues_unstable: function() {
23
- return useCarouselNavContextValues_unstable;
24
21
  }
25
22
  });
26
23
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -34,14 +31,3 @@ const useCarouselNavContext = ()=>{
34
31
  return (_React_useContext = _react.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
35
32
  };
36
33
  const CarouselNavContextProvider = carouselNavContext.Provider;
37
- function useCarouselNavContextValues_unstable(state) {
38
- const { appearance } = state;
39
- const carouselNav = _react.useMemo(()=>({
40
- appearance
41
- }), [
42
- appearance
43
- ]);
44
- return {
45
- carouselNav
46
- };
47
- }
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n carouselNav: CarouselNavContextValue;\n};\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n const { appearance } = state;\n const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n return { carouselNav };\n}\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider","useCarouselNavContextValues_unstable","state","carouselNav","useMemo"],"mappings":"AAAA;;;;;;;;;;;;IAcaQ,0BAAAA;;;kCAPAJ;;;yBAIAE;;;wCAYGI;;;;;iEArBO,QAAQ;AAG/B,MAAMT,mCAAqBD,OAAME,aAAa,CAAsCC;AAE7E,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEK,MAAMG,wBAAwB;QACnCN;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,mBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAwCI;EAA+B;AAElE,mCAAmCH,mBAAmBQ,QAAQ,CAAC;AAS/D,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEN,UAAU,EAAE,GAAGM;IACvB,MAAMC,cAAcZ,OAAMa,OAAO,CAAC,IAAO,CAAA;YAAER;SAAW,CAAA,EAAI;QAACA;KAAW;IAEtE,OAAO;QAAEO;IAAY;AACvB"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n carouselNav: CarouselNavContextValue;\n};\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;8BAcaQ;;;kCAPAJ;;;yBAIAE;eAAAA;;;;iEATU,QAAQ;AAG/B,MAAML,mCAAqBD,OAAME,aAAa,CAAsCC;AAE7E,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEK,8BAA8B;QACnCH;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,mBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAwCI;EAA+B;AAElE,MAAMI,6BAA6BP,mBAAmBQ,QAAQ,CAAC"}
@@ -9,10 +9,8 @@ Object.defineProperty(exports, "useCarouselNav_unstable", {
9
9
  return useCarouselNav_unstable;
10
10
  }
11
11
  });
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
12
  const _reacttabster = require("@fluentui/react-tabster");
14
13
  const _reactutilities = require("@fluentui/react-utilities");
15
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
16
14
  const _CarouselContext = require("../CarouselContext");
17
15
  const useCarouselNav_unstable = (props, ref)=>{
18
16
  const { appearance } = props;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaQ;;;;;;;8BAjB2B,0BAA0B;gCACQ,4BAA4B;iEAC/E,QAAQ;iCAEmC,qBAAqB;AAahF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,yBAAqBZ,qCAAAA,EAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,OAAGX,oCAAAA,EAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,yBAAqBf,4CAAAA,EAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,6CAAAA,EAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,oBAAAA,CAAK2B,MAAM,KACf5B,wCAAAA,EAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;8BAjB2B,0BAA0B;gCACQ,4BAA4B;iCAGpC,qBAAqB;AAahF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,yBAAqBX,qCAAAA,EAAwB;QACjDY,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,OAAGX,oCAAAA,EAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,yBAAqBf,4CAAAA,EAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;QAE3EjB,yCAAAA,EAA0B;QACxB,OAAOiB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,OAAO;YAC9BQ;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
@@ -0,0 +1,24 @@
1
+ 'use client';
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useCarouselNavContextValues_unstable", {
7
+ enumerable: true,
8
+ get: function() {
9
+ return useCarouselNavContextValues_unstable;
10
+ }
11
+ });
12
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ function useCarouselNavContextValues_unstable(state) {
15
+ const { appearance } = state;
16
+ const carouselNav = _react.useMemo(()=>({
17
+ appearance
18
+ }), [
19
+ appearance
20
+ ]);
21
+ return {
22
+ carouselNav
23
+ };
24
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNavContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValues } from './CarouselNavContext';\nimport type { CarouselNavState } from './CarouselNav.types';\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n const { appearance } = state;\n const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n return { carouselNav };\n}\n"],"names":["React","useCarouselNavContextValues_unstable","state","appearance","carouselNav","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEC,UAAU,EAAE,GAAGD;IACvB,MAAME,cAAcJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAW,CAAA,EAAI;QAACA;KAAW;IAEtE,OAAO;QAAEC;IAAY;AACvB"}
@@ -102,6 +102,7 @@ const carouselNavClassNames = {
102
102
  const useCarouselNavStyles_unstable = (state)=>{
103
103
  'use no memo';
104
104
  const styles = useStyles();
105
+ // eslint-disable-next-line react-hooks/immutability
105
106
  state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
106
107
  return state;
107
108
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,OAAGzC,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,OAAGzC,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
@@ -45,6 +45,7 @@ const carouselNavClassNames = {
45
45
  const useCarouselNavStyles_unstable = (state)=>{
46
46
  'use no memo';
47
47
  const styles = useStyles();
48
+ // eslint-disable-next-line react-hooks/immutability
48
49
  state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
49
50
  return state;
50
51
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,qBAAAA;;;iCA4BAmB;;;;uBAnCwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAKxC,8BAAgE;IACrElB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,OAAGT,6CAAAA,EAAgC;YACjCU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;YACvC,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,kBAAAA,CAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,kBAAAA,CAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,kBAAAA,CAAOmB,2BAA2B;IACrD;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACfkB,MAAMnB,IAAI,CAACqB,SAAS,OAAG1B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,qBAAAA;;;iCA4BAmB;;;;uBAnCwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAKxC,8BAAgE;IACrElB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,OAAGT,6CAAAA,EAAgC;YACjCU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;YACvC,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,kBAAAA,CAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,kBAAAA,CAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,kBAAAA,CAAOmB,2BAA2B;IACrD;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACf,oDAAoD;IACpDkB,MAAMnB,IAAI,CAACqB,SAAS,OAAG1B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}
1
+ {"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}
@@ -314,6 +314,7 @@ const useCarouselNavButtonStyles_unstable = (state)=>{
314
314
  'use no memo';
315
315
  const styles = useStyles();
316
316
  const { selected, appearance } = state;
317
+ // eslint-disable-next-line react-hooks/immutability
317
318
  state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
318
319
  return state;
319
320
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","xdqbwx","Hwb57","umgawz","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
1
+ {"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","xdqbwx","Hwb57","umgawz","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
@@ -137,6 +137,7 @@ const useCarouselNavButtonStyles_unstable = (state)=>{
137
137
  'use no memo';
138
138
  const styles = useStyles();
139
139
  const { selected, appearance } = state;
140
+ // eslint-disable-next-line react-hooks/immutability
140
141
  state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
141
142
  return state;
142
143
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}
1
+ {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport type { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport type { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}
@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useCarouselNavContainer_unstable", {
8
8
  return useCarouselNavContainer_unstable;
9
9
  }
10
10
  });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
11
  const _reactutilities = require("@fluentui/react-utilities");
14
12
  const _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
15
13
  const _CarouselButton = require("../CarouselButton/CarouselButton");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"mappings":";;;;+BAgBaM;;;;;;;iEAhBU,QAAQ;gCACgB,4BAA4B;wCAEpC,mDAAmD;gCAC3D,mCAAmC;8BAC1C,0BAA0B;AAW3C,yCAAyC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX,8CAAAA;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN,8BAAAA;YACNY,MAAMZ,8BAAAA;YACNa,UAAUd,8CAAAA;YACVgB,aAAad,qBAAAA;YACbe,aAAaf,qBAAAA;YACba,iBAAiBb,qBAAAA;QACnB;QACAiB,MAAMpB,oBAAAA,CAAKqB,MAAM,CACftB,4CAAAA,EAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"mappings":";;;;+BAgBaK;;;;;;gCAfkC,4BAA4B;wCAEpC,mDAAmD;gCAC3D,mCAAmC;8BAC1C,0BAA0B;AAW3C,yCAAyC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX,8CAAAA;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN,8BAAAA;YACNY,MAAMZ,8BAAAA;YACNa,UAAUd,8CAAAA;YACVgB,aAAad,qBAAAA;YACbe,aAAaf,qBAAAA;YACba,iBAAiBb,qBAAAA;QACnB;QACAiB,MAAMpB,oBAAAA,CAAKqB,MAAM,KACftB,wCAAAA,EAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}
@@ -155,14 +155,18 @@ const useCarouselNavContainerStyles_unstable = (state)=>{
155
155
  const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
156
156
  const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
157
157
  const styles = useStyles();
158
+ // eslint-disable-next-line react-hooks/immutability
158
159
  state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
159
160
  if (state.next) {
161
+ // eslint-disable-next-line react-hooks/immutability
160
162
  state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
161
163
  }
162
164
  if (state.prev) {
165
+ // eslint-disable-next-line react-hooks/immutability
163
166
  state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
164
167
  }
165
168
  if (state.autoplay) {
169
+ // eslint-disable-next-line react-hooks/immutability
166
170
  state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
167
171
  }
168
172
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
1
+ {"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n // eslint-disable-next-line react-hooks/immutability\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n // eslint-disable-next-line react-hooks/immutability\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n // eslint-disable-next-line react-hooks/immutability\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
@@ -106,14 +106,18 @@ const useCarouselNavContainerStyles_unstable = (state)=>{
106
106
  const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
107
107
  const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
108
108
  const styles = useStyles();
109
+ // eslint-disable-next-line react-hooks/immutability
109
110
  state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
110
111
  if (state.next) {
112
+ // eslint-disable-next-line react-hooks/immutability
111
113
  state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
112
114
  }
113
115
  if (state.prev) {
116
+ // eslint-disable-next-line react-hooks/immutability
114
117
  state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
115
118
  }
116
119
  if (state.autoplay) {
120
+ // eslint-disable-next-line react-hooks/immutability
117
121
  state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
118
122
  }
119
123
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n // eslint-disable-next-line react-hooks/immutability\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n // eslint-disable-next-line react-hooks/immutability\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n // eslint-disable-next-line react-hooks/immutability\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}
1
+ {"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}
@@ -124,9 +124,11 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
124
124
  'use no memo';
125
125
  const { selected } = state;
126
126
  const styles = useStyles();
127
+ // eslint-disable-next-line react-hooks/immutability
127
128
  state.root.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
128
129
  if (state.image) {
129
130
  var _state_image;
131
+ // eslint-disable-next-line react-hooks/immutability
130
132
  state.image.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
131
133
  }
132
134
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer'\n }\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px'\n }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n if (state.image) {\n var _state_image;\n state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,gCAAgC;;;IAkC5BoC,wCAAwC;;;;uBApCJ,gBAAgB;AAE9D,yCAAyC;IAC5CnC,IAAI,EAAE,4BAA4B;IAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,iDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;IAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;IAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;QACb,IAAIsC,YAAY;QAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAAA,AAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;IAC/N;IACA,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer'\n }\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px'\n }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { selected } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n if (state.image) {\n var _state_image;\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,gCAAgC;;;IAkC5BoC,wCAAwC;;;;uBApCJ,gBAAgB;AAE9D,yCAAyC;IAC5CnC,IAAI,EAAE,4BAA4B;IAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,iDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;IAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;QACb,IAAIsC,YAAY;QAChB,oDAAA;QACAH,KAAK,CAACnC,KAAK,CAACqC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAAA,AAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;IAC/N;IACA,OAAOF,KAAK;AAChB,CAAC"}
@@ -55,9 +55,11 @@ const useCarouselNavImageButtonStyles_unstable = (state)=>{
55
55
  'use no memo';
56
56
  const { selected } = state;
57
57
  const styles = useStyles();
58
+ // eslint-disable-next-line react-hooks/immutability
58
59
  state.root.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
59
60
  if (state.image) {
60
61
  var _state_image;
62
+ // eslint-disable-next-line react-hooks/immutability
61
63
  state.image.className = (0, _react.mergeClasses)(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
62
64
  }
63
65
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer',\n },\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall,\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px',\n },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n 'use no memo';\n\n const { selected } = state;\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n carouselNavImageButtonClassNames.root,\n styles.root,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.image) {\n state.image.className = mergeClasses(\n carouselNavImageButtonClassNames.image,\n styles.image,\n selected && styles.selected,\n state.image?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,gCAAAA;;;IAuCAmB,wCAAAA;;;;uBA5CwC,iBAAiB;4BAG/C,wBAAwB;AAExC,yCAAsF;IAC3FlB,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,kBAAAA,CAAOU,mBAAmB,EAAE;QACzC,GAAGX,iBAAAA,CAAWY,WAAW,CAACX,kBAAAA,CAAOY,sBAAsB,CAAC;QACxDC,cAAcb,kBAAAA,CAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,kBAAAA,CAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAKO,iDAAiD,CACtDgB;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAKbkB;QAJFA,MAAMlB,KAAK,CAACoB,SAAS,OAAGzB,mBAAAA,EACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,EAAA,CAC3BE,eAAAA,MAAMlB,KAAAA,AAAK,MAAA,QAAXkB,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer',\n },\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall,\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px',\n },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n 'use no memo';\n\n const { selected } = state;\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselNavImageButtonClassNames.root,\n styles.root,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = mergeClasses(\n carouselNavImageButtonClassNames.image,\n styles.image,\n selected && styles.selected,\n state.image?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,gCAAAA;;;4CAuCAmB;eAAAA;;;uBA5CwC,iBAAiB;4BAG/C,wBAAwB;AAExC,yCAAsF;IAC3FlB,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,kBAAAA,CAAOU,mBAAmB,EAAE;QACzC,GAAGX,iBAAAA,CAAWY,WAAW,CAACX,kBAAAA,CAAOY,sBAAsB,CAAC;QACxDC,cAAcb,kBAAAA,CAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,kBAAAA,CAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAKO,iDAAiD,CACtDgB;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEf,oDAAoD;IACpDe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,uBAAAA,EACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAMbkB;QALF,oDAAoD;QACpDA,MAAMlB,KAAK,CAACoB,SAAS,OAAGzB,mBAAAA,EACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,EAAA,CAC3BE,eAAAA,MAAMlB,KAAAA,AAAK,MAAA,QAAXkB,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}