@perses-dev/components 0.55.1 → 0.56.0-beta.1

package/dist/ExemplarMetadata/ExemplarMetadataTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, IconButton, Portal, Stack, Typography } from '@mui/material';\nimport type { Exemplar, Labels } from '@perses-dev/spec';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { Fragment } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport type { FormatOptions } from '../model/units';\nimport { formatValue } from '../model/units';\nimport {\n  assembleTransform,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '../TimeSeriesTooltip';\nimport type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\n\nexport interface ExemplarMetadataTooltipProps {\n  exemplar: Exemplar;\n  seriesLabels?: Labels;\n  /**\n   * CSS selector of the element the tooltip should be portaled into (e.g. `#dashboard`).\n   * Passed as-is to `document.querySelector`, so it must be a selector and not a bare element id.\n   */\n  containerId?: string;\n  format?: FormatOptions;\n  /**\n   * Position where the tooltip has been pinned, or null when it follows the mouse.\n   */\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\n/**\n * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).\n * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way\n * the annotation tooltip works.\n */\nexport function ExemplarMetadataTooltip({\n  exemplar,\n  seriesLabels,\n  containerId,\n  format,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: ExemplarMetadataTooltipProps): ReactElement | null {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.\n  const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const { labels, value, timestamp } = exemplar;\n  const formattedValue = formatValue(value, format);\n  const date = new Date(timestamp);\n  const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n  const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n  // Only sections with content take part in the layout, so no divider is left dangling\n  // when a label set is empty.\n  const sections: Array<{ key: string; content: ReactElement }> = [];\n  if (seriesLabels && Object.keys(seriesLabels).length > 0) {\n    sections.push({ key: 'series-labels', content: <LabelGrid title=\"Series labels\" labels={seriesLabels} /> });\n  }\n  if (Object.keys(labels).length > 0) {\n    sections.push({ key: 'exemplar-labels', content: <LabelGrid title=\"Exemplar labels\" labels={labels} /> });\n  }\n  sections.push({\n    key: 'value',\n    content: (\n      <Box>\n        <Typography variant=\"overline\" component=\"div\">\n          Value\n        </Typography>\n        <Typography fontWeight={700}>{formattedValue}</Typography>\n      </Box>\n    ),\n  });\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography\n                  variant=\"caption\"\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                  })}\n                >\n                  {formattedDate}\n                </Typography>\n                <Typography variant=\"caption\">\n                  <strong>{formattedTime}</strong>\n                </Typography>\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <IconButton\n                      aria-label={UNPIN_TOOLTIP_HELP_TEXT}\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ padding: 0, color: 'inherit' }}\n                    >\n                      <Pin sx={{ fontSize: 16 }} />\n                    </IconButton>\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Stack spacing={1} sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {sections.map((section, index) => (\n              <Fragment key={section.key}>\n                {index > 0 && <Divider sx={(theme) => ({ borderColor: theme.palette.grey['500'] })} />}\n                {section.content}\n              </Fragment>\n            ))}\n          </Stack>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\nfunction LabelGrid({ title, labels }: { title: string; labels: Labels }): ReactElement {\n  const entries = Object.entries(labels);\n  return (\n    <Box>\n      <Typography variant=\"overline\" component=\"div\">\n        {title}\n      </Typography>\n      <Box\n        sx={{\n          display: 'grid',\n          // The first column is sized by the longest label name, so all values line up\n          // at the same horizontal position.\n          gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',\n          columnGap: 0.5,\n          rowGap: 0.25,\n        }}\n      >\n        {entries.map(([labelName, labelValue]) => (\n          <Fragment key={labelName}>\n            <Typography sx={{ wordBreak: 'break-all' }}>{labelName}:</Typography>\n            <Typography fontWeight={700} sx={{ wordBreak: 'break-all' }}>\n              {labelValue}\n            </Typography>\n          </Fragment>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","IconButton","Portal","Stack","Typography","Pin","PinOutline","Fragment","useResizeObserver","useTimeZone","formatValue","assembleTransform","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","ExemplarMetadataTooltip","exemplar","seriesLabels","containerId","format","pinnedPos","enablePinning","onUnpinClick","formatWithUserTimeZone","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","labels","value","timestamp","formattedValue","date","Date","formattedDate","formattedTime","sections","Object","keys","length","push","key","content","LabelGrid","title","variant","component","fontWeight","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","flexGrow","minWidth","color","common","white","strong","direction","marginLeft","flexShrink","marginRight","fontSize","verticalAlign","aria-label","onClick","borderColor","map","section","index","entries","gridTemplateColumns","columnGap","rowGap","labelName","labelValue","wordBreak"],"mappings":"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"}
+{"version":3,"sources":["../../src/ExemplarMetadata/ExemplarMetadataTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, IconButton, Portal, Stack, Typography } from '@mui/material';\nimport type { Exemplar, Labels } from '@perses-dev/spec';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { Fragment } from 'react';\nimport { useResizeObserver } from 'use-resize-observer';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport type { FormatOptions } from '../model/units';\nimport { formatValue } from '../model/units';\nimport {\n  assembleTransform,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '../TimeSeriesTooltip';\nimport type { CursorCoordinates } from '../TimeSeriesTooltip/tooltip-model';\n\nexport interface ExemplarMetadataTooltipProps {\n  exemplar: Exemplar;\n  seriesLabels?: Labels;\n  /**\n   * CSS selector of the element the tooltip should be portaled into (e.g. `#dashboard`).\n   * Passed as-is to `document.querySelector`, so it must be a selector and not a bare element id.\n   */\n  containerId?: string;\n  format?: FormatOptions;\n  /**\n   * Position where the tooltip has been pinned, or null when it follows the mouse.\n   */\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\n/**\n * Tooltip showing an exemplar's metadata (series labels, exemplar labels, value and timestamp).\n * Follows the mouse while hovering an exemplar marker and can be pinned in place, the same way\n * the annotation tooltip works.\n */\nexport function ExemplarMetadataTooltip({\n  exemplar,\n  seriesLabels,\n  containerId,\n  format,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: ExemplarMetadataTooltipProps): ReactElement | null {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  // Fall back to the pinned position: a pinned tooltip can render before any mousemove happened.\n  const transform = assembleTransform(mousePos ?? pinnedPos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const { labels, value, timestamp } = exemplar;\n  const formattedValue = formatValue(value, format);\n  const date = new Date(timestamp);\n  const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n  const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n  // Only sections with content take part in the layout, so no divider is left dangling\n  // when a label set is empty.\n  const sections: Array<{ key: string; content: ReactElement }> = [];\n  if (seriesLabels && Object.keys(seriesLabels).length > 0) {\n    sections.push({ key: 'series-labels', content: <LabelGrid title=\"Series labels\" labels={seriesLabels} /> });\n  }\n  if (Object.keys(labels).length > 0) {\n    sections.push({ key: 'exemplar-labels', content: <LabelGrid title=\"Exemplar labels\" labels={labels} /> });\n  }\n  sections.push({\n    key: 'value',\n    content: (\n      <Box>\n        <Typography variant=\"overline\" component=\"div\">\n          Value\n        </Typography>\n        <Typography fontWeight={700}>{formattedValue}</Typography>\n      </Box>\n    ),\n  });\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography\n                  variant=\"caption\"\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                  })}\n                >\n                  {formattedDate}\n                </Typography>\n                <Typography variant=\"caption\">\n                  <strong>{formattedTime}</strong>\n                </Typography>\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <IconButton\n                      aria-label={UNPIN_TOOLTIP_HELP_TEXT}\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ padding: 0, color: 'inherit' }}\n                    >\n                      <Pin sx={{ fontSize: 16 }} />\n                    </IconButton>\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Stack spacing={1} sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {sections.map((section, index) => (\n              <Fragment key={section.key}>\n                {index > 0 && <Divider sx={(theme) => ({ borderColor: theme.palette.grey['500'] })} />}\n                {section.content}\n              </Fragment>\n            ))}\n          </Stack>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\nfunction LabelGrid({ title, labels }: { title: string; labels: Labels }): ReactElement {\n  const entries = Object.entries(labels);\n  return (\n    <Box>\n      <Typography variant=\"overline\" component=\"div\">\n        {title}\n      </Typography>\n      <Box\n        sx={{\n          display: 'grid',\n          // The first column is sized by the longest label name, so all values line up\n          // at the same horizontal position.\n          gridTemplateColumns: 'minmax(0, max-content) minmax(0, 1fr)',\n          columnGap: 0.5,\n          rowGap: 0.25,\n        }}\n      >\n        {entries.map(([labelName, labelValue]) => (\n          <Fragment key={labelName}>\n            <Typography sx={{ wordBreak: 'break-all' }}>{labelName}:</Typography>\n            <Typography fontWeight={700} sx={{ wordBreak: 'break-all' }}>\n              {labelValue}\n            </Typography>\n          </Fragment>\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","Divider","IconButton","Portal","Stack","Typography","Pin","PinOutline","Fragment","useResizeObserver","useTimeZone","formatValue","assembleTransform","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,OAAO,EAAEC,UAAU,EAAEC,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAEpF,OAAOC,SAAS,sBAAsB;AACtC,OAAOC,gBAAgB,6BAA6B;AAEpD,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,WAAW,QAAQ,iCAA8B;AAE1D,SAASC,WAAW,QAAQ,oBAAiB;AAC7C,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,qBAAqB,EACrBC,yBAAyB,EACzBC,iBAAiB,EACjBC,uBAAuB,EACvBC,gBAAgB,QACX,gCAAuB;AAoB9B;;;;CAIC,GACD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHP"}

package/dist/FontSizeSelector/FontSizeSelector.js

@@ -11,114 +11,146 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { OptionsEditorControl } from "../OptionsEditorLayout/index.js";
 import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
 const FONT_SIZE_OPTIONS = [
     {
-        id: 'default',
-        label: 'Default',
+        id: "default",
+        label: "Default",
         value: undefined
     },
     {
-        id: '12',
-        label: '12',
+        id: "12",
+        label: "12",
         value: 12
     },
     {
-        id: '14',
-        label: '14',
+        id: "14",
+        label: "14",
         value: 14
     },
     {
-        id: '16',
-        label: '16',
+        id: "16",
+        label: "16",
         value: 16
     },
     {
-        id: '20',
-        label: '20',
+        id: "20",
+        label: "20",
         value: 20
     },
     {
-        id: '24',
-        label: '24',
+        id: "24",
+        label: "24",
         value: 24
     },
     {
-        id: '28',
-        label: '28',
+        id: "28",
+        label: "28",
         value: 28
     },
     {
-        id: '32',
-        label: '32',
+        id: "32",
+        label: "32",
         value: 32
     },
     {
-        id: '36',
-        label: '36',
+        id: "36",
+        label: "36",
         value: 36
     },
     {
-        id: '40',
-        label: '40',
+        id: "40",
+        label: "40",
         value: 40
     },
     {
-        id: '48',
-        label: '48',
+        id: "48",
+        label: "48",
         value: 48
     },
     {
-        id: '56',
-        label: '56',
+        id: "56",
+        label: "56",
         value: 56
     },
     {
-        id: '64',
-        label: '64',
+        id: "64",
+        label: "64",
         value: 64
     },
     {
-        id: '72',
-        label: '72',
+        id: "72",
+        label: "72",
         value: 72
     },
     {
-        id: '96',
-        label: '96',
+        id: "96",
+        label: "96",
         value: 96
     },
     {
-        id: '128',
-        label: '128',
+        id: "128",
+        label: "128",
         value: 128
     },
     {
-        id: '160',
-        label: '160',
+        id: "160",
+        label: "160",
         value: 160
     },
     {
-        id: '192',
-        label: '192',
+        id: "192",
+        label: "192",
         value: 192
     }
 ];
-export function FontSizeSelector({ value, onChange }) {
-    const handleFontSizeChange = (_, { value })=>{
-        onChange(value);
-    };
-    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
-        label: "Font Size",
-        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-            value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
-            options: FONT_SIZE_OPTIONS,
-            getOptionLabel: (o)=>o.label,
-            onChange: handleFontSizeChange,
-            disableClearable: true
-        })
-    });
+export function FontSizeSelector(t0) {
+    const $ = _c(7);
+    const { value, onChange } = t0;
+    let t1;
+    if ($[0] !== onChange) {
+        t1 = (_, t2)=>{
+            const { value: value_0 } = t2;
+            onChange(value_0);
+        };
+        $[0] = onChange;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    const handleFontSizeChange = t1;
+    let t2;
+    if ($[2] !== value) {
+        t2 = FONT_SIZE_OPTIONS.find((o)=>o.value === value);
+        $[2] = value;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    let t3;
+    if ($[4] !== handleFontSizeChange || $[5] !== t2) {
+        t3 = /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            label: "Font Size",
+            control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                value: t2,
+                options: FONT_SIZE_OPTIONS,
+                getOptionLabel: _temp,
+                onChange: handleFontSizeChange,
+                disableClearable: true
+            })
+        });
+        $[4] = handleFontSizeChange;
+        $[5] = t2;
+        $[6] = t3;
+    } else {
+        t3 = $[6];
+    }
+    return t3;
+}
+function _temp(o_0) {
+    return o_0.label;
 }
 
 //# sourceMappingURL=FontSizeSelector.js.map

package/dist/FontSizeSelector/FontSizeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { ReactElement } from 'react';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO,SAASE,iBAAiB,EAAEF,KAAK,EAAEG,QAAQ,EAAyB;IACzE,MAAMC,uBAAuB,CAACC,GAAY,EAAEL,KAAK,EAA6B;QAC5EG,SAASH;IACX;IAEA,qBACE,KAACL;QACCI,OAAM;QACNO,uBACE,KAACV;YACCI,OAAOH,kBAAkBU,IAAI,CAAC,CAACC,IAAMA,EAAER,KAAK,KAAKA;YACjDS,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BI,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License |  Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing |  software\n// distributed under the License is distributed on an \"AS IS\" BASIS |\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { ReactElement } from 'react';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;;AAIjC,SAASA,oBAAoB,QAAQ,kCAAyB;AAC9D,SAASC,oBAAoB,QAAQ,mCAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO"}

package/dist/FormEditor/FormActions.js

@@ -11,21 +11,64 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Button, Divider, Stack } from "@mui/material";
-export function FormActions({ action, submitText = 'Save', cancelText = 'Cancel', isReadonly, isValid, onActionChange, onSubmit, onDelete, onCancel, ...props }) {
-    return /*#__PURE__*/ _jsx(Stack, {
-        direction: "row",
-        gap: 1,
-        sx: {
-            marginLeft: 'auto'
-        },
-        ...props,
-        children: action === 'read' ? /*#__PURE__*/ _jsxs(_Fragment, {
+export function FormActions(t0) {
+    const $ = _c(25);
+    let action;
+    let isReadonly;
+    let isValid;
+    let onActionChange;
+    let onCancel;
+    let onDelete;
+    let onSubmit;
+    let props;
+    let t1;
+    let t2;
+    if ($[0] !== t0) {
+        ({ action, submitText: t1, cancelText: t2, isReadonly, isValid, onActionChange, onSubmit, onDelete, onCancel, ...props } = t0);
+        $[0] = t0;
+        $[1] = action;
+        $[2] = isReadonly;
+        $[3] = isValid;
+        $[4] = onActionChange;
+        $[5] = onCancel;
+        $[6] = onDelete;
+        $[7] = onSubmit;
+        $[8] = props;
+        $[9] = t1;
+        $[10] = t2;
+    } else {
+        action = $[1];
+        isReadonly = $[2];
+        isValid = $[3];
+        onActionChange = $[4];
+        onCancel = $[5];
+        onDelete = $[6];
+        onSubmit = $[7];
+        props = $[8];
+        t1 = $[9];
+        t2 = $[10];
+    }
+    const submitText = t1 === undefined ? "Save" : t1;
+    const cancelText = t2 === undefined ? "Cancel" : t2;
+    let t3;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            marginLeft: "auto"
+        };
+        $[11] = t3;
+    } else {
+        t3 = $[11];
+    }
+    let t4;
+    if ($[12] !== action || $[13] !== cancelText || $[14] !== isReadonly || $[15] !== isValid || $[16] !== onActionChange || $[17] !== onCancel || $[18] !== onDelete || $[19] !== onSubmit || $[20] !== submitText) {
+        t4 = action === "read" ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 onActionChange && /*#__PURE__*/ _jsx(Button, {
                     disabled: isReadonly,
                     variant: "contained",
-                    onClick: ()=>onActionChange('update'),
+                    onClick: ()=>onActionChange("update"),
                     children: "Edit"
                 }),
                 onDelete && /*#__PURE__*/ _jsx(Button, {
@@ -39,8 +82,8 @@ export function FormActions({ action, submitText = 'Save', cancelText = 'Cancel'
                     orientation: "vertical",
                     flexItem: true,
                     sx: {
-                        borderColor: (theme)=>theme.palette.grey['500'],
-                        '&.MuiDivider-root': {
+                        borderColor: _temp,
+                        "&.MuiDivider-root": {
                             marginLeft: 2,
                             marginRight: 1
                         }
@@ -68,8 +111,39 @@ export function FormActions({ action, submitText = 'Save', cancelText = 'Cancel'
                     children: cancelText
                 })
             ]
-        })
-    });
+        });
+        $[12] = action;
+        $[13] = cancelText;
+        $[14] = isReadonly;
+        $[15] = isValid;
+        $[16] = onActionChange;
+        $[17] = onCancel;
+        $[18] = onDelete;
+        $[19] = onSubmit;
+        $[20] = submitText;
+        $[21] = t4;
+    } else {
+        t4 = $[21];
+    }
+    let t5;
+    if ($[22] !== props || $[23] !== t4) {
+        t5 = /*#__PURE__*/ _jsx(Stack, {
+            direction: "row",
+            gap: 1,
+            sx: t3,
+            ...props,
+            children: t4
+        });
+        $[22] = props;
+        $[23] = t4;
+        $[24] = t5;
+    } else {
+        t5 = $[24];
+    }
+    return t5;
+}
+function _temp(theme) {
+    return theme.palette.grey["500"];
 }
 
 //# sourceMappingURL=FormActions.js.map

package/dist/FormEditor/FormActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { StackProps } from '@mui/material';\nimport { Button, Divider, Stack } from '@mui/material';\nimport type { Action } from '@perses-dev/client';\nimport type { ReactElement } from 'react';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AAgBvD,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}
+{"version":3,"sources":["../../src/FormEditor/FormActions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { StackProps } from '@mui/material';\nimport { Button, Divider, Stack } from '@mui/material';\nimport type { Action } from '@perses-dev/client';\nimport type { ReactElement } from 'react';\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AAgBvD,OAAO"}