@grafana/components 0.0.36 → 0.0.38

package/dist/esm/components/ComparisonBadge/ComparisonBadge.js

@@ -1,7 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@emotion/css';
 import { GlobalCSSVariables } from '@grafana/design-tokens';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon.js';
+import { ArrowDown } from '../Icons/ArrowDown.js';
+import { ArrowUp } from '../Icons/ArrowUp.js';
+import { Clock } from '../Icons/Clock.js';
+import { Minus } from '../Icons/Minus.js';
 import { calculateComparison } from '../../utils/comparison.js';
 import { formatNumber } from '../../utils/formatters.js';
 import { ComparisonTooltip } from '../ComparisonTooltip/ComparisonTooltip.js';
@@ -11,9 +15,9 @@ const formatCurrency = (value) => {
   return !!value ? `$${formatNumber(value, { precise: true })}` : "N/A";
 };
 const DIRECTION_ICON = {
-  up: "arrow-up",
-  down: "arrow-down",
-  neutral: "minus"
+  up: ArrowUp,
+  down: ArrowDown,
+  neutral: Minus
 };
 const ComparisonBadge = ({
   current,
@@ -24,10 +28,21 @@ const ComparisonBadge = ({
   highlight = false,
   timeframeLabel,
   tooltip = true,
-  hideDelay
+  hideDelay,
+  formatValues = formatCurrency
 }) => {
   const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);
   const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });
+  const formatValueString = (value) => {
+    switch (true) {
+      case (Boolean(formatValues) && typeof formatValues === "function" && typeof value !== "undefined" && value !== null):
+        return formatValues(value);
+      case typeof value === "undefined":
+        return void 0;
+      default:
+        return `${value}`;
+    }
+  };
   const directionIconStyle = (() => {
     switch (true) {
       case direction == "neutral":
@@ -37,16 +52,10 @@ const ComparisonBadge = ({
     }
   })();
   const badgeContent = /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.clockIconWrapper, children: /* @__PURE__ */ jsx(Icon, { name: "clock-nine" }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.clockIconWrapper, children: /* @__PURE__ */ jsx(Icon, { component: Clock }) }),
     /* @__PURE__ */ jsxs("div", { className: styles.trendLabelContainer, children: [
       /* @__PURE__ */ jsxs("span", { className: styles.trendLabel, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.trendIconWrapper, children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: DIRECTION_ICON[direction],
-            className: cx(styles.trendIcon, directionIconStyle)
-          }
-        ) }),
+        /* @__PURE__ */ jsx("span", { className: cx(styles.trendIconWrapper, directionIconStyle), children: /* @__PURE__ */ jsx(Icon, { component: DIRECTION_ICON[direction], size: "lg", strokeWidth: 3 }) }),
         hasComparison && percentageLabel && /* @__PURE__ */ jsx(Fragment, { children: percentageLabel })
       ] }),
       timeframeLabel && /* @__PURE__ */ jsxs("span", { className: styles.timeframeLabel, children: [
@@ -61,8 +70,8 @@ const ComparisonBadge = ({
       ComparisonTooltip,
       {
         trigger: badgeContent,
-        current: formatCurrency(current),
-        previous: formatCurrency(previous),
+        current: formatValueString(current),
+        previous: formatValueString(previous),
         currentLabel,
         previousLabel,
         placement,

package/dist/esm/components/ComparisonBadge/ComparisonBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonBadge.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n  return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n  extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n  current?: number | null;\n  previous?: number | null;\n  highlight?: boolean;\n  timeframeLabel?: string;\n  tooltip?: boolean;\n  hideDelay?: number;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n  up: 'arrow-up',\n  down: 'arrow-down',\n  neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n  current,\n  previous,\n  currentLabel,\n  previousLabel,\n  placement,\n  highlight = false,\n  timeframeLabel,\n  tooltip = true,\n  hideDelay,\n}: ComparisonBadgeProps) => {\n  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n  const directionIconStyle = (() => {\n    switch (true) {\n      case direction == 'neutral':\n        return styles.dash;\n      default:\n        return undefined;\n    }\n  })();\n\n  const badgeContent = (\n    <div className={styles.container}>\n      <div className={styles.clockIconWrapper}>\n        <Icon name=\"clock-nine\" />\n      </div>\n      <div className={styles.trendLabelContainer}>\n        <span className={styles.trendLabel}>\n          <span className={styles.trendIconWrapper}>\n            <Icon\n              name={DIRECTION_ICON[direction]}\n              className={cx(styles.trendIcon, directionIconStyle)}\n            />\n          </span>\n          {hasComparison && percentageLabel && <>{percentageLabel}</>}\n        </span>\n        {timeframeLabel && (\n          <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      {tooltip ? (\n        <ComparisonTooltip\n          trigger={badgeContent}\n          current={formatCurrency(current)}\n          previous={formatCurrency(previous)}\n          currentLabel={currentLabel}\n          previousLabel={previousLabel}\n          placement={placement}\n          hideDelay={hideDelay}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComparisonBadge.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, SVGComponent } from '../Icon';\nimport { ArrowDown, ArrowUp, Clock, Minus } from '../Icons';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n  return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n  extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n  current?: number | null;\n  previous?: number | null;\n  highlight?: boolean;\n  timeframeLabel?: string;\n  tooltip?: boolean;\n  hideDelay?: number;\n  formatValues?: ((value: number) => string) | false;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', SVGComponent> = {\n  up: ArrowUp,\n  down: ArrowDown,\n  neutral: Minus,\n};\n\nexport const ComparisonBadge = ({\n  current,\n  previous,\n  currentLabel,\n  previousLabel,\n  placement,\n  highlight = false,\n  timeframeLabel,\n  tooltip = true,\n  hideDelay,\n  formatValues = formatCurrency,\n}: ComparisonBadgeProps) => {\n  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n  const formatValueString = (value?: number | null): string | undefined => {\n    switch (true) {\n      case Boolean(formatValues) &&\n        typeof formatValues === 'function' &&\n        typeof value !== 'undefined' &&\n        value !== null:\n        return formatValues(value);\n      case typeof value === 'undefined':\n        return undefined;\n      default:\n        return `${value}`;\n    }\n  };\n\n  const directionIconStyle = (() => {\n    switch (true) {\n      case direction == 'neutral':\n        return styles.dash;\n      default:\n        return undefined;\n    }\n  })();\n\n  const badgeContent = (\n    <div className={styles.container}>\n      <div className={styles.clockIconWrapper}>\n        <Icon component={Clock} />\n      </div>\n      <div className={styles.trendLabelContainer}>\n        <span className={styles.trendLabel}>\n          <span className={cx(styles.trendIconWrapper, directionIconStyle)}>\n            <Icon component={DIRECTION_ICON[direction]} size=\"lg\" strokeWidth={3} />\n          </span>\n          {hasComparison && percentageLabel && <>{percentageLabel}</>}\n        </span>\n        {timeframeLabel && (\n          <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      {tooltip ? (\n        <ComparisonTooltip\n          trigger={badgeContent}\n          current={formatValueString(current)}\n          previous={formatValueString(previous)}\n          currentLabel={currentLabel}\n          previousLabel={previousLabel}\n          placement={placement}\n          hideDelay={hideDelay}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js

@@ -15,7 +15,6 @@ const cssVariables$2 = () => {
   };
 };
 const BADGE_HEIGHT = 28;
-const TREND_ICON_SIZE = 20;
 const getComparisonBadgeStyles = ({
   highlight,
   direction,
@@ -99,10 +98,6 @@ const getComparisonBadgeStyles = ({
       width: "16px",
       height: "16px"
     }),
-    trendIcon: css({
-      width: `${TREND_ICON_SIZE}px`,
-      height: `${TREND_ICON_SIZE}px`
-    }),
     dash: css({
       color: legacy.colors.text.secondary
     })

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n      whiteSpace: 'nowrap',\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":["cssVariables"],"mappings":"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"}
+{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n      whiteSpace: 'nowrap',\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":["cssVariables"],"mappings":"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"}

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon.js';
+import { Clock } from '../Icons/Clock.js';
+import { Eye } from '../Icons/Eye.js';
 import { Popover } from '../Popover/Popover.js';
 import { getStyles } from './ComparisonTooltip.styles.js';
 
@@ -8,11 +10,11 @@ const ComparisonTooltip = ({
   placement = "top",
   current,
   previous,
-  previousLabel,
+  previousLabel = "Previous",
   currentLabel = "Current",
   title,
-  currentIcon = "eye",
-  previousIcon = "clock-nine",
+  currentIcon = Eye,
+  previousIcon = Clock,
   hideDelay
 }) => {
   const styles = getStyles();
@@ -22,14 +24,14 @@ const ComparisonTooltip = ({
       /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: currentLabel }),
         /* @__PURE__ */ jsxs("div", { className: styles.value, children: [
-          /* @__PURE__ */ jsx(Icon, { name: currentIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsx(Icon, { component: currentIcon, size: "sm" }),
           /* @__PURE__ */ jsx("span", { children: current || "N/A" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: previousLabel }),
         /* @__PURE__ */ jsxs("div", { className: styles.value, children: [
-          /* @__PURE__ */ jsx(Icon, { name: previousIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsx(Icon, { component: previousIcon, size: "sm" }),
           /* @__PURE__ */ jsx("span", { children: previous || "N/A" })
         ] })
       ] })

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTooltip.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.tsx"],"sourcesContent":["import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverWithTriggerProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverWithTriggerProps, 'children'> {\n  current?: string;\n  previous?: string;\n  previousLabel?: string;\n  currentLabel?: string;\n  title?: string;\n  currentIcon?: IconName;\n  previousIcon?: IconName;\n  hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n  trigger,\n  placement = 'top',\n  current,\n  previous,\n  previousLabel,\n  currentLabel = 'Current',\n  title,\n  currentIcon = 'eye',\n  previousIcon = 'clock-nine',\n  hideDelay,\n}: ComparisonTooltipProps) => {\n  const styles = getStyles();\n\n  return (\n    <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n      <div className={styles.wrapper}>\n        {title && <div className={styles.heading}>{title}</div>}\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{currentLabel}</div>\n            <div className={styles.value}>\n              <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n              <span>{current || 'N/A'}</span>\n            </div>\n          </div>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{previousLabel}</div>\n            <div className={styles.value}>\n              <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n              <span>{previous || 'N/A'}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;;AAeO,MAAM,oBAAoB,CAAC;AAAA,EAChC,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA,GAAe,YAAA;AAAA,EACf;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBACE,GAAA,CAAC,WAAQ,OAAA,EAAkB,SAAA,EAAsB,WAC/C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACpB,QAAA,EAAA;AAAA,IAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACjD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACnD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAK,IAAA,EAAM,WAAA,EAAa,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC3D,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,OAAA,IAAW,KAAA,EAAM;AAAA,SAAA,EAC1B;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAK,IAAA,EAAM,YAAA,EAAc,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC5D,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,KAAA,EAAM;AAAA,SAAA,EAC3B;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ComparisonTooltip.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.tsx"],"sourcesContent":["import { Icon, SVGComponent } from '../Icon';\nimport { Clock, Eye } from '../Icons';\nimport { Popover, PopoverWithTriggerProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverWithTriggerProps, 'children'> {\n  current?: string;\n  previous?: string;\n  previousLabel?: string;\n  currentLabel?: string;\n  title?: string;\n  currentIcon?: SVGComponent;\n  previousIcon?: SVGComponent;\n  hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n  trigger,\n  placement = 'top',\n  current,\n  previous,\n  previousLabel = 'Previous',\n  currentLabel = 'Current',\n  title,\n  currentIcon = Eye,\n  previousIcon = Clock,\n  hideDelay,\n}: ComparisonTooltipProps) => {\n  const styles = getStyles();\n\n  return (\n    <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n      <div className={styles.wrapper}>\n        {title && <div className={styles.heading}>{title}</div>}\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{currentLabel}</div>\n            <div className={styles.value}>\n              <Icon component={currentIcon} size=\"sm\" />\n              <span>{current || 'N/A'}</span>\n            </div>\n          </div>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{previousLabel}</div>\n            <div className={styles.value}>\n              <Icon component={previousIcon} size=\"sm\" />\n              <span>{previous || 'N/A'}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,oBAAoB,CAAC;AAAA,EAChC,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA,GAAgB,UAAA;AAAA,EAChB,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,WAAA,GAAc,GAAA;AAAA,EACd,YAAA,GAAe,KAAA;AAAA,EACf;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBACE,GAAA,CAAC,WAAQ,OAAA,EAAkB,SAAA,EAAsB,WAC/C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACpB,QAAA,EAAA;AAAA,IAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACjD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACnD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,WAAA,EAAa,IAAA,EAAK,IAAA,EAAK,CAAA;AAAA,0BACxC,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,OAAA,IAAW,KAAA,EAAM;AAAA,SAAA,EAC1B;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,EAAc,IAAA,EAAK,IAAA,EAAK,CAAA;AAAA,0BACzC,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,KAAA,EAAM;AAAA,SAAA,EAC3B;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js

@@ -50,9 +50,6 @@ const getStyles$6 = () => {
       fontFamily: typography.fontFamily.monospace,
       fontSize: typography.fontSize.monospace.sm,
       color: legacy.colors.text.secondary
-    }),
-    icon: css({
-      flexShrink: 0
     })
   };
 };

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComparisonTooltip.styles.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const background = legacy.colors.background.primary;\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n"],"names":["getStyles"],"mappings":";;;AAGO,MAAMA,cAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAE5C,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA;AAAA,MACA,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA;AAAA,KACrC,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF;;;;"}
+{"version":3,"file":"ComparisonTooltip.styles.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const background = legacy.colors.background.primary;\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":["getStyles"],"mappings":";;;AAGO,MAAMA,cAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAE5C,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA;AAAA,MACA,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA;AAAA,KACrC,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B;AAAA,GACH;AACF;;;;"}

package/dist/esm/components/Icon/Icon.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ICON_SIZES } from './types.js';
+import { getStyles } from './Icon.styles.js';
+
+const Icon = forwardRef(
+  ({ size = "md", strokeWidth = 2, component: SVGComponent2, isAriaHidden, title }, forwardedRef) => {
+    const styles = getStyles({ strokeWidth });
+    const svgProps = {
+      "aria-hidden": isAriaHidden,
+      title: isAriaHidden ? void 0 : title,
+      height: ICON_SIZES[size],
+      width: ICON_SIZES[size]
+    };
+    return /* @__PURE__ */ jsx(SVGComponent2, { ref: forwardedRef, className: styles, ...svgProps });
+  }
+);
+Icon.displayName = "Icon";
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/dist/esm/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { IconSize, ICON_SIZES, SVGComponent, SVGComponentProps } from './types';\nimport { getStyles } from './Icon.styles';\n\nexport interface IconProps {\n  /**\n   * How big to render the icon\n   */\n  size?: IconSize;\n\n  /**\n   * Optional stroke width for the icon elements.\n   */\n  strokeWidth?: number;\n\n  /**\n   * Icon component to render\n   */\n  component: SVGComponent;\n\n  /**\n   * Should the icon be explicitly hidden from the accessibility tree? This\n   * should be used if the icon is placed inside of another interactive element\n   * (e.g. a button) which should instead dictate the description (e.g. ‘delete\n   * button’ rather than ‘delete button, trash icon’)\n   */\n  isAriaHidden?: boolean;\n\n  /**\n   * String to override the default icon title element with; this will be\n   * ignored if isAriaHidden is true\n   */\n  title?: string;\n}\n\n/**\n * A component to render an SVG icon.\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n  (\n    { size = 'md', strokeWidth = 2, component: SVGComponent, isAriaHidden, title },\n    forwardedRef,\n  ) => {\n    const styles = getStyles({ strokeWidth });\n\n    const svgProps: SVGComponentProps = {\n      'aria-hidden': isAriaHidden,\n      title: isAriaHidden ? undefined : title,\n      height: ICON_SIZES[size],\n      width: ICON_SIZES[size],\n    };\n\n    return <SVGComponent ref={forwardedRef} className={styles} {...svgProps} />;\n  },\n);\n\nIcon.displayName = 'Icon';\n"],"names":["SVGComponent"],"mappings":";;;;;AAsCO,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,CACE,EAAE,IAAA,GAAO,IAAA,EAAM,WAAA,GAAc,CAAA,EAAG,SAAA,EAAWA,aAAAA,EAAc,YAAA,EAAc,KAAA,EAAM,EAC7E,YAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,SAAA,CAAU,EAAE,WAAA,EAAa,CAAA;AAExC,IAAA,MAAM,QAAA,GAA8B;AAAA,MAClC,aAAA,EAAe,YAAA;AAAA,MACf,KAAA,EAAO,eAAe,MAAA,GAAY,KAAA;AAAA,MAClC,MAAA,EAAQ,WAAW,IAAI,CAAA;AAAA,MACvB,KAAA,EAAO,WAAW,IAAI;AAAA,KACxB;AAEA,IAAA,uBAAO,GAAA,CAACA,eAAA,EAAa,GAAA,EAAK,cAAc,SAAA,EAAW,MAAA,EAAS,GAAG,QAAA,EAAU,CAAA;AAAA,EAC3E;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/esm/components/Icon/Icon.styles.js

@@ -0,0 +1,16 @@
+import { css } from '@emotion/css';
+
+const getStyles$8 = ({ strokeWidth }) => css({
+  display: "inline-block",
+  verticalAlign: "middle",
+  lineHeight: 0,
+  vectorEffect: "non-scaling-stroke",
+  strokeWidth,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  stroke: "currentColor",
+  fill: "none"
+});
+
+export { getStyles$8 as getStyles };
+//# sourceMappingURL=Icon.styles.js.map

package/dist/esm/components/Icon/Icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","sources":["../../../../src/components/Icon/Icon.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\n\nexport const getStyles = ({ strokeWidth }: { strokeWidth: number }) =>\n  css({\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    lineHeight: 0,\n    vectorEffect: 'non-scaling-stroke',\n    strokeWidth,\n    strokeLinecap: 'round',\n    strokeLinejoin: 'round',\n    stroke: 'currentColor',\n    fill: 'none',\n  });\n"],"names":["getStyles"],"mappings":";;AAEO,MAAMA,WAAA,GAAY,CAAC,EAAE,WAAA,OAC1B,GAAA,CAAI;AAAA,EACF,OAAA,EAAS,cAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,UAAA,EAAY,CAAA;AAAA,EACZ,YAAA,EAAc,oBAAA;AAAA,EACd,WAAA;AAAA,EACA,aAAA,EAAe,OAAA;AAAA,EACf,cAAA,EAAgB,OAAA;AAAA,EAChB,MAAA,EAAQ,cAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAC;;;;"}

package/dist/esm/components/Icon/types.js

@@ -0,0 +1,12 @@
+const ICON_SIZES = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 24,
+  xxl: 36,
+  xxxl: 48
+};
+
+export { ICON_SIZES };
+//# sourceMappingURL=types.js.map

package/dist/esm/components/Icon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/Icon/types.ts"],"sourcesContent":["export type SVGComponentProps = React.SVGProps<SVGSVGElement> & {\n  title?: string | null;\n  className?: string;\n};\n\nexport type SVGComponent = (props: SVGComponentProps) => React.ReactElement;\n\n/**\n * Should we revisit this list of sizes? there isn’t a great deal of difference\n * in size between xs and lg (12px to 18px)\n */\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';\n\nexport const ICON_SIZES: Record<IconSize, number> = {\n  xs: 12,\n  sm: 14,\n  md: 16,\n  lg: 18,\n  xl: 24,\n  xxl: 36,\n  xxxl: 48,\n};\n"],"names":[],"mappings":"AAaO,MAAM,UAAA,GAAuC;AAAA,EAClD,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,GAAA,EAAK,EAAA;AAAA,EACL,IAAA,EAAM;AACR;;;;"}

package/dist/esm/components/Icons/AArrowDown.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AArrowDown = ({ title = "A arrow down", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "m14 12 4 4 4-4m-4 4V7M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392" })
+] });
+
+export { AArrowDown };
+//# sourceMappingURL=AArrowDown.js.map

package/dist/esm/components/Icons/AArrowDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AArrowDown.js","sources":["../../../../src/components/Icons/AArrowDown.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AArrowDown: SVGComponent = ({ title = 'A arrow down', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"m14 12 4 4 4-4m-4 4V7M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,UAAA,GAA2B,CAAC,EAAE,KAAA,GAAQ,cAAA,EAAgB,GAAG,KAAA,EAAM,qBAC1E,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8EAAA,EAA+E;AAAA,CAAA,EACzF;;;;"}

package/dist/esm/components/Icons/AArrowUp.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AArrowUp = ({ title = "A arrow up", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "m14 11 4-4 4 4m-4 5V7M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392" })
+] });
+
+export { AArrowUp };
+//# sourceMappingURL=AArrowUp.js.map

package/dist/esm/components/Icons/AArrowUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AArrowUp.js","sources":["../../../../src/components/Icons/AArrowUp.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AArrowUp: SVGComponent = ({ title = 'A arrow up', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"m14 11 4-4 4 4m-4 5V7M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,QAAA,GAAyB,CAAC,EAAE,KAAA,GAAQ,YAAA,EAAc,GAAG,KAAA,EAAM,qBACtE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8EAAA,EAA+E;AAAA,CAAA,EACzF;;;;"}

package/dist/esm/components/Icons/ALargeSmall.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ALargeSmall = ({ title = "A large small", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392" })
+] });
+
+export { ALargeSmall };
+//# sourceMappingURL=ALargeSmall.js.map

package/dist/esm/components/Icons/ALargeSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ALargeSmall.js","sources":["../../../../src/components/Icons/ALargeSmall.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const ALargeSmall: SVGComponent = ({ title = 'A large small', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,WAAA,GAA4B,CAAC,EAAE,KAAA,GAAQ,eAAA,EAAiB,GAAG,KAAA,EAAM,qBAC5E,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,wHAAA,EAAyH;AAAA,CAAA,EACnI;;;;"}

package/dist/esm/components/Icons/Accessibility.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Accessibility = ({ title = "Accessibility", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "16", cy: "4", r: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "m18 19 1-7-6 1M5 8l3-3 5.5 3-2.36 3.5m-6.9 3a5 5 0 0 0 6.88 6" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.76 17.5a5 5 0 0 0-6.88-6" })
+] });
+
+export { Accessibility };
+//# sourceMappingURL=Accessibility.js.map

package/dist/esm/components/Icons/Accessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accessibility.js","sources":["../../../../src/components/Icons/Accessibility.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const Accessibility: SVGComponent = ({ title = 'Accessibility', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"16\" cy=\"4\" r=\"1\"></circle>\n    <path d=\"m18 19 1-7-6 1M5 8l3-3 5.5 3-2.36 3.5m-6.9 3a5 5 0 0 0 6.88 6\"></path>\n    <path d=\"M13.76 17.5a5 5 0 0 0-6.88-6\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,aAAA,GAA8B,CAAC,EAAE,KAAA,GAAQ,eAAA,EAAiB,GAAG,KAAA,EAAM,qBAC9E,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,GAAA,EAAI,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+DAAA,EAAgE,CAAA;AAAA,kBACxE,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8BAAA,EAA+B;AAAA,CAAA,EACzC;;;;"}

package/dist/esm/components/Icons/Activity.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Activity = ({ title = "Activity", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" })
+] });
+
+export { Activity };
+//# sourceMappingURL=Activity.js.map

package/dist/esm/components/Icons/Activity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Activity.js","sources":["../../../../src/components/Icons/Activity.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const Activity: SVGComponent = ({ title = 'Activity', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,QAAA,GAAyB,CAAC,EAAE,KAAA,GAAQ,UAAA,EAAY,GAAG,KAAA,EAAM,qBACpE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4HAAA,EAA6H;AAAA,CAAA,EACvI;;;;"}

package/dist/esm/components/Icons/ActivitySquare.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ActivitySquare = ({ title = "Activity square", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 12h-2l-2 5-2-10-2 5H7" })
+] });
+
+export { ActivitySquare };
+//# sourceMappingURL=ActivitySquare.js.map

package/dist/esm/components/Icons/ActivitySquare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitySquare.js","sources":["../../../../src/components/Icons/ActivitySquare.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const ActivitySquare: SVGComponent = ({ title = 'Activity square', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"></rect>\n    <path d=\"M17 12h-2l-2 5-2-10-2 5H7\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,cAAA,GAA+B,CAAC,EAAE,KAAA,GAAQ,iBAAA,EAAmB,GAAG,KAAA,EAAM,qBACjF,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,CAAA,EAAE,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,CAAA;AAAA,kBAChD,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,2BAAA,EAA4B;AAAA,CAAA,EACtC;;;;"}

package/dist/esm/components/Icons/AirVent.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AirVent = ({ title = "Air vent", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "M18 17.5a2.5 2.5 0 1 1-4 2.03V12m-8 0H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 8h12M6.6 15.572A2 2 0 1 0 10 17v-5" })
+] });
+
+export { AirVent };
+//# sourceMappingURL=AirVent.js.map

package/dist/esm/components/Icons/AirVent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AirVent.js","sources":["../../../../src/components/Icons/AirVent.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AirVent: SVGComponent = ({ title = 'Air vent', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"M18 17.5a2.5 2.5 0 1 1-4 2.03V12m-8 0H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 8h12M6.6 15.572A2 2 0 1 0 10 17v-5\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,OAAA,GAAwB,CAAC,EAAE,KAAA,GAAQ,UAAA,EAAY,GAAG,KAAA,EAAM,qBACnE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gJAAA,EAAiJ;AAAA,CAAA,EAC3J;;;;"}

package/dist/esm/components/Icons/Airplay.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Airplay = ({ title = "Airplay", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" }),
+  /* @__PURE__ */ jsx("path", { d: "m12 15 5 6H7Z" })
+] });
+
+export { Airplay };
+//# sourceMappingURL=Airplay.js.map

package/dist/esm/components/Icons/Airplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Airplay.js","sources":["../../../../src/components/Icons/Airplay.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const Airplay: SVGComponent = ({ title = 'Airplay', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"></path>\n    <path d=\"m12 15 5 6H7Z\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,OAAA,GAAwB,CAAC,EAAE,KAAA,GAAQ,SAAA,EAAW,GAAG,KAAA,EAAM,qBAClE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4EAAA,EAA6E,CAAA;AAAA,kBACrF,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,eAAA,EAAgB;AAAA,CAAA,EAC1B;;;;"}

package/dist/esm/components/Icons/AlarmCheck.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmCheck = ({ title = "Alarm check", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13l2 2 4-4" })
+] });
+
+export { AlarmCheck };
+//# sourceMappingURL=AlarmCheck.js.map

package/dist/esm/components/Icons/AlarmCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmCheck.js","sources":["../../../../src/components/Icons/AlarmCheck.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmCheck: SVGComponent = ({ title = 'Alarm check', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13l2 2 4-4\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,UAAA,GAA2B,CAAC,EAAE,KAAA,GAAQ,aAAA,EAAe,GAAG,KAAA,EAAM,qBACzE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gEAAA,EAAiE;AAAA,CAAA,EAC3E;;;;"}

package/dist/esm/components/Icons/AlarmClock.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmClock = ({ title = "Alarm clock", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4l2 2M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21" })
+] });
+
+export { AlarmClock };
+//# sourceMappingURL=AlarmClock.js.map

package/dist/esm/components/Icons/AlarmClock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmClock.js","sources":["../../../../src/components/Icons/AlarmClock.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmClock: SVGComponent = ({ title = 'Alarm clock', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M12 9v4l2 2M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,UAAA,GAA2B,CAAC,EAAE,KAAA,GAAQ,aAAA,EAAe,GAAG,KAAA,EAAM,qBACzE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8DAAA,EAA+D;AAAA,CAAA,EACzE;;;;"}

package/dist/esm/components/Icons/AlarmClockCheck.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmClockCheck = ({ title = "Alarm clock check", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13l2 2 4-4" })
+] });
+
+export { AlarmClockCheck };
+//# sourceMappingURL=AlarmClockCheck.js.map

package/dist/esm/components/Icons/AlarmClockCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmClockCheck.js","sources":["../../../../src/components/Icons/AlarmClockCheck.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmClockCheck: SVGComponent = ({ title = 'Alarm clock check', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13l2 2 4-4\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,eAAA,GAAgC,CAAC,EAAE,KAAA,GAAQ,mBAAA,EAAqB,GAAG,KAAA,EAAM,qBACpF,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gEAAA,EAAiE;AAAA,CAAA,EAC3E;;;;"}

package/dist/esm/components/Icons/AlarmClockMinus.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmClockMinus = ({ title = "Alarm clock minus", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13h6" })
+] });
+
+export { AlarmClockMinus };
+//# sourceMappingURL=AlarmClockMinus.js.map

package/dist/esm/components/Icons/AlarmClockMinus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmClockMinus.js","sources":["../../../../src/components/Icons/AlarmClockMinus.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmClockMinus: SVGComponent = ({ title = 'Alarm clock minus', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13h6\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,eAAA,GAAgC,CAAC,EAAE,KAAA,GAAQ,mBAAA,EAAqB,GAAG,KAAA,EAAM,qBACpF,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0DAAA,EAA2D;AAAA,CAAA,EACrE;;;;"}

package/dist/esm/components/Icons/AlarmClockOff.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmClockOff = ({ title = "Alarm clock off", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("path", { d: "M6.87 6.87a8 8 0 1 0 11.26 11.26m1.77-3.88a8 8 0 0 0-9.15-9.15M22 6l-3-3M6.26 18.67 4 21M2 2l20 20M4 4 2 6" })
+] });
+
+export { AlarmClockOff };
+//# sourceMappingURL=AlarmClockOff.js.map

package/dist/esm/components/Icons/AlarmClockOff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmClockOff.js","sources":["../../../../src/components/Icons/AlarmClockOff.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmClockOff: SVGComponent = ({ title = 'Alarm clock off', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <path d=\"M6.87 6.87a8 8 0 1 0 11.26 11.26m1.77-3.88a8 8 0 0 0-9.15-9.15M22 6l-3-3M6.26 18.67 4 21M2 2l20 20M4 4 2 6\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,aAAA,GAA8B,CAAC,EAAE,KAAA,GAAQ,iBAAA,EAAmB,GAAG,KAAA,EAAM,qBAChF,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,kBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4GAAA,EAA6G;AAAA,CAAA,EACvH;;;;"}

package/dist/esm/components/Icons/AlarmClockPlus.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmClockPlus = ({ title = "Alarm clock plus", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21m-8-11v6m-3-3h6" })
+] });
+
+export { AlarmClockPlus };
+//# sourceMappingURL=AlarmClockPlus.js.map

package/dist/esm/components/Icons/AlarmClockPlus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmClockPlus.js","sources":["../../../../src/components/Icons/AlarmClockPlus.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmClockPlus: SVGComponent = ({ title = 'Alarm clock plus', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21m-8-11v6m-3-3h6\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,cAAA,GAA+B,CAAC,EAAE,KAAA,GAAQ,kBAAA,EAAoB,GAAG,KAAA,EAAM,qBAClF,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kEAAA,EAAmE;AAAA,CAAA,EAC7E;;;;"}

package/dist/esm/components/Icons/AlarmMinus.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmMinus = ({ title = "Alarm minus", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13h6" })
+] });
+
+export { AlarmMinus };
+//# sourceMappingURL=AlarmMinus.js.map

package/dist/esm/components/Icons/AlarmMinus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlarmMinus.js","sources":["../../../../src/components/Icons/AlarmMinus.tsx"],"sourcesContent":["import type { SVGComponent } from '../Icon/types';\n\nexport const AlarmMinus: SVGComponent = ({ title = 'Alarm minus', ...props }) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    {title && <title>{title}</title>}\n    <circle cx=\"12\" cy=\"13\" r=\"8\"></circle>\n    <path d=\"M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21M9 13h6\"></path>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEO,MAAM,UAAA,GAA2B,CAAC,EAAE,KAAA,GAAQ,aAAA,EAAe,GAAG,KAAA,EAAM,qBACzE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAa,GAAG,KAAA,EAC1B,QAAA,EAAA;AAAA,EAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACvB,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,kBAC9B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0DAAA,EAA2D;AAAA,CAAA,EACrE;;;;"}

package/dist/esm/components/Icons/AlarmPlus.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const AlarmPlus = ({ title = "Alarm plus", ...props }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", ...props, children: [
+  title && /* @__PURE__ */ jsx("title", { children: title }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 3 2 6m20 0-3-3M6.38 18.7 4 21m13.64-2.33L20 21m-8-11v6m-3-3h6" })
+] });
+
+export { AlarmPlus };
+//# sourceMappingURL=AlarmPlus.js.map