{
  "version": 3,
  "sources": ["../../../../src/lib/ui/components/MobileStylePanel.tsx"],
  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback } from 'react'\nimport { useOpenMenuCloser } from '../hooks/useOpenMenuCloser'\nimport { useRelevantStyles } from '../hooks/useRevelantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { StylePanel } from './StylePanel/StylePanel'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Popover, PopoverContent, PopoverTrigger } from './primitives/Popover'\n\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.styles.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode })\n\tconst currentColor = (\n\t\tcolor?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black\n\t).solid\n\n\tconst disableStylePanel = useValue(\n\t\t'isHandOrEraserToolActive',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst extraEventsToToggleMenu = useOpenMenuCloser()\n\n\treturn (\n\t\t<Popover id=\"style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<PopoverTrigger disabled={disableStylePanel}>\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"tlui-toolbar__tools__button tlui-toolbar__styles__button\"\n\t\t\t\t\tdata-testid=\"mobile.styles\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t\t{...extraEventsToToggleMenu}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent side=\"top\" align=\"end\">\n\t\t\t\t<StylePanel isMobile />\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t)\n}\n"],
  "mappings": "AA6CE,SAWG,KAXH;AA7CF;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,SAAS,gBAAgB,sBAAsB;AAEjD,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,QAAQ,gBAAgB,OAAO,IAAI,iBAAiB;AAC1D,QAAM,QAAQ,qBAAqB,EAAE,YAAY,OAAO,KAAK,WAAW,CAAC;AACzE,QAAM,gBACL,OAAO,SAAS,WAAW,MAAM,MAAM,KAA4B,IAAI,MAAM,OAC5E;AAEF,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,yBAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,0BAA0B,kBAAkB;AAElD,SACC,qBAAC,WAAQ,IAAG,cAAa,cAAc,wBACtC;AAAA,wBAAC,kBAAe,UAAU,mBACzB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,yBAAyB;AAAA,QACrD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAC7B,GAAG;AAAA,QAEJ,8BAAC,QAAK,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,IACtF,GACD;AAAA,IACA,oBAAC,kBAAe,MAAK,OAAM,OAAM,OAChC,8BAAC,cAAW,UAAQ,MAAC,GACtB;AAAA,KACD;AAEF;",
  "names": []
}