@planningcenter/chat-react-native 1.6.2-rc.2 → 1.6.2-rc.3

package/build/components/display/badge.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+declare const APPEARANCES: {
+    readonly error: "error";
+    readonly info: "info";
+    readonly neutral: "neutral";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES];
+declare const VARIANTS: {
+    readonly default: "default";
+    readonly meta: "meta";
+    readonly metaSubtle: "metaSubtle";
+};
+type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS];
+declare const LOGO_NAMES: {
+    readonly groups: "groups";
+    readonly services: "services";
+};
+type PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES];
+interface BadgeProps {
+    /**
+     * Renders the main text.
+     */
+    label: string;
+    /**
+     * Renders secondary meta text to the right of the label.
+     */
+    metaLabel?: string;
+    /**
+     * Changes the status color for the badge and icon.
+     */
+    appearance?: AppearanceUnion;
+    /**
+     * Changes form of the logo to support a meta label and badge
+     */
+    variant?: VariantUnion;
+    /**
+     * Adds a product logo to the left of the text.
+     */
+    productLogoName?: PoductLogoNameUnion;
+    /**
+     * Shows an icon of the user choice to the left of the text.
+     */
+    iconName?: string;
+    /**
+     * Styles badge wrapper.
+     */
+    style?: ViewStyle;
+    /**
+     * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+     */
+    maxFontSizeMultiplier?: number;
+}
+export declare function Badge({ appearance, metaLabel, style, iconName, label, productLogoName, variant, maxFontSizeMultiplier, }: BadgeProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/build/components/display/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAA;AAYxD,QAAA,MAAM,WAAW;;;;;;CAMP,CAAA;AAEV,KAAK,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAA;AAWrE,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,QAAA,MAAM,UAAU;;;CAGN,CAAA;AAEV,KAAK,mBAAmB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAA;AAWvE,UAAU,UAAU;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,GACtB,EAAE,UAAU,qBA4BZ"}

package/build/components/display/badge.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { useFontScale, useTheme } from '../../hooks';
+import { Icon } from './icon';
+import { Text } from './text';
+import { platformFontWeightMedium, space } from '../../utils';
+import { tokens } from '../../vendor/tapestry/tokens';
+// =================================
+// ====== Constants ================
+// =================================
+const APPEARANCES = {
+    error: 'error',
+    info: 'info',
+    neutral: 'neutral',
+    success: 'success',
+    warning: 'warning',
+};
+const VARIANTS = {
+    default: 'default',
+    meta: 'meta',
+    metaSubtle: 'metaSubtle',
+};
+const LOGO_NAMES = {
+    groups: 'groups',
+    services: 'services',
+};
+const PRODUCT_LOGO_COMPONENT_MAP = {
+    groups: GroupsLogo,
+    services: ServicesIcon,
+};
+export function Badge({ appearance = 'neutral', metaLabel, style, iconName, label, productLogoName, variant = 'default', maxFontSizeMultiplier, }) {
+    const styles = useStyles({ appearance, maxFontSizeMultiplier, variant });
+    const { showBadgeLogo } = useTheme();
+    const isMetaSubtle = variant === 'metaSubtle';
+    const isMeta = variant === 'meta';
+    const hasMetaLabel = Boolean(metaLabel);
+    const showLogo = showBadgeLogo && productLogoName && isMeta;
+    const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName];
+    const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label;
+    return (<View style={[styles.badgeWrapper, style]}>
+      <View style={styles.badge}>
+        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize}/>}
+        {iconName && <Icon name={iconName} style={styles.icon}/>}
+        <Text variant="footnote" style={styles.label}>
+          {badgeLabel}
+        </Text>
+      </View>
+      {hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={1}>
+          {metaLabel}
+        </Text>)}
+    </View>);
+}
+// =================================
+// ====== Styles ===================
+// =================================
+const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'default', }) => {
+    const { colors } = useTheme();
+    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const apparenceColorMap = {
+        error: {
+            background: colors.statusErrorBackground,
+            text: colors.statusErrorText,
+            icon: colors.statusErrorIcon,
+        },
+        info: {
+            background: colors.statusInfoBackground,
+            text: colors.statusInfoText,
+            icon: colors.statusInfoIcon,
+        },
+        neutral: {
+            background: colors.statusNeutralBackground,
+            text: colors.statusNeutralText,
+            icon: colors.statusNeutralIcon,
+        },
+        success: {
+            background: colors.statusSuccessBackground,
+            text: colors.statusSuccessText,
+            icon: colors.statusSuccessIcon,
+        },
+        warning: {
+            background: colors.statusWarningBackground,
+            text: colors.statusWarningText,
+            icon: colors.statusWarningIcon,
+        },
+    };
+    const badgePaddingHorizontal = space(1) * fontScale;
+    const badgePaddingVertical = space(0.5) * fontScale;
+    const badgeGap = space(0.5) * fontScale;
+    const badgeFontSize = 12;
+    const variantStylesMap = {
+        default: {
+            gap: badgeGap,
+            backgroundColor: apparenceColorMap[appearance].background,
+            metaLabelPaddingLeft: badgePaddingHorizontal,
+            paddingHorizontal: badgePaddingHorizontal,
+            paddingVertical: badgePaddingVertical,
+            borderWidth: tokens.borderSizeDefault * fontScale,
+            borderRadius: tokens.borderRadiusMd,
+            textColor: apparenceColorMap[appearance].text,
+            fontWeight: 'normal',
+        },
+        meta: {
+            gap: badgeGap,
+            backgroundColor: apparenceColorMap[appearance].background,
+            metaLabelPaddingLeft: badgePaddingHorizontal,
+            paddingHorizontal: badgePaddingHorizontal,
+            paddingVertical: badgePaddingVertical,
+            borderWidth: tokens.borderSizeDefault * fontScale,
+            borderRadius: tokens.borderRadiusMd,
+            textColor: apparenceColorMap[appearance].text,
+            fontWeight: platformFontWeightMedium,
+        },
+        metaSubtle: {
+            gap: badgeGap,
+            backgroundColor: 'transparent',
+            metaLabelPaddingLeft: badgeGap,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            borderWidth: 0,
+            borderRadius: 0,
+            textColor: colors.textColorDefaultSecondary,
+            fontWeight: platformFontWeightMedium,
+        },
+    };
+    return StyleSheet.create({
+        badgeWrapper: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: variantStylesMap[variant].borderRadius,
+            borderWidth: variantStylesMap[variant].borderWidth,
+            borderColor: apparenceColorMap[appearance].background,
+        },
+        badge: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: variantStylesMap[variant].gap,
+            paddingVertical: variantStylesMap[variant].paddingVertical,
+            paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
+            backgroundColor: variantStylesMap[variant].backgroundColor,
+            borderRadius: variantStylesMap[variant].borderRadius - 2,
+        },
+        icon: {
+            color: apparenceColorMap[appearance].icon,
+            fontSize: badgeFontSize,
+        },
+        logo: {
+            fontSize: badgeFontSize * fontScale,
+        },
+        label: {
+            color: variantStylesMap[variant].textColor,
+            fontWeight: variantStylesMap[variant].fontWeight,
+            fontSize: badgeFontSize,
+        },
+        metaLabel: {
+            paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
+            fontSize: badgeFontSize,
+            flexShrink: 1,
+            paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
+        },
+    });
+};
+function GroupsLogo({ logoSize }) {
+    return (<Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
+      <Path d="M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z" fill="url(#paint0_linear_2632_26363)"/>
+      <Defs>
+        <LinearGradient id="paint0_linear_2632_26363" x1={-5.6338} y1={5.6338} x2={5.6338} y2={16.9014} gradientUnits="userSpaceOnUse">
+          <Stop stopColor="#FF962D"/>
+          <Stop offset={1} stopColor="#FC7638"/>
+        </LinearGradient>
+      </Defs>
+    </Svg>);
+}
+function ServicesIcon({ logoSize }) {
+    return (<Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
+      <Path fillRule="evenodd" clipRule="evenodd" d="M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z" fill="url(#paint0_linear_2632_56586)"/>
+      <Defs>
+        <LinearGradient id="paint0_linear_2632_56586" x1={-5.51759} y1={5.6338} x2={5.75001} y2={16.9014} gradientUnits="userSpaceOnUse">
+          <Stop stopColor="#6BB23D"/>
+          <Stop offset={1} stopColor="#659630"/>
+        </LinearGradient>
+      </Defs>
+    </Svg>);
+}
+//# sourceMappingURL=badge.js.map

package/build/components/display/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ViewStyle, TextStyle } from 'react-native'\nimport Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { Icon } from './icon'\nimport { Text } from './text'\nimport { platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst APPEARANCES = {\n  error: 'error',\n  info: 'info',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n} as const\n\ntype AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]\n\ntype AppearanceColors = Record<\n  AppearanceUnion,\n  {\n    background: string\n    text: string\n    icon: string\n  }\n>\n\nconst VARIANTS = {\n  default: 'default',\n  meta: 'meta',\n  metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n  VariantUnion,\n  {\n    backgroundColor: string\n    paddingHorizontal: number\n    paddingVertical: number\n    borderWidth: number\n    borderRadius: number\n    textColor: string\n    gap: number\n    metaLabelPaddingLeft: number\n    fontWeight: TextStyle['fontWeight']\n  }\n>\n\nconst LOGO_NAMES = {\n  groups: 'groups',\n  services: 'services',\n} as const\n\ntype PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES]\n\nconst PRODUCT_LOGO_COMPONENT_MAP = {\n  groups: GroupsLogo,\n  services: ServicesIcon,\n} as const\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface BadgeProps {\n  /**\n   * Renders the main text.\n   */\n  label: string\n  /**\n   * Renders secondary meta text to the right of the label.\n   */\n  metaLabel?: string\n  /**\n   * Changes the status color for the badge and icon.\n   */\n  appearance?: AppearanceUnion\n  /**\n   * Changes form of the logo to support a meta label and badge\n   */\n  variant?: VariantUnion\n  /**\n   * Adds a product logo to the left of the text.\n   */\n  productLogoName?: PoductLogoNameUnion\n  /**\n   * Shows an icon of the user choice to the left of the text.\n   */\n  iconName?: string\n  /**\n   * Styles badge wrapper.\n   */\n  style?: ViewStyle\n  /**\n   * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n   */\n  maxFontSizeMultiplier?: number\n}\n\nexport function Badge({\n  appearance = 'neutral',\n  metaLabel,\n  style,\n  iconName,\n  label,\n  productLogoName,\n  variant = 'default',\n  maxFontSizeMultiplier,\n}: BadgeProps) {\n  const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n  const { showBadgeLogo } = useTheme()\n\n  const isMetaSubtle = variant === 'metaSubtle'\n  const isMeta = variant === 'meta'\n  const hasMetaLabel = Boolean(metaLabel)\n\n  const showLogo = showBadgeLogo && productLogoName && isMeta\n  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n  const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n  return (\n    <View style={[styles.badgeWrapper, style]}>\n      <View style={styles.badge}>\n        {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n        {iconName && <Icon name={iconName} style={styles.icon} />}\n        <Text variant=\"footnote\" style={styles.label}>\n          {badgeLabel}\n        </Text>\n      </View>\n      {hasMetaLabel && (\n        <Text variant=\"footnote\" style={styles.metaLabel} numberOfLines={1}>\n          {metaLabel}\n        </Text>\n      )}\n    </View>\n  )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n  appearance = 'neutral',\n  maxFontSizeMultiplier,\n  variant = 'default',\n}: Partial<BadgeProps>) => {\n  const { colors } = useTheme()\n  const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n  const apparenceColorMap: AppearanceColors = {\n    error: {\n      background: colors.statusErrorBackground,\n      text: colors.statusErrorText,\n      icon: colors.statusErrorIcon,\n    },\n    info: {\n      background: colors.statusInfoBackground,\n      text: colors.statusInfoText,\n      icon: colors.statusInfoIcon,\n    },\n    neutral: {\n      background: colors.statusNeutralBackground,\n      text: colors.statusNeutralText,\n      icon: colors.statusNeutralIcon,\n    },\n    success: {\n      background: colors.statusSuccessBackground,\n      text: colors.statusSuccessText,\n      icon: colors.statusSuccessIcon,\n    },\n    warning: {\n      background: colors.statusWarningBackground,\n      text: colors.statusWarningText,\n      icon: colors.statusWarningIcon,\n    },\n  }\n\n  const badgePaddingHorizontal = space(1) * fontScale\n  const badgePaddingVertical = space(0.5) * fontScale\n  const badgeGap = space(0.5) * fontScale\n  const badgeFontSize = 12\n\n  const variantStylesMap: VariantStyles = {\n    default: {\n      gap: badgeGap,\n      backgroundColor: apparenceColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd,\n      textColor: apparenceColorMap[appearance].text,\n      fontWeight: 'normal',\n    },\n    meta: {\n      gap: badgeGap,\n      backgroundColor: apparenceColorMap[appearance].background,\n      metaLabelPaddingLeft: badgePaddingHorizontal,\n      paddingHorizontal: badgePaddingHorizontal,\n      paddingVertical: badgePaddingVertical,\n      borderWidth: tokens.borderSizeDefault * fontScale,\n      borderRadius: tokens.borderRadiusMd,\n      textColor: apparenceColorMap[appearance].text,\n      fontWeight: platformFontWeightMedium,\n    },\n    metaSubtle: {\n      gap: badgeGap,\n      backgroundColor: 'transparent',\n      metaLabelPaddingLeft: badgeGap,\n      paddingHorizontal: 0,\n      paddingVertical: 0,\n      borderWidth: 0,\n      borderRadius: 0,\n      textColor: colors.textColorDefaultSecondary,\n      fontWeight: platformFontWeightMedium,\n    },\n  }\n\n  return StyleSheet.create({\n    badgeWrapper: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: variantStylesMap[variant].borderRadius,\n      borderWidth: variantStylesMap[variant].borderWidth,\n      borderColor: apparenceColorMap[appearance].background,\n    },\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: variantStylesMap[variant].gap,\n      paddingVertical: variantStylesMap[variant].paddingVertical,\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      backgroundColor: variantStylesMap[variant].backgroundColor,\n      borderRadius: variantStylesMap[variant].borderRadius - 2,\n    },\n    icon: {\n      color: apparenceColorMap[appearance].icon,\n      fontSize: badgeFontSize,\n    },\n    logo: {\n      fontSize: badgeFontSize * fontScale,\n    },\n    label: {\n      color: variantStylesMap[variant].textColor,\n      fontWeight: variantStylesMap[variant].fontWeight,\n      fontSize: badgeFontSize,\n    },\n    metaLabel: {\n      paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n      fontSize: badgeFontSize,\n      flexShrink: 1,\n      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n    },\n  })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n  logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n        fill=\"url(#paint0_linear_2632_26363)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_26363\"\n          x1={-5.6338}\n          y1={5.6338}\n          x2={5.6338}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#FF962D\" />\n          <Stop offset={1} stopColor=\"#FC7638\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n  return (\n    <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n        fill=\"url(#paint0_linear_2632_56586)\"\n      />\n      <Defs>\n        <LinearGradient\n          id=\"paint0_linear_2632_56586\"\n          x1={-5.51759}\n          y1={5.6338}\n          x2={5.75001}\n          y2={16.9014}\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <Stop stopColor=\"#6BB23D\" />\n          <Stop offset={1} stopColor=\"#659630\" />\n        </LinearGradient>\n      </Defs>\n    </Svg>\n  )\n}\n"]}

package/build/components/display/button_color_utils.d.ts

@@ -35,5 +35,5 @@ interface GetColorKeyArgs {
     loading?: boolean;
     appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion;
 }
-declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "danger" | "interaction" | "neutral" | "disabled";
+declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "neutral" | "danger" | "interaction" | "disabled";
 //# sourceMappingURL=button_color_utils.d.ts.map

package/build/components/display/index.d.ts

@@ -1,5 +1,6 @@
 export * from './avatar';
 export * from './avatar_group';
+export * from './badge';
 export * from './button';
 export * from './heading';
 export * from './icon';

package/build/components/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}

package/build/components/display/index.js

@@ -1,5 +1,6 @@
 export * from './avatar';
 export * from './avatar_group';
+export * from './badge';
 export * from './button';
 export * from './heading';
 export * from './icon';

package/build/components/display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './badge'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}

package/build/screens/design_system_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AA8CvC,wBAAgB,kBAAkB,sBA6kBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuDvC,wBAAgB,kBAAkB,sBAgBjC"}