@cuemath/leap 3.1.14 → 3.1.15-hg1

package/dist/features/cue-canvas/sidebar/puzzles/puzzle-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: React.FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":"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"}
+{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: React.FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":"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"}

package/dist/features/cue-canvas/sidebar/puzzles/puzzles.js.map

@@ -1 +1 @@
-{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n  const { activeSidebar, setActiveSidebar, grade } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const puzzleMenuRef = useRef(null);\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    puzzleMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if ((activeSidebar === 'tile' || activeSidebar === 'homework') && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\" $height=\"100%\">\n      <Clickable onClick={handleClick} label=\"puzzles\">\n        <StyledWrapper $active={activeSidebar === 'puzzle'}>\n          <PuzzleIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n    </FlexView>\n  );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAA,IAAUH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,GAE3B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,WAAW,SAAY,QAAQ,GACtDQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,eAAeO,KACpDC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAGzC,gBAAAK,EAAAC,GAAA,EAAS,WAAU,YAAW,SAAQ,QACrC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,SAASN,GAAa,OAAM,WACrC,UAAA,gBAAAK,EAACE,GAAc,EAAA,SAASjB,MAAkB,UACxC,UAAC,gBAAAe,EAAAG,GAAA,CAAA,CAAW,EACd,CAAA,GACF;AAAA,IACCX,KAAgB,gBAAAQ,EAAAI,GAAA,EAAW,YAAYT,GAAa,cAAcR,GAAO;AAAA,EAC5E,EAAA,CAAA;AAEJ,GAEekB,IAAAC,EAAKvB,CAAgB;"}
+{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n  const { activeSidebar, setActiveSidebar, grade } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const puzzleMenuRef = useRef(null);\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    puzzleMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if ((activeSidebar === 'tile' || activeSidebar === 'homework') && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\" $height=\"100%\">\n      <Clickable onClick={handleClick} label=\"puzzles\">\n        <StyledWrapper $active={activeSidebar === 'puzzle'}>\n          <PuzzleIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n    </FlexView>\n  );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAU,IAAAH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,GAE3B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAEMK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,WAAW,SAAY,QAAQ,GACtDQ,EAAA;AAAA,KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,eAAeO,KACpDC,EAAA;AAAA,EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAGzC,gBAAAK,EAAAC,GAAA,EAAS,WAAU,YAAW,SAAQ,QACrC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,SAASN,GAAa,OAAM,WACrC,UAAA,gBAAAK,EAACE,GAAc,EAAA,SAASjB,MAAkB,UACxC,UAAC,gBAAAe,EAAAG,GAAA,CAAA,CAAW,EACd,CAAA,GACF;AAAA,IACCX,KAAgB,gBAAAQ,EAAAI,GAAA,EAAW,YAAYT,GAAa,cAAcR,EAAO,CAAA;AAAA,EAAA,GAC5E;AAEJ,GAEekB,IAAAC,EAAKvB,CAAgB;"}

package/dist/features/cue-canvas/sidebar/puzzles/utils.js

@@ -1,8 +1,8 @@
-const I = (l) => {
+const T = (l) => {
   const { grid: m, strokes: c, tiles: f } = l || {}, a = {};
   (f || []).forEach((o) => {
     var G, u, g, D, A, h;
-    const { name: t, options: i, id: r, size: T } = o || {};
+    const { name: t, options: i, id: r, size: L } = o || {};
     if (r) {
       if (t === "text") {
         const e = { ...o, html: i };
@@ -13,7 +13,7 @@ const I = (l) => {
         t === "algebra-tile" && (e.name = "algebra"), delete e.options, delete e.id, a[r] = [void 0, e];
       }
       if (t === "image") {
-        const e = { ...o, href: i, width: T };
+        const e = { ...o, href: i, width: L };
         delete e.options, delete e.id, a[r] = [void 0, e];
       }
       if (t === "polygon" || t === "token" || t === "custom-polygon") {
@@ -76,7 +76,7 @@ const I = (l) => {
     gridName: m,
     data: { ...v, ...a }
   };
-}, L = (l, m = "") => {
+}, I = (l, m = "") => {
   const c = [];
   return l && l.length > 0 && l.forEach((f) => {
     if (m === "grades") {
@@ -85,12 +85,11 @@ const I = (l) => {
     } else
       c.push(f.name);
   }), c;
-}, y = {
+}, b = {
   ACTIVITY_TILES: "activity_tiles",
   ACTIVITY_TOPICS: "activity_topics",
-  ACTIVITY_TYPES: "activity_types",
   ACTIVITY_GRADES: "grades"
-}, _ = {
+}, w = {
   "-1": "LKG",
   0: "UKG",
   1: "G1",
@@ -112,9 +111,9 @@ const I = (l) => {
   CAL: "CAL"
 };
 export {
-  y as FILTER_KEYS,
-  _ as GRADE_DISPLAY_NAMES,
-  L as getTags,
-  I as serializeData
+  b as FILTER_KEYS,
+  w as GRADE_DISPLAY_NAMES,
+  I as getTags,
+  T as serializeData
 };
 //# sourceMappingURL=utils.js.map

package/dist/features/cue-canvas/sidebar/puzzles/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/utils.ts"],"sourcesContent":["import type { TCueCanvasChangeDataObject, TCueCanvasGridName } from '../../types/cue-canvas';\nimport type { ActivityMetadata, IActivityGrade } from './api/get-puzzles';\nimport type { ITypeStroke, ITypeTile } from './puzzles-type';\n\nexport const serializeData = (jsonOBJ: {\n  grid: TCueCanvasGridName;\n  strokes: ITypeStroke[];\n  tiles: ITypeTile[];\n}) => {\n  const { grid, strokes, tiles } = jsonOBJ || {};\n  const newTilesArray = {} as TCueCanvasChangeDataObject;\n\n  (tiles || []).forEach(tile => {\n    const { name, options, id, size } = tile || {};\n\n    if (id) {\n      if (name === 'text') {\n        const tileData = { ...tile, html: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'equation' || name === 'algebra-tile') {\n        const tileData = { ...tile, expr: options };\n\n        if (name === 'algebra-tile') {\n          tileData.name = 'algebra';\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'image') {\n        const tileData = { ...tile, href: options, width: size };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'polygon' || name === 'token' || name === 'custom-polygon') {\n        const tileData = { ...tile, shape: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'dice') {\n        const val = options?.trim()?.split(':')[0];\n        const tileData = { ...tile, value: val };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-tile') {\n        const [width, value] = options?.trim()?.split(':') || [];\n        const tileData = { ...tile, value: value || 0, width: width || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'geo') {\n        const [key, expr] = options?.trim()?.split('=') || [];\n        const tileData = { ...tile, key: key || '', expr: expr || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-line') {\n        const [start, step, width, stepSize, minor] = options?.trim()?.split(':') || [];\n        const tileData = {\n          ...tile,\n          start: start || 0,\n          step: step || 0,\n          width: width || 0,\n          size: stepSize || 0,\n          minor: minor || 0,\n        };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-bar') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-circle') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-card' || name === 'number-bar' || name === 'tantrix') {\n        const tileData = { ...tile, value: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'tangram' ||\n        name === 'garden' ||\n        name === 'kolam' ||\n        name === 'penrose' ||\n        name === 'polyomino'\n      ) {\n        const tileData = { ...tile, index: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'ruler' ||\n        name === 'protractor' ||\n        name === 'set-triangle' ||\n        name === 'compass'\n      ) {\n        const tileData = { ...tile, width: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n    }\n  });\n  const newStrokeMap = {} as TCueCanvasChangeDataObject;\n\n  strokes.forEach((stroke: ITypeStroke) => {\n    const { id } = stroke || {};\n\n    if (id) {\n      const strokeData = { ...stroke };\n\n      delete strokeData.id;\n      newStrokeMap[id] = [undefined, strokeData];\n    }\n  });\n\n  return {\n    gridName: grid,\n    data: { ...newStrokeMap, ...newTilesArray },\n  };\n};\n\nexport const getTags = (data: ActivityMetadata[] | IActivityGrade[], type = '') => {\n  const arr: string[] = [];\n\n  if (data && data.length > 0) {\n    data.forEach(res => {\n      if (type === 'grades') {\n        const grade = `G${res.name}`;\n\n        arr.push(grade);\n      } else {\n        arr.push(res.name);\n      }\n    });\n  }\n\n  return arr;\n};\n\nexport const FILTER_KEYS = {\n  ACTIVITY_TILES: 'activity_tiles',\n  ACTIVITY_TOPICS: 'activity_topics',\n  ACTIVITY_TYPES: 'activity_types',\n  ACTIVITY_GRADES: 'grades',\n} as const;\n\nexport const GRADE_DISPLAY_NAMES: Record<string, string> = {\n  '-1': 'LKG',\n  '0': 'UKG',\n  '1': 'G1',\n  '2': 'G2',\n  '3': 'G3',\n  '4': 'G4',\n  '5': 'G5',\n  '6': 'G6',\n  '7': 'G7',\n  '8': 'G8',\n  '9': 'G9',\n  '10': 'G10',\n  '11': 'G11',\n  '12': 'G12',\n  'ALG1': 'ALG1',\n  'ALG2': 'ALG2',\n  'PCAL': 'PCAL',\n  'GEO': 'GEO',\n  'CAL': 'CAL',\n};\n"],"names":["serializeData","jsonOBJ","grid","strokes","tiles","newTilesArray","tile","_a","_b","_c","_d","_e","_f","name","options","id","size","tileData","val","width","value","key","expr","start","step","stepSize","minor","denominator","count","active","newStrokeMap","stroke","strokeData","getTags","data","type","arr","res","grade","FILTER_KEYS","GRADE_DISPLAY_NAMES"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/utils.ts"],"sourcesContent":["import type { TCueCanvasChangeDataObject, TCueCanvasGridName } from '../../types/cue-canvas';\nimport type { ActivityMetadata, IActivityGrade } from './api/get-puzzles';\nimport type { ITypeStroke, ITypeTile } from './puzzles-type';\n\nexport const serializeData = (jsonOBJ: {\n  grid: TCueCanvasGridName;\n  strokes: ITypeStroke[];\n  tiles: ITypeTile[];\n}) => {\n  const { grid, strokes, tiles } = jsonOBJ || {};\n  const newTilesArray = {} as TCueCanvasChangeDataObject;\n\n  (tiles || []).forEach(tile => {\n    const { name, options, id, size } = tile || {};\n\n    if (id) {\n      if (name === 'text') {\n        const tileData = { ...tile, html: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'equation' || name === 'algebra-tile') {\n        const tileData = { ...tile, expr: options };\n\n        if (name === 'algebra-tile') {\n          tileData.name = 'algebra';\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'image') {\n        const tileData = { ...tile, href: options, width: size };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'polygon' || name === 'token' || name === 'custom-polygon') {\n        const tileData = { ...tile, shape: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'dice') {\n        const val = options?.trim()?.split(':')[0];\n        const tileData = { ...tile, value: val };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-tile') {\n        const [width, value] = options?.trim()?.split(':') || [];\n        const tileData = { ...tile, value: value || 0, width: width || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'geo') {\n        const [key, expr] = options?.trim()?.split('=') || [];\n        const tileData = { ...tile, key: key || '', expr: expr || 0 };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-line') {\n        const [start, step, width, stepSize, minor] = options?.trim()?.split(':') || [];\n        const tileData = {\n          ...tile,\n          start: start || 0,\n          step: step || 0,\n          width: width || 0,\n          size: stepSize || 0,\n          minor: minor || 0,\n        };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-bar') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'fraction-circle') {\n        const [denominator, count, active] = options?.trim()?.split(':') || [];\n\n        const tileData = { ...tile };\n\n        if (denominator) {\n          tileData.denominator = +denominator;\n        }\n\n        if (count) {\n          tileData.count = +count;\n        }\n\n        if (active) {\n          tileData.active = +active;\n        }\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (name === 'number-card' || name === 'number-bar' || name === 'tantrix') {\n        const tileData = { ...tile, value: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'tangram' ||\n        name === 'garden' ||\n        name === 'kolam' ||\n        name === 'penrose' ||\n        name === 'polyomino'\n      ) {\n        const tileData = { ...tile, index: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n\n      if (\n        name === 'ruler' ||\n        name === 'protractor' ||\n        name === 'set-triangle' ||\n        name === 'compass'\n      ) {\n        const tileData = { ...tile, width: options };\n\n        delete tileData.options;\n        delete tileData.id;\n        newTilesArray[id] = [undefined, tileData];\n      }\n    }\n  });\n  const newStrokeMap = {} as TCueCanvasChangeDataObject;\n\n  strokes.forEach((stroke: ITypeStroke) => {\n    const { id } = stroke || {};\n\n    if (id) {\n      const strokeData = { ...stroke };\n\n      delete strokeData.id;\n      newStrokeMap[id] = [undefined, strokeData];\n    }\n  });\n\n  return {\n    gridName: grid,\n    data: { ...newStrokeMap, ...newTilesArray },\n  };\n};\n\nexport const getTags = (data: ActivityMetadata[] | IActivityGrade[], type = '') => {\n  const arr: string[] = [];\n\n  if (data && data.length > 0) {\n    data.forEach(res => {\n      if (type === 'grades') {\n        const grade = `G${res.name}`;\n\n        arr.push(grade);\n      } else {\n        arr.push(res.name);\n      }\n    });\n  }\n\n  return arr;\n};\n\nexport const FILTER_KEYS = {\n  ACTIVITY_TILES: 'activity_tiles',\n  ACTIVITY_TOPICS: 'activity_topics',\n  ACTIVITY_TYPES: 'activity_types',\n  ACTIVITY_GRADES: 'grades',\n} as const;\n\nexport const GRADE_DISPLAY_NAMES: Record<string, string> = {\n  '-1': 'LKG',\n  '0': 'UKG',\n  '1': 'G1',\n  '2': 'G2',\n  '3': 'G3',\n  '4': 'G4',\n  '5': 'G5',\n  '6': 'G6',\n  '7': 'G7',\n  '8': 'G8',\n  '9': 'G9',\n  '10': 'G10',\n  '11': 'G11',\n  '12': 'G12',\n  'ALG1': 'ALG1',\n  'ALG2': 'ALG2',\n  'PCAL': 'PCAL',\n  'GEO': 'GEO',\n  'CAL': 'CAL',\n};\n"],"names":["serializeData","jsonOBJ","grid","strokes","tiles","newTilesArray","tile","_a","_b","_c","_d","_e","_f","name","options","id","size","tileData","val","width","value","key","expr","start","step","stepSize","minor","denominator","count","active","newStrokeMap","stroke","strokeData","getTags","data","type","arr","res","grade","FILTER_KEYS","GRADE_DISPLAY_NAMES"],"mappings":"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"}

package/dist/features/cue-canvas/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import type { IHomeWorkHelpRequestModelWithStudentName } from './homework/homework-types';\nimport type { TActiveSidebar } from './puzzles/puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useMemo, useState } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Homework from './homework/homework';\nimport Puzzles from './puzzles/puzzles';\nimport { SideBarContainer } from './sidebar-styled';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n  grade?: string;\n  hwRequests?: IHomeWorkHelpRequestModelWithStudentName[];\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade, hwRequests }) => {\n  const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n  const width = useMemo(() => {\n    if (activeSidebar === 'tile') {\n      return '300px';\n    }\n\n    if (activeSidebar === 'homework') {\n      return '248px';\n    }\n\n    if (activeSidebar === 'puzzle') {\n      return '650px';\n    }\n\n    return 'auto';\n  }, [activeSidebar]);\n\n  return (\n    <SideBarContainer $activeSidebar={activeSidebar} $width={width}>\n      <FlexView $flexDirection=\"row\">\n        <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n        <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n\n        {hwRequests && hwRequests.length > 0 && (\n          <Homework\n            activeSidebar={activeSidebar}\n            setActiveSidebar={setActiveSidebar}\n            hwRequests={hwRequests}\n          />\n        )}\n      </FlexView>\n    </SideBarContainer>\n  );\n};\n\nexport default memo(Sidebar);\n"],"names":["Sidebar","grade","hwRequests","activeSidebar","setActiveSidebar","useState","width","useMemo","jsx","SideBarContainer","jsxs","FlexView","TileBar","Separator","Puzzles","Homework","sidebar","memo"],"mappings":";;;;;;;;AAkBA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAiB;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC,GAEzEC,IAAQC,EAAQ,MAChBJ,MAAkB,SACb,UAGLA,MAAkB,aACb,UAGLA,MAAkB,WACb,UAGF,QACN,CAACA,CAAa,CAAC;AAGhB,SAAA,gBAAAK,EAACC,KAAiB,gBAAgBN,GAAe,QAAQG,GACvD,UAAA,gBAAAI,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAQ,eAAAT,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC3E,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IACpB,gBAAAL,EAAAM,GAAA,EAAQ,OAAAb,GAAc,eAAAE,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IACzF,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IAEpBX,KAAcA,EAAW,SAAS,KACjC,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,eAAAZ;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAO;"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/features/cue-canvas/sidebar/sidebar.tsx"],"sourcesContent":["import type { IHomeWorkHelpRequestModelWithStudentName } from './homework/homework-types';\nimport type { TActiveSidebar } from './puzzles/puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useMemo, useState } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Homework from './homework/homework';\nimport Puzzles from './puzzles/puzzles';\nimport { SideBarContainer } from './sidebar-styled';\nimport TileBar from './tiles/tile';\n\ninterface ISidebar {\n  grade?: string;\n  hwRequests?: IHomeWorkHelpRequestModelWithStudentName[];\n}\n\nconst Sidebar: FC<ISidebar> = ({ grade, hwRequests }) => {\n  const [activeSidebar, setActiveSidebar] = useState<TActiveSidebar | undefined>();\n\n  const width = useMemo(() => {\n    if (activeSidebar === 'tile') {\n      return '300px';\n    }\n\n    if (activeSidebar === 'homework') {\n      return '248px';\n    }\n\n    if (activeSidebar === 'puzzle') {\n      return '650px';\n    }\n\n    return 'auto';\n  }, [activeSidebar]);\n\n  return (\n    <SideBarContainer $activeSidebar={activeSidebar} $width={width}>\n      <FlexView $flexDirection=\"row\">\n        <TileBar activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n        <Puzzles grade={grade} activeSidebar={activeSidebar} setActiveSidebar={setActiveSidebar} />\n        <Separator width={8} />\n\n        {hwRequests && hwRequests.length > 0 && (\n          <Homework\n            activeSidebar={activeSidebar}\n            setActiveSidebar={setActiveSidebar}\n            hwRequests={hwRequests}\n          />\n        )}\n      </FlexView>\n    </SideBarContainer>\n  );\n};\n\nexport default memo(Sidebar);\n"],"names":["Sidebar","grade","hwRequests","activeSidebar","setActiveSidebar","useState","width","useMemo","jsx","SideBarContainer","jsxs","FlexView","TileBar","Separator","Puzzles","Homework","sidebar","memo"],"mappings":";;;;;;;;AAkBA,MAAMA,IAAwB,CAAC,EAAE,OAAAC,GAAO,YAAAC,QAAiB;AACvD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqC,GAEzEC,IAAQC,EAAQ,MAChBJ,MAAkB,SACb,UAGLA,MAAkB,aACb,UAGLA,MAAkB,WACb,UAGF,QACN,CAACA,CAAa,CAAC;AAGhB,SAAA,gBAAAK,EAACC,KAAiB,gBAAgBN,GAAe,QAAQG,GACvD,UAAA,gBAAAI,EAACC,GAAS,EAAA,gBAAe,OACvB,UAAA;AAAA,IAAC,gBAAAH,EAAAI,GAAA,EAAQ,eAAAT,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IAC3E,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IACpB,gBAAAL,EAAAM,GAAA,EAAQ,OAAAb,GAAc,eAAAE,GAA8B,kBAAAC,EAAoC,CAAA;AAAA,IACzF,gBAAAI,EAACK,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,IAEpBX,KAAcA,EAAW,SAAS,KACjC,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,eAAAZ;AAAA,QACA,kBAAAC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CAEJ,EACF,CAAA;AAEJ,GAEec,IAAAC,EAAKjB,CAAO;"}

package/dist/features/cue-canvas/sidebar/tiles/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n  setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n  activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n  const { setActiveSidebar, activeSidebar } = props;\n  const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n  const toggleTiles = useCallback(() => {\n    const newTileState = activeSidebar !== 'tile';\n\n    activeInstance?.toggleTiles(newTileState);\n    setActiveSidebar(newTileState ? 'tile' : undefined);\n    setActiveTool('move');\n  }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n  return (\n    <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n      <TileIcon />\n    </StyledWrapper>\n  );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAkB,IAAAF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM;AAAA,KACnB,CAACF,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAS,CAAA,EACZ,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n  setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n  activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n  const { setActiveSidebar, activeSidebar } = props;\n  const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n  const toggleTiles = useCallback(() => {\n    const newTileState = activeSidebar !== 'tile';\n\n    activeInstance?.toggleTiles(newTileState);\n    setActiveSidebar(newTileState ? 'tile' : undefined);\n    setActiveTool('move');\n  }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n  return (\n    <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n      <TileIcon />\n    </StyledWrapper>\n  );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAA,IAAkBF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM;AAAA,KACnB,CAACF,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAA,CAAS,EACZ,CAAA;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/color-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color);\n    },\n    [cueCanvas, setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","cueCanvas","useCueCanvasActions","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtD,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAR,EAAeQ,CAAK,GACpBJ,KAAA,QAAAA,EAAW,SAASI;AAAA,IACtB;AAAA,IACA,CAACJ,GAAWJ,CAAc;AAAA,EAAA,GAEtBS,IAASC,EAAQ,MAAMC,EAAiBT,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQV,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOM,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaZ,MAAgBO,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAP,MAAgBO,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color);\n    },\n    [cueCanvas, setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","cueCanvas","useCueCanvasActions","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,EAAa,IAAAJ,GACtD,EAAE,gBAAgBK,EAAU,IAAIC,EAAoB,GACpDC,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAR,EAAeQ,CAAK,GACpBJ,KAAA,QAAAA,EAAW,SAASI;AAAA,IACtB;AAAA,IACA,CAACJ,GAAWJ,CAAc;AAAA,EAC5B,GACMS,IAASC,EAAQ,MAAMC,EAAiBT,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQV,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOM,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaZ,MAAgBO,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAP,MAAgBO,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC7C;AAAA,UAAA;AAAA,QACF;AAAA,QAtBKH;AAAA,MAwBR,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/color-picker-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TRenderAs } from '../types/cue-canvas';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType, renderAs }) => {\n  const colorPaletteRef = useRef(null);\n  const { activeColor, setActiveColor } = useCueCanvasActions();\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPaletteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView\n      $width={32}\n      $height={32}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $background=\"WHITE\"\n      $position=\"relative\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\">\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={1}\n          ref={colorPaletteRef}\n        />\n      </Clickable>\n      {menuVisible && (\n        <PaletteWrapper\n          $background=\"WHITE\"\n          $gutterX={0.5}\n          $gapX={0.5}\n          $borderRadius={10}\n          $flexDirection=\"row\"\n          $top={renderAs === 'canvas' ? -38 : -82} //for one row(22+16) for 3 (22*3 +16) icon size 22 + padding\n        >\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n            renderAs={renderAs}\n          />\n        </PaletteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","renderAs","colorPaletteRef","useRef","activeColor","setActiveColor","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAkBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAC3E,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAoB,GAEtD,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAIA,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,gBACrC,UAAA,gBAAAI;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQV;AAAA,YACR,UAAU;AAAA,YACV,KAAKF;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCK,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YACf,MAAMd,MAAa,WAAW,MAAM;AAAA,YAEpC,UAAA,gBAAAW;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAX;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAJ;AAAA,gBACA,UAAAC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"color-picker-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/color-picker-menu.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TRenderAs } from '../types/cue-canvas';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { ColorPicker, PaletteWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPalette from './color-palette';\n\ninterface ColorPickerMenuProps {\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPickerMenu: FC<ColorPickerMenuProps> = memo(({ userType, renderAs }) => {\n  const colorPaletteRef = useRef(null);\n  const { activeColor, setActiveColor } = useCueCanvasActions();\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    colorPaletteRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  return (\n    <FlexView\n      $width={32}\n      $height={32}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $borderRadius={16}\n      $background=\"WHITE\"\n      $position=\"relative\"\n    >\n      <Clickable onClick={onMenuClick} label=\"Color Picker\">\n        <ColorPicker\n          $width={22}\n          $height={22}\n          $borderRadius={11}\n          $color={activeColor}\n          $opacity={1}\n          ref={colorPaletteRef}\n        />\n      </Clickable>\n      {menuVisible && (\n        <PaletteWrapper\n          $background=\"WHITE\"\n          $gutterX={0.5}\n          $gapX={0.5}\n          $borderRadius={10}\n          $flexDirection=\"row\"\n          $top={renderAs === 'canvas' ? -38 : -82} //for one row(22+16) for 3 (22*3 +16) icon size 22 + padding\n        >\n          <ColorPalette\n            setActiveColor={setActiveColor}\n            activeColor={activeColor}\n            userType={userType}\n            renderAs={renderAs}\n          />\n        </PaletteWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default ColorPickerMenu;\n"],"names":["ColorPickerMenu","memo","userType","renderAs","colorPaletteRef","useRef","activeColor","setActiveColor","useCueCanvasActions","menuVisible","onMenuClick","useContextMenuClickHandler","jsxs","FlexView","jsx","Clickable","ColorPicker","PaletteWrapper","ColorPalette"],"mappings":";;;;;;;;AAkBA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAC3E,QAAAC,IAAkBC,EAAO,IAAI,GAC7B,EAAE,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAoB,GAEtD,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAU,EAAA,SAASL,GAAa,OAAM,gBACrC,UAAA,gBAAAI;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQV;AAAA,YACR,UAAU;AAAA,YACV,KAAKF;AAAA,UAAA;AAAA,QAAA,GAET;AAAA,QACCK,KACC,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,eAAe;AAAA,YACf,gBAAe;AAAA,YACf,MAAMd,MAAa,WAAW,MAAM;AAAA,YAEpC,UAAA,gBAAAW;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,gBAAAX;AAAA,gBACA,aAAAD;AAAA,gBACA,UAAAJ;AAAA,gBACA,UAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/grid-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef(null);\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n      onMenuClick();\n    },\n    [cueCanvas, onMenuClick],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,MAAeH,KACjB,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEIM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU,IACVJ;IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EAAA;AAGzB,SACG,gBAAAK,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,EAAA;AAAA,gBAAA;AAAA,cACjB;AAAA,YAAA;AAAA,YAZKD;AAAA,UAAA;AAAA,QAaP,CAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"grid-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/grid-menu.tsx"],"sourcesContent":["import type { TCueCanvasGridName } from '../types/cue-canvas';\nimport type { IGridMenu, TToolComponentType } from '../types/toolbar';\n\nimport React, { memo, useCallback, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { GRID_NAMES } from '../cue-canvas-helpers';\nimport { MenuWrapper, StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { GRID_TO_COMP } from './icon-map';\n\nconst GridMenu: React.FC<IGridMenu> = memo(({ GridIcon }) => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const gridMenuRef = useRef(null);\n  const { activeTool } = useCueCanvasActions();\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    gridMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n  const onGridOptionClick = useCallback(\n    (gridOption: TCueCanvasGridName) => {\n      cueCanvas?.changeGrid(gridOption);\n      onMenuClick();\n    },\n    [cueCanvas, onMenuClick],\n  );\n\n  return (\n    <FlexView $gutterX={0.25} ref={gridMenuRef}>\n      <Clickable onClick={onMenuClick} label=\"grid\">\n        <StyledWrapper $active={activeTool === 'grid'}>\n          <GridIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && (\n        <MenuWrapper\n          $borderColor=\"GREY_1\"\n          $background=\"GREY_1\"\n          $flexDirection=\"row\"\n          $widthX={11.15}\n          $flexWrap={true}\n          $flexGapX={0.5}\n        >\n          {GRID_NAMES.map(gridName => {\n            const GridComponent = GRID_TO_COMP[gridName] as TToolComponentType;\n\n            return (\n              <Clickable\n                key={gridName}\n                onClick={() => onGridOptionClick(gridName)}\n                label={gridName}\n              >\n                <FlexView\n                  $width={48}\n                  $height={48}\n                  $borderColor=\"BLACK\"\n                  $borderRadius={4}\n                  $background=\"WHITE\"\n                >\n                  <GridComponent />\n                </FlexView>\n              </Clickable>\n            );\n          })}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default GridMenu;\n"],"names":["GridMenu","memo","GridIcon","cueCanvas","useCueCanvasActions","gridMenuRef","useRef","activeTool","menuVisible","onMenuClick","useContextMenuClickHandler","onGridOptionClick","useCallback","gridOption","jsxs","FlexView","jsx","Clickable","StyledWrapper","MenuWrapper","GRID_NAMES","gridName","GridComponent","GRID_TO_COMP"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAC3D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpDC,IAAcC,EAAO,IAAI,GACzB,EAAE,YAAAC,EAAW,IAAIH,EAAoB,GACrC,EAAE,aAAAI,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACMM,IAAoBC;AAAA,IACxB,CAACC,MAAmC;AAClC,MAAAV,KAAA,QAAAA,EAAW,WAAWU,IACVJ,EAAA;AAAA,IACd;AAAA,IACA,CAACN,GAAWM,CAAW;AAAA,EACzB;AAEA,SACG,gBAAAK,EAAAC,GAAA,EAAS,UAAU,MAAM,KAAKV,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACC,GAAU,EAAA,SAASR,GAAa,OAAM,QACrC,UAAA,gBAAAO,EAACE,GAAc,EAAA,SAASX,MAAe,QACrC,UAAC,gBAAAS,EAAAd,GAAA,CAAA,CAAS,EACZ,CAAA,GACF;AAAA,IACCM,KACC,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,aAAY;AAAA,QACZ,gBAAe;AAAA,QACf,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QAEV,UAAAC,EAAW,IAAI,CAAYC,MAAA;AACpB,gBAAAC,IAAgBC,EAAaF,CAAQ;AAGzC,iBAAA,gBAAAL;AAAA,YAACC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMN,EAAkBU,CAAQ;AAAA,cACzC,OAAOA;AAAA,cAEP,UAAA,gBAAAL;AAAA,gBAACD;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,cAAa;AAAA,kBACb,eAAe;AAAA,kBACf,aAAY;AAAA,kBAEZ,4BAACO,GAAc,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACjB;AAAA,YAZKD;AAAA,UAaP;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/icon-map.js

@@ -20,24 +20,24 @@ import q from "../../../assets/line-icons/icons/upload.js";
 import h from "../../../assets/line-icons/icons/zoom-in.js";
 import v from "../../../assets/line-icons/icons/zoom-out.js";
 import k from "../../ui/layout/flex-view.js";
-import { StyledPencilIcon as O, StyledRulerIcon as T, StyledSketchWrapper as G, StyledHighlighterWrapper as y, RedoIcon as C, StyledLockIcon as D, StyledUnlockIcon as x } from "../cue-cavas-styled.js";
+import { StyledUnlockIcon as O, StyledLockIcon as T, RedoIcon as G, StyledHighlighterWrapper as y, StyledSketchWrapper as C, StyledRulerIcon as D, StyledPencilIcon as x } from "../cue-cavas-styled.js";
 const Y = {
-  pen: O,
-  ruler: T,
-  marker: G,
+  pen: x,
+  ruler: D,
+  marker: C,
   highlighter: y,
   eraser: i,
   move: r,
   undo: s,
-  redo: C,
+  redo: G,
   pan: p,
   clearAll: o,
   text: f,
   equation: t,
   grid: e,
   home: n,
-  lock: D,
-  unlock: x,
+  lock: T,
+  unlock: O,
   zoomIn: h,
   zoomOut: v,
   upload: q,

package/dist/features/cue-canvas/toolbar/pen-tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n  const { activeTool, activeColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAoB,GAElDC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBV,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGW,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBV,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAW,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAO;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAAlB,EAAa,IAAI,CAAAmB,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n  const { activeTool, activeColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAoB,GAElDC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAEMK,IAAsBC,EAC1BC,EAAiBV,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGW,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBV,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAW,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAO;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAAlB,EAAa,IAAI,CAAAmB,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n  tool: TCueCanvasTool;\n  withGutter?: boolean;\n  shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n    homeworkId,\n    setHomeworkId,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t);\n      if (t === 'clearAll' && homeworkId) {\n        setHomeworkId(undefined);\n      }\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n  );\n\n  if (tool === 'grid') {\n    return <GridMenu GridIcon={ToolComponent} />;\n  }\n\n  return (\n    <FlexView $gutterX={withGutter ? 0.25 : 0}>\n      <Clickable onClick={() => onToolClick(tool)} label={tool}>\n        {getIsWritingTool(tool) ? (\n          <ToolComponent\n            $active={activeTool === tool}\n            $activeColor={activeColor}\n            $shouldAnimate={shouldAnimate}\n          />\n        ) : (\n          <StyledWrapper $active={activeTool === tool}>\n            <ToolComponent />\n          </StyledWrapper>\n        )}\n      </Clickable>\n    </FlexView>\n  );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACrB,MAAAT,KAAA,QAAAA,EAAW,QAAQS,IACfA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EAAA;AAGtD,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}
+{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n  tool: TCueCanvasTool;\n  withGutter?: boolean;\n  shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n  const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n  const {\n    activeInstance: cueCanvas,\n    setActiveTool,\n    activeTool,\n    activeColor,\n    homeworkId,\n    setHomeworkId,\n  } = useCueCanvasActions();\n\n  const onToolClick = useCallback(\n    (t: TCueCanvasTool) => {\n      cueCanvas?.setTool(t);\n      if (t === 'clearAll' && homeworkId) {\n        setHomeworkId(undefined);\n      }\n\n      if (!STATELESS_TOOLS.has(t)) {\n        setActiveTool(t);\n      }\n    },\n    [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n  );\n\n  if (tool === 'grid') {\n    return <GridMenu GridIcon={ToolComponent} />;\n  }\n\n  return (\n    <FlexView $gutterX={withGutter ? 0.25 : 0}>\n      <Clickable onClick={() => onToolClick(tool)} label={tool}>\n        {getIsWritingTool(tool) ? (\n          <ToolComponent\n            $active={activeTool === tool}\n            $activeColor={activeColor}\n            $shouldAnimate={shouldAnimate}\n          />\n        ) : (\n          <StyledWrapper $active={activeTool === tool}>\n            <ToolComponent />\n          </StyledWrapper>\n        )}\n      </Clickable>\n    </FlexView>\n  );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACrB,MAAAT,KAAA,QAAAA,EAAW,QAAQS,IACfA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EACtD;AAEA,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAA,CAAc,EACjB,CAAA,EAAA,CAEJ,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}

package/dist/features/cue-canvas/toolbar/toolbar.js

@@ -1,21 +1,21 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { memo as c, useEffect as l } from "react";
-import f from "../../ui/layout/flex-view.js";
+import { memo as c, useEffect as f } from "react";
+import l from "../../ui/layout/flex-view.js";
 import { getUserTools as p } from "../cue-canvas-helpers.js";
 import { useCueCanvasActions as u } from "../hooks/use-cue-canvas-actions.js";
 import C from "./color-picker-menu.js";
 import v from "./tool.js";
 import x from "./whiteboard-toolbar.js";
-const b = c(({ userType: t, renderAs: e }) => {
-  const i = p(t, e), { activeInstance: o, activeTool: m, activeColor: n } = u();
-  return l(() => {
-    o && (o.setColor(n), o.setTool(m));
-  }, [o]), e === "whiteboard" ? /* @__PURE__ */ r(x, { tools: i, userType: t }) : /* @__PURE__ */ s(f, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
-    i.map((a) => /* @__PURE__ */ r(v, { tool: a, shouldAnimate: !0 }, a)),
+const A = c(({ userType: t, renderAs: e }) => {
+  const i = p(t, e), { activeInstance: o, activeTool: a, activeColor: n } = u();
+  return f(() => {
+    o && (o.setColor(n), o.setTool(a));
+  }, [o]), e === "whiteboard" ? /* @__PURE__ */ r(x, { tools: i, userType: t }) : /* @__PURE__ */ s(l, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
+    i.map((m) => /* @__PURE__ */ r(v, { tool: m, shouldAnimate: !0 }, m)),
     /* @__PURE__ */ r(C, { userType: t, renderAs: "canvas" })
   ] });
-}), I = b;
+});
 export {
-  I as default
+  A as default
 };
 //# sourceMappingURL=toolbar.js.map

package/dist/features/cue-canvas/toolbar/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAiB/D,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n  const tools = getUserTools(userType, renderAs);\n  const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n  // This effect ensures that the selected tool and color are applied to the cueCanvas instance\n  // whenever it changes. For example, if a user selects a tool and color, then navigates to a\n  // different question (causing a new cueCanvas instance), the same tool and color will be set\n  // on the new instance.\n  // Disabling the exhaustive-deps rule here because we want to run this effect only\n  // when the cueCanvas instance is set, not on every tool & color change.\n  useEffect(() => {\n    if (cueCanvas) {\n      cueCanvas.setColor(activeColor);\n\n      cueCanvas.setTool(activeTool);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [cueCanvas]);\n\n  if (renderAs === 'whiteboard') {\n    return <WhiteboardToolbar tools={tools} userType={userType} />;\n  }\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n      {tools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate />\n      ))}\n      <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n    </FlexView>\n  );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC,EAAoB;AAiBnF,SATAC,EAAU,MAAM;AACd,IAAIJ,MACFA,EAAU,SAASE,CAAW,GAE9BF,EAAU,QAAQC,CAAU;AAAA,EAC9B,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EAAA,GACzD;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/whiteboard-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport ColorPickerMenu from './color-picker-menu';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n      <PenToolMenu writingTools={writingTools} />\n      <ColorPickerMenu userType={userType} renderAs=\"whiteboard\" />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={false} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","ColorPickerMenu","tool","Tool"],"mappings":";;;;;;AAUA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,cAAAL,GAA4B;AAAA,IACxC,gBAAAI,EAAAE,GAAA,EAAgB,UAAAP,GAAoB,UAAS,aAAa,CAAA;AAAA,IAC1DE,EAAW,IAAI,CACdM,MAAA,gBAAAH,EAACI,KAAK,MAAAD,GAAuB,eAAe,GAArB,GAAAA,CAA4B,CACpD;AAAA,EACH,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"whiteboard-toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/whiteboard-toolbar.tsx"],"sourcesContent":["import type { IWhiteboardToolbar } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport ColorPickerMenu from './color-picker-menu';\nimport PenToolMenu from './pen-tool-menu';\nimport Tool from './tool';\n\nconst WhiteboardToolbar: FC<IWhiteboardToolbar> = memo(({ tools, userType }) => {\n  const writingTools = tools.slice(0, 4);\n  const otherTools = tools.slice(4);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25} $position=\"relative\">\n      <PenToolMenu writingTools={writingTools} />\n      <ColorPickerMenu userType={userType} renderAs=\"whiteboard\" />\n      {otherTools.map(tool => (\n        <Tool tool={tool} key={tool} shouldAnimate={false} />\n      ))}\n    </FlexView>\n  );\n});\n\nexport default WhiteboardToolbar;\n"],"names":["WhiteboardToolbar","memo","tools","userType","writingTools","otherTools","jsxs","FlexView","jsx","PenToolMenu","ColorPickerMenu","tool","Tool"],"mappings":";;;;;;AAUA,MAAMA,IAA4CC,EAAK,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAC9E,QAAMC,IAAeF,EAAM,MAAM,GAAG,CAAC,GAC/BG,IAAaH,EAAM,MAAM,CAAC;AAG9B,SAAA,gBAAAI,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,WAAW,MAAM,WAAU,YAC7E,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,cAAAL,GAA4B;AAAA,IACxC,gBAAAI,EAAAE,GAAA,EAAgB,UAAAP,GAAoB,UAAS,aAAa,CAAA;AAAA,IAC1DE,EAAW,IAAI,CACdM,MAAA,gBAAAH,EAACI,KAAK,MAAAD,GAAuB,eAAe,GAArB,GAAAA,CAA4B,CACpD;AAAA,EAAA,GACH;AAEJ,CAAC;"}

package/dist/features/extra-practice/extra-practice.js

@@ -1,21 +1,21 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { useMemo as b, useCallback as C } from "react";
-import $ from "../../assets/line-icons/icons/plus.js";
-import y from "../ui/arrow-tooltip/arrow-tooltip.js";
-import A from "../ui/buttons/button/button.js";
-import I from "../ui/buttons/text-button/text-button.js";
+import y from "../../assets/line-icons/icons/plus.js";
+import A from "../ui/arrow-tooltip/arrow-tooltip.js";
+import I from "../ui/buttons/button/button.js";
+import O from "../ui/buttons/text-button/text-button.js";
 import i from "../ui/layout/flex-view.js";
-import O from "../ui/text/text.js";
-import R from "./list/list.js";
-const E = ({
+import R from "../ui/text/text.js";
+import $ from "./list/list.js";
+const z = ({
   showAllExtraPractice: t,
   sheets: s,
   userType: r,
   ...c
 }) => {
   const {
-    teacherId: a,
-    onStart: m,
+    teacherId: m,
+    onStart: a,
     onResume: l,
     onReattempt: p,
     onPreview: h,
@@ -23,8 +23,8 @@ const E = ({
     onReset: f,
     onChangeLocation: u,
     onShowOlderSheets: o,
-    onUnlock: x
-  } = c, w = b(
+    onUnlock: w
+  } = c, x = b(
     () => t ? "All extra practice sheets" : "recent extra practice sheets",
     [t]
   ), S = C(() => {
@@ -34,9 +34,9 @@ const E = ({
   }, [o]);
   return /* @__PURE__ */ n(i, { $flexGapX: 1.5, children: [
     /* @__PURE__ */ n(i, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(O, { $renderAs: "eyebrow1", children: w }),
+      /* @__PURE__ */ e(R, { $renderAs: "eyebrow1", children: x }),
       r === "TEACHER" && /* @__PURE__ */ e(
-        y,
+        A,
         {
           widthX: 19.125,
           position: "bottom",
@@ -44,11 +44,11 @@ const E = ({
           tooltipItem: "Assign new extra practice sheets from the chapter’s “Supplementary resources” section",
           tooltipXCoOrdinates: -45,
           children: /* @__PURE__ */ e(
-            A,
+            I,
             {
               renderAs: "primary",
               label: "Extra practice sheet",
-              Icon: $,
+              Icon: y,
               size: "xsmall",
               disabled: !0
             }
@@ -57,24 +57,24 @@ const E = ({
       )
     ] }),
     /* @__PURE__ */ e(
-      R,
+      $,
       {
         sheets: s,
         userType: r,
-        teacherId: a,
-        onStart: m,
+        teacherId: m,
+        onStart: a,
         onResume: l,
         onReattempt: p,
         onPreview: h,
         onReview: d,
         onReset: f,
         onChangeLocation: u,
-        onUnlock: x
+        onUnlock: w
       }
     ),
-    !t && /* @__PURE__ */ e(I, { label: "See older sheets", onClick: S })
+    !t && /* @__PURE__ */ e(O, { label: "See older sheets", onClick: S })
   ] });
-}, z = E;
+};
 export {
   z as default
 };

package/dist/features/extra-practice/extra-practice.js.map

@@ -1 +1 @@
-{"version":3,"file":"extra-practice.js","sources":["../../../src/features/extra-practice/extra-practice.tsx"],"sourcesContent":["import type { IExtraPracticeProps } from './extra-practice-types';\n\nimport { useCallback, type FC, useMemo } from 'react';\n\nimport PlusIcon from '../../assets/line-icons/icons/plus';\nimport ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../ui/buttons/button/button';\nimport TextButton from '../ui/buttons/text-button/text-button';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport List from './list/list';\n\nconst ExtraPractice: FC<IExtraPracticeProps> = ({\n  showAllExtraPractice,\n  sheets,\n  userType,\n  ...restExtraPracticeProps\n}) => {\n  const {\n    teacherId,\n    onStart,\n    onResume,\n    onReattempt,\n    onPreview,\n    onReview,\n    onReset,\n    onChangeLocation,\n    onShowOlderSheets,\n    onUnlock,\n  } = restExtraPracticeProps;\n  const title = useMemo(\n    () => (showAllExtraPractice ? 'All extra practice sheets' : 'recent extra practice sheets'),\n    [showAllExtraPractice],\n  );\n\n  const handleOnShowOlderSheets = useCallback(() => {\n    if (typeof onShowOlderSheets !== 'function') {\n      throw new Error('onShowOlderSheets must be a function');\n    }\n\n    onShowOlderSheets();\n  }, [onShowOlderSheets]);\n\n  return (\n    <FlexView $flexGapX={1.5}>\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n        <Text $renderAs=\"eyebrow1\">{title}</Text>\n\n        {userType === 'TEACHER' && (\n          <ArrowTooltip\n            widthX={19.125}\n            position=\"bottom\"\n            renderAs=\"primary\"\n            tooltipItem={`Assign new extra practice sheets from the chapter’s “Supplementary resources” section`}\n            tooltipXCoOrdinates={-45}\n          >\n            <Button\n              renderAs=\"primary\"\n              label=\"Extra practice sheet\"\n              Icon={PlusIcon}\n              size=\"xsmall\"\n              disabled\n            />\n          </ArrowTooltip>\n        )}\n      </FlexView>\n\n      <List\n        sheets={sheets}\n        userType={userType}\n        teacherId={teacherId}\n        onStart={onStart}\n        onResume={onResume}\n        onReattempt={onReattempt}\n        onPreview={onPreview}\n        onReview={onReview}\n        onReset={onReset}\n        onChangeLocation={onChangeLocation}\n        onUnlock={onUnlock}\n      />\n\n      {!showAllExtraPractice && (\n        <TextButton label=\"See older sheets\" onClick={handleOnShowOlderSheets} />\n      )}\n    </FlexView>\n  );\n};\n\nexport default ExtraPractice;\n"],"names":["ExtraPractice","showAllExtraPractice","sheets","userType","restExtraPracticeProps","teacherId","onStart","onResume","onReattempt","onPreview","onReview","onReset","onChangeLocation","onShowOlderSheets","onUnlock","title","useMemo","handleOnShowOlderSheets","useCallback","jsxs","FlexView","jsx","Text","ArrowTooltip","Button","PlusIcon","List","TextButton","ExtraPractice$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,sBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAV,GACEW,IAAQC;AAAA,IACZ,MAAOf,IAAuB,8BAA8B;AAAA,IAC5D,CAACA,CAAoB;AAAA,EAAA,GAGjBgB,IAA0BC,EAAY,MAAM;AAC5C,QAAA,OAAOL,KAAsB;AACzB,YAAA,IAAI,MAAM,sCAAsC;AAGtC,IAAAA;EAAA,GACjB,CAACA,CAAiB,CAAC;AAGpB,SAAA,gBAAAM,EAACC,GAAS,EAAA,WAAW,KACnB,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,YAAY,UAAMP,GAAA;AAAA,MAEjCZ,MAAa,aACZ,gBAAAkB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,aAAa;AAAA,UACb,qBAAqB;AAAA,UAErB,UAAA,gBAAAF;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,OAAM;AAAA,cACN,MAAMC;AAAA,cACN,MAAK;AAAA,cACL,UAAQ;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,QAAAxB;AAAA,QACA,UAAAC;AAAA,QACA,WAAAE;AAAA,QACA,SAAAC;AAAA,QACA,UAAAC;AAAA,QACA,aAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,QACA,SAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,UAAAE;AAAA,MAAA;AAAA,IACF;AAAA,IAEC,CAACb,KACA,gBAAAoB,EAACM,KAAW,OAAM,oBAAmB,SAASV,GAAyB;AAAA,EAE3E,EAAA,CAAA;AAEJ,GAEAW,IAAe5B;"}
+{"version":3,"file":"extra-practice.js","sources":["../../../src/features/extra-practice/extra-practice.tsx"],"sourcesContent":["import type { IExtraPracticeProps } from './extra-practice-types';\n\nimport { useCallback, type FC, useMemo } from 'react';\n\nimport PlusIcon from '../../assets/line-icons/icons/plus';\nimport ArrowTooltip from '../ui/arrow-tooltip/arrow-tooltip';\nimport Button from '../ui/buttons/button/button';\nimport TextButton from '../ui/buttons/text-button/text-button';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\nimport List from './list/list';\n\nconst ExtraPractice: FC<IExtraPracticeProps> = ({\n  showAllExtraPractice,\n  sheets,\n  userType,\n  ...restExtraPracticeProps\n}) => {\n  const {\n    teacherId,\n    onStart,\n    onResume,\n    onReattempt,\n    onPreview,\n    onReview,\n    onReset,\n    onChangeLocation,\n    onShowOlderSheets,\n    onUnlock,\n  } = restExtraPracticeProps;\n  const title = useMemo(\n    () => (showAllExtraPractice ? 'All extra practice sheets' : 'recent extra practice sheets'),\n    [showAllExtraPractice],\n  );\n\n  const handleOnShowOlderSheets = useCallback(() => {\n    if (typeof onShowOlderSheets !== 'function') {\n      throw new Error('onShowOlderSheets must be a function');\n    }\n\n    onShowOlderSheets();\n  }, [onShowOlderSheets]);\n\n  return (\n    <FlexView $flexGapX={1.5}>\n      <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n        <Text $renderAs=\"eyebrow1\">{title}</Text>\n\n        {userType === 'TEACHER' && (\n          <ArrowTooltip\n            widthX={19.125}\n            position=\"bottom\"\n            renderAs=\"primary\"\n            tooltipItem={`Assign new extra practice sheets from the chapter’s “Supplementary resources” section`}\n            tooltipXCoOrdinates={-45}\n          >\n            <Button\n              renderAs=\"primary\"\n              label=\"Extra practice sheet\"\n              Icon={PlusIcon}\n              size=\"xsmall\"\n              disabled\n            />\n          </ArrowTooltip>\n        )}\n      </FlexView>\n\n      <List\n        sheets={sheets}\n        userType={userType}\n        teacherId={teacherId}\n        onStart={onStart}\n        onResume={onResume}\n        onReattempt={onReattempt}\n        onPreview={onPreview}\n        onReview={onReview}\n        onReset={onReset}\n        onChangeLocation={onChangeLocation}\n        onUnlock={onUnlock}\n      />\n\n      {!showAllExtraPractice && (\n        <TextButton label=\"See older sheets\" onClick={handleOnShowOlderSheets} />\n      )}\n    </FlexView>\n  );\n};\n\nexport default ExtraPractice;\n"],"names":["ExtraPractice","showAllExtraPractice","sheets","userType","restExtraPracticeProps","teacherId","onStart","onResume","onReattempt","onPreview","onReview","onReset","onChangeLocation","onShowOlderSheets","onUnlock","title","useMemo","handleOnShowOlderSheets","useCallback","jsxs","FlexView","jsx","Text","ArrowTooltip","Button","PlusIcon","List","TextButton"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,sBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEV,GACEW,IAAQC;AAAA,IACZ,MAAOf,IAAuB,8BAA8B;AAAA,IAC5D,CAACA,CAAoB;AAAA,EACvB,GAEMgB,IAA0BC,EAAY,MAAM;AAC5C,QAAA,OAAOL,KAAsB;AACzB,YAAA,IAAI,MAAM,sCAAsC;AAGtC,IAAAA,EAAA;AAAA,EAAA,GACjB,CAACA,CAAiB,CAAC;AAGpB,SAAA,gBAAAM,EAACC,GAAS,EAAA,WAAW,KACnB,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,iBAClE,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,YAAY,UAAMP,GAAA;AAAA,MAEjCZ,MAAa,aACZ,gBAAAkB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,aAAa;AAAA,UACb,qBAAqB;AAAA,UAErB,UAAA,gBAAAF;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,OAAM;AAAA,cACN,MAAMC;AAAA,cACN,MAAK;AAAA,cACL,UAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IACF,GAEJ;AAAA,IAEA,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,QAAAxB;AAAA,QACA,UAAAC;AAAA,QACA,WAAAE;AAAA,QACA,SAAAC;AAAA,QACA,UAAAC;AAAA,QACA,aAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,QACA,SAAAC;AAAA,QACA,kBAAAC;AAAA,QACA,UAAAE;AAAA,MAAA;AAAA,IACF;AAAA,IAEC,CAACb,KACA,gBAAAoB,EAACM,KAAW,OAAM,oBAAmB,SAASV,EAAyB,CAAA;AAAA,EAAA,GAE3E;AAEJ;"}

package/dist/features/extra-practice/list/list-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-constants.js","sources":["../../../../src/features/extra-practice/list/list-constants.ts"],"sourcesContent":["import type { TTabsDataProps } from './list-types';\n\nimport { SHEET_STATE } from '../../sheets/constants/sheet';\n\nconst { LOCKED, NOT_STARTED, IN_PROGRESS, FAMILIAR, PROFICIENT, MASTERED, COMPLETED, RE_ATTEMPT } =\n  SHEET_STATE;\n\nconst TABS: TTabsDataProps[] = [\n  {\n    id: 'all-sheets',\n    label: 'All',\n    search_list: [],\n  },\n  {\n    id: 'unattempted-sheets',\n    label: 'Unattempted',\n    search_list: [LOCKED, NOT_STARTED, RE_ATTEMPT],\n  },\n  {\n    id: 'inprogress-sheets',\n    label: 'In progress',\n    search_list: [IN_PROGRESS],\n  },\n  {\n    id: 'submitted-sheets',\n    label: 'Submitted',\n    search_list: [FAMILIAR, PROFICIENT, MASTERED, COMPLETED],\n  },\n] as const;\n\nexport { TABS };\n"],"names":["LOCKED","NOT_STARTED","IN_PROGRESS","FAMILIAR","PROFICIENT","MASTERED","COMPLETED","RE_ATTEMPT","SHEET_STATE","TABS"],"mappings":";AAIA,MAAM,EAAE,QAAAA,GAAQ,aAAAC,GAAa,aAAAC,GAAa,UAAAC,GAAU,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,YAAAC,EACnF,IAAAC,GAEIC,IAAyB;AAAA,EAC7B;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACT,GAAQC,GAAaM,CAAU;AAAA,EAC/C;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACL,CAAW;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACC,GAAUC,GAAYC,GAAUC,CAAS;AAAA,EACzD;AACF;"}
+{"version":3,"file":"list-constants.js","sources":["../../../../src/features/extra-practice/list/list-constants.ts"],"sourcesContent":["import type { TTabsDataProps } from './list-types';\n\nimport { SHEET_STATE } from '../../sheets/constants/sheet';\n\nconst { LOCKED, NOT_STARTED, IN_PROGRESS, FAMILIAR, PROFICIENT, MASTERED, COMPLETED, RE_ATTEMPT } =\n  SHEET_STATE;\n\nconst TABS: TTabsDataProps[] = [\n  {\n    id: 'all-sheets',\n    label: 'All',\n    search_list: [],\n  },\n  {\n    id: 'unattempted-sheets',\n    label: 'Unattempted',\n    search_list: [LOCKED, NOT_STARTED, RE_ATTEMPT],\n  },\n  {\n    id: 'inprogress-sheets',\n    label: 'In progress',\n    search_list: [IN_PROGRESS],\n  },\n  {\n    id: 'submitted-sheets',\n    label: 'Submitted',\n    search_list: [FAMILIAR, PROFICIENT, MASTERED, COMPLETED],\n  },\n] as const;\n\nexport { TABS };\n"],"names":["LOCKED","NOT_STARTED","IN_PROGRESS","FAMILIAR","PROFICIENT","MASTERED","COMPLETED","RE_ATTEMPT","SHEET_STATE","TABS"],"mappings":";AAIA,MAAM,EAAE,QAAAA,GAAQ,aAAAC,GAAa,aAAAC,GAAa,UAAAC,GAAU,YAAAC,GAAY,UAAAC,GAAU,WAAAC,GAAW,YAAAC,EAAA,IACnFC,GAEIC,IAAyB;AAAA,EAC7B;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAAA;AAAA,EACf;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACT,GAAQC,GAAaM,CAAU;AAAA,EAC/C;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACL,CAAW;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aAAa,CAACC,GAAUC,GAAYC,GAAUC,CAAS;AAAA,EAAA;AAE3D;"}

package/dist/features/extra-practice/list/list-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-styled.js","sources":["../../../../src/features/extra-practice/list/list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\ninterface ITabProps {\n  $selected: boolean;\n}\n\nconst Tab = styled(FlexView)<ITabProps>(({ $selected, theme }) => {\n  const { BLACK, WHITE } = theme.colors;\n  const { gutter } = theme.layout;\n\n  return `\n    padding: 0 ${gutter * 1.5}px ${gutter * 1.125}px;\n    cursor: pointer;\n    border-bottom: 2px solid ${$selected ? BLACK : WHITE};\n  `;\n});\n\nexport { Tab };\n"],"names":["Tab","styled","FlexView","$selected","theme","BLACK","WHITE","gutter"],"mappings":";;AAQM,MAAAA,IAAMC,EAAOC,CAAQ,EAAa,CAAC,EAAE,WAAAC,GAAW,OAAAC,QAAY;AAChE,QAAM,EAAE,OAAAC,GAAO,OAAAC,MAAUF,EAAM,QACzB,EAAE,QAAAG,EAAO,IAAIH,EAAM;AAElB,SAAA;AAAA,iBACQG,IAAS,GAAG,MAAMA,IAAS,KAAK;AAAA;AAAA,+BAElBJ,IAAYE,IAAQC,CAAK;AAAA;AAExD,CAAC;"}
+{"version":3,"file":"list-styled.js","sources":["../../../../src/features/extra-practice/list/list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../ui/layout/flex-view';\n\ninterface ITabProps {\n  $selected: boolean;\n}\n\nconst Tab = styled(FlexView)<ITabProps>(({ $selected, theme }) => {\n  const { BLACK, WHITE } = theme.colors;\n  const { gutter } = theme.layout;\n\n  return `\n    padding: 0 ${gutter * 1.5}px ${gutter * 1.125}px;\n    cursor: pointer;\n    border-bottom: 2px solid ${$selected ? BLACK : WHITE};\n  `;\n});\n\nexport { Tab };\n"],"names":["Tab","styled","FlexView","$selected","theme","BLACK","WHITE","gutter"],"mappings":";;AAQM,MAAAA,IAAMC,EAAOC,CAAQ,EAAa,CAAC,EAAE,WAAAC,GAAW,OAAAC,QAAY;AAChE,QAAM,EAAE,OAAAC,GAAO,OAAAC,EAAM,IAAIF,EAAM,QACzB,EAAE,QAAAG,MAAWH,EAAM;AAElB,SAAA;AAAA,iBACQG,IAAS,GAAG,MAAMA,IAAS,KAAK;AAAA;AAAA,+BAElBJ,IAAYE,IAAQC,CAAK;AAAA;AAExD,CAAC;"}