@bacon-pos/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bacon POS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,236 @@
+# @bacon-pos/ui
+
+Bacon POS design system — a scalable **React Native** component library, built
+from the Figma design system and published to npm. Works with Expo (SDK 53+)
+and bare React Native.
+
+- **Zero-config for consumers** — ships compiled JS + type definitions. No babel
+  or metro changes required in the app.
+- **Token-driven** — colors, typography, spacing and radii come straight from
+  Figma. Components read semantic tokens, so light/dark and custom brand themes
+  just work.
+- **Versioned with [changesets](https://github.com/changesets/changesets)** —
+  every added component ships as a new semver release.
+
+---
+
+## Installation (in the app)
+
+```bash
+npx expo install @bacon-pos/ui react-native-svg
+# peer deps react + react-native are already in an Expo app
+```
+
+> **Requires the New Architecture** (default in Expo SDK 53). The `Input` focus
+> ring uses RN's `boxShadow` (colored spread), which renders on iOS, Android and
+> web only under the New Architecture. Border colors still work everywhere.
+
+Wrap your app in the `ThemeProvider` once:
+
+```tsx
+import { ThemeProvider } from '@bacon-pos/ui';
+
+export default function App() {
+  return (
+    <ThemeProvider mode="light">
+      {/* ...your navigation / screens */}
+    </ThemeProvider>
+  );
+}
+```
+
+Use components anywhere below it:
+
+```tsx
+import { Button, Text, Icon } from '@bacon-pos/ui';
+
+<Text variant="h2" weight="semibold">Checkout</Text>
+<Button label="Place order" variant="default" onPress={pay} />
+<Button
+  label="Search"
+  variant="secondary"
+  leftIcon={<Icon name="search" size={20} />}
+/>
+
+// Icon on top — only for shape="square"
+<Button
+  label="Make a sale"
+  shape="square"
+  topIcon={<Icon name="plus" size={24} color="#121416" />}
+/>
+```
+
+`Button` and `LinkButton` accept `leftIcon` / `rightIcon`. The square `Button`
+additionally accepts `topIcon` (vertical stack). `IconButton` is icon-only.
+
+### Icons
+
+Icons are themeable SVGs (`react-native-svg`). Tint with `color` (a text token
+or any color string) and size with `size`:
+
+```tsx
+<Icon name="check" size={24} color="#008C57" />
+<Icon name="trash" color="secondary" />
+```
+
+**Adding icons** — export the SVG from Figma, drop it into `assets/icons/<kebab-name>.svg`,
+then run:
+
+```bash
+pnpm gen:icons
+```
+
+This regenerates `src/components/Icon/icons.generated.ts` and the `IconName`
+union (autocomplete). Each icon is stored as a normalized SVG string and rendered
+via `react-native-svg`'s `SvgXml`, so stroke icons, compound fills and circles
+all render faithfully; colors are rewritten to `currentColor` so `color` tints them.
+
+**Multicolor brand assets** (card logos, flags) live separately as `Logo` and
+`Flag`. They are pre-compiled to real `react-native-svg` components with SVGR
+(`assets/graphics/` → `pnpm gen:graphics`), because gradients / clip-paths /
+masks don't render reliably through runtime `SvgXml`. Their brand colors are
+preserved (not tinted).
+
+### Fonts (Inter)
+
+The type scale uses **Inter**. Load it in the app (fonts can't be bundled from a
+library reliably); if not loaded, RN falls back to the system font.
+
+```bash
+npx expo install @expo-google-fonts/inter expo-font
+```
+
+```tsx
+import {
+  useFonts,
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+} from '@expo-google-fonts/inter';
+
+const [loaded] = useFonts({
+  'Inter-Regular': Inter_400Regular,
+  'Inter-Medium': Inter_500Medium,
+  'Inter-SemiBold': Inter_600SemiBold,
+});
+```
+
+---
+
+## Theming
+
+Access the active theme anywhere with `useTheme()`:
+
+```tsx
+import { useTheme } from '@bacon-pos/ui';
+
+const theme = useTheme();
+// theme.colors.brand.primary, theme.spacing.lg, theme.radii.md, ...
+```
+
+Custom brand theme:
+
+```tsx
+import { ThemeProvider, lightTheme, type Theme } from '@bacon-pos/ui';
+
+const brand: Theme = {
+  ...lightTheme,
+  colors: { ...lightTheme.colors, brand: { ...lightTheme.colors.brand, primary: '#123456' } },
+};
+
+<ThemeProvider theme={brand}>{children}</ThemeProvider>;
+```
+
+Exposed tokens: `palette`, `typography`, `fontFamily`, `fontWeight`, `spacing`,
+`radii`, `space(n)`, `lightTheme`, `darkTheme`, `textStyle(theme, variant, weight)`.
+
+### Typography (global by default, overridable)
+
+The Figma type scale (Inter — Display / H1–H3 / Body / Caption) ships in the
+theme, so **every component uses it automatically**. You don't wire anything up.
+
+Override it in one place with `overrides` (deep-merged onto the base theme,
+applies to every current and future component):
+
+```tsx
+<ThemeProvider
+  overrides={{
+    fontFamily: { regular: 'Poppins-Regular', medium: 'Poppins-Medium' },
+    typography: { h1: { fontSize: 30, lineHeight: 38 } },
+  }}
+>
+  {children}
+</ThemeProvider>
+```
+
+Override for a single instance with the `style` prop:
+
+```tsx
+<Text variant="h1" style={{ fontSize: 28, letterSpacing: 0.5 }}>Title</Text>
+```
+
+Building a component that renders text without `<Text>`? Use the helper so it
+honors global overrides too:
+
+```tsx
+import { useTheme, textStyle } from '@bacon-pos/ui';
+
+const theme = useTheme();
+const style = textStyle(theme, 'bodyMedium', 'medium'); // full TextStyle
+```
+
+---
+
+## Local development
+
+```bash
+pnpm install
+pnpm storybook     # component explorer at http://localhost:6006
+pnpm test          # unit tests (Jest + RN Testing Library)
+pnpm typecheck     # tsc --noEmit
+pnpm build         # compile to lib/ via react-native-builder-bob
+```
+
+### Adding a component
+
+1. Create `src/components/<Name>/` with `<Name>.tsx`, `<Name>.stories.tsx`,
+   `<Name>.test.tsx`, and `index.ts`.
+2. Read tokens from `useTheme()` — never hardcode colors or spacing.
+3. Re-export it from `src/components/index.ts`.
+4. Add a changeset (see below).
+
+---
+
+## Releasing a new version
+
+1. Record what changed:
+   ```bash
+   pnpm changeset
+   ```
+   Choose **patch** (fixes), **minor** (new components / props) or **major**
+   (breaking changes) and write a summary.
+2. Apply the version bump + changelog:
+   ```bash
+   pnpm version
+   ```
+3. Publish to npm (requires `npm login` or an `NPM_TOKEN`):
+   ```bash
+   pnpm release
+   ```
+
+> **Never commit npm tokens.** Use `npm login`, or set `NPM_TOKEN` as an
+> environment variable / CI secret. `.npmrc` is gitignored.
+
+---
+
+## Roadmap
+
+Built from the Figma design system (colors, typography, ~150 icons, inputs,
+etc.). Current components: `Button`, `IconButton`, `LinkButton`, `Input`, `Card`,
+`ProductCard`, `Surface`, `Text`, `Icon` (167 icons — 24px outline + fill + 20px
+optical set), plus multicolor `Logo` (Visa/Mastercard) and `Flag` (US/BR) brand
+assets, `QuantityStepper`, `CodeInput` (PIN), `Chip` + `ChipGroup` (single/multi
+select), `Avatar` (photo or initials), and form controls `Checkbox`, `Radio`,
+`Switch` (each standalone or with a positionable `label`). The Figma
+"loader" is an animated ring, not an icon — use RN's `ActivityIndicator`
+(Button/LinkButton already do).

package/lib/commonjs/components/Avatar/Avatar.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = Avatar;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const SIZES = {
+  sm: {
+    diameter: 32,
+    text: 'bodySmall'
+  },
+  md: {
+    diameter: 40,
+    text: 'bodyMedium'
+  },
+  lg: {
+    diameter: 56,
+    text: 'h3'
+  }
+};
+function getInitials(name, explicit, count) {
+  if (explicit) return explicit.slice(0, count).toUpperCase();
+  if (!name) return '';
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = words[0];
+  if (!first) return '';
+  if (count === 1) return first.charAt(0).toUpperCase();
+  const second = words[1];
+  if (second) return (first.charAt(0) + second.charAt(0)).toUpperCase();
+  return first.slice(0, 2).toUpperCase();
+}
+
+/**
+ * Avatar — circular user image with an initials fallback. Shows the photo when
+ * `source` loads; otherwise shows 1–2 uppercase initials on a lighter background.
+ * Sizes: sm / md / lg.
+ */
+function Avatar({
+  source,
+  name,
+  initials,
+  initialsCount = 2,
+  size = 'md',
+  diameter,
+  color,
+  backgroundColor,
+  style,
+  accessibilityLabel
+}) {
+  const theme = (0, _index.useTheme)();
+  const cfg = SIZES[size];
+  const [errored, setErrored] = (0, _react.useState)(false);
+  const showImage = source != null && !errored;
+  const d = diameter ?? cfg.diameter;
+  const bg = backgroundColor ?? theme.colors.background.muted;
+  const fg = color ?? theme.colors.text.secondary;
+  // With a custom diameter, scale the initials to fit; otherwise use the preset.
+  const initialsStyle = diameter ? {
+    fontSize: Math.round(d * 0.4),
+    lineHeight: Math.round(d * 0.5)
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel ?? name,
+    style: [{
+      width: d,
+      height: d,
+      borderRadius: d / 2,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: showImage ? theme.colors.background.default : bg
+    }, style],
+    children: showImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: source,
+      resizeMode: "cover",
+      onError: () => setErrored(true),
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: cfg.text,
+      weight: "semibold",
+      color: fg,
+      style: initialsStyle,
+      children: getInitials(name, initials, initialsCount)
+    })
+  });
+}
+//# sourceMappingURL=Avatar.js.map

package/lib/commonjs/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_Text","_jsxRuntime","SIZES","sm","diameter","text","md","lg","getInitials","name","explicit","count","slice","toUpperCase","words","trim","split","filter","Boolean","first","charAt","second","Avatar","source","initials","initialsCount","size","color","backgroundColor","style","accessibilityLabel","theme","useTheme","cfg","errored","setErrored","useState","showImage","d","bg","colors","background","muted","fg","secondary","initialsStyle","fontSize","Math","round","lineHeight","undefined","jsx","View","accessibilityRole","width","height","borderRadius","overflow","alignItems","justifyContent","default","children","Image","resizeMode","onError","Text","variant","weight"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Avatar/Avatar.stories.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithPhoto = exports.Sizes = exports.InitialsTwo = exports.InitialsOne = exports.CustomDiameter = exports.CustomColor = void 0;
+var _reactNative = require("react-native");
+var _Avatar = require("./Avatar.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const PHOTO = {
+  uri: 'https://i.pravatar.cc/150?img=5'
+};
+const meta = {
+  title: 'Components/Avatar',
+  component: _Avatar.Avatar,
+  args: {
+    name: 'Ada Lovelace',
+    size: 'md'
+  },
+  argTypes: {
+    size: {
+      control: 'inline-radio',
+      options: ['sm', 'md', 'lg']
+    },
+    initialsCount: {
+      control: 'inline-radio',
+      options: [1, 2]
+    }
+  }
+};
+var _default = exports.default = meta;
+const WithPhoto = exports.WithPhoto = {
+  args: {
+    source: PHOTO
+  }
+};
+const InitialsTwo = exports.InitialsTwo = {
+  args: {
+    initialsCount: 2
+  }
+};
+const InitialsOne = exports.InitialsOne = {
+  args: {
+    initialsCount: 1
+  }
+};
+const CustomColor = exports.CustomColor = {
+  args: {
+    color: '#7D0013',
+    backgroundColor: '#FAE6E9'
+  }
+};
+const CustomDiameter = exports.CustomDiameter = {
+  args: {
+    diameter: 80,
+    size: 'sm'
+  }
+};
+const Sizes = exports.Sizes = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      size: "sm"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      size: "md"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      size: "lg"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      source: PHOTO,
+      size: "sm"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      source: PHOTO,
+      size: "md"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      source: PHOTO,
+      size: "lg"
+    })]
+  })
+};
+//# sourceMappingURL=Avatar.stories.js.map

package/lib/commonjs/components/Avatar/Avatar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Avatar","_jsxRuntime","PHOTO","uri","meta","title","component","Avatar","args","name","size","argTypes","control","options","initialsCount","_default","exports","default","WithPhoto","source","InitialsTwo","InitialsOne","CustomColor","color","backgroundColor","CustomDiameter","diameter","Sizes","render","jsxs","View","style","flexDirection","alignItems","gap","children","jsx"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Avatar/Avatar.stories.tsx"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAkC,IAAAE,WAAA,GAAAF,OAAA;AAElC,MAAMG,KAAK,GAAG;EAAEC,GAAG,EAAE;AAAkC,CAAC;AAExD,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,mBAAmB;EAC1BC,SAAS,EAAEC,cAAM;EACjBC,IAAI,EAAE;IAAEC,IAAI,EAAE,cAAc;IAAEC,IAAI,EAAE;EAAK,CAAC;EAC1CC,QAAQ,EAAE;IACRD,IAAI,EAAE;MAAEE,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI;IAAE,CAAC;IAC9DC,aAAa,EAAE;MAAEF,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;IAAE;EAC5D;AACF,CAA+B;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEjBb,IAAI;AAGZ,MAAMc,SAAgB,GAAAF,OAAA,CAAAE,SAAA,GAAG;EAAEV,IAAI,EAAE;IAAEW,MAAM,EAAEjB;EAAM;AAAE,CAAC;AACpD,MAAMkB,WAAkB,GAAAJ,OAAA,CAAAI,WAAA,GAAG;EAAEZ,IAAI,EAAE;IAAEM,aAAa,EAAE;EAAE;AAAE,CAAC;AACzD,MAAMO,WAAkB,GAAAL,OAAA,CAAAK,WAAA,GAAG;EAAEb,IAAI,EAAE;IAAEM,aAAa,EAAE;EAAE;AAAE,CAAC;AACzD,MAAMQ,WAAkB,GAAAN,OAAA,CAAAM,WAAA,GAAG;EAChCd,IAAI,EAAE;IAAEe,KAAK,EAAE,SAAS;IAAEC,eAAe,EAAE;EAAU;AACvD,CAAC;AACM,MAAMC,cAAqB,GAAAT,OAAA,CAAAS,cAAA,GAAG;EACnCjB,IAAI,EAAE;IAAEkB,QAAQ,EAAE,EAAE;IAAEhB,IAAI,EAAE;EAAK;AACnC,CAAC;AAEM,MAAMiB,KAAY,GAAAX,OAAA,CAAAW,KAAA,GAAG;EAC1BC,MAAM,EAAEA,CAAA,kBACN,IAAA3B,WAAA,CAAA4B,IAAA,EAAC/B,YAAA,CAAAgC,IAAI;IAACC,KAAK,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAG,CAAE;IAAAC,QAAA,gBACnE,IAAAlC,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACE,IAAI,EAAC,cAAc;MAACC,IAAI,EAAC;IAAI,CAAE,CAAC,eACxC,IAAAT,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACE,IAAI,EAAC,cAAc;MAACC,IAAI,EAAC;IAAI,CAAE,CAAC,eACxC,IAAAT,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACE,IAAI,EAAC,cAAc;MAACC,IAAI,EAAC;IAAI,CAAE,CAAC,eACxC,IAAAT,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACY,MAAM,EAAEjB,KAAM;MAACQ,IAAI,EAAC;IAAI,CAAE,CAAC,eACnC,IAAAT,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACY,MAAM,EAAEjB,KAAM;MAACQ,IAAI,EAAC;IAAI,CAAE,CAAC,eACnC,IAAAT,WAAA,CAAAmC,GAAA,EAACpC,OAAA,CAAAO,MAAM;MAACY,MAAM,EAAEjB,KAAM;MAACQ,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CAC/B;AAEV,CAAC","ignoreList":[]}

package/lib/commonjs/components/Avatar/Avatar.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNative2 = require("@testing-library/react-native");
+var _Avatar = require("./Avatar.js");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function renderWithTheme(ui) {
+  return (0, _reactNative2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+describe('Avatar', () => {
+  it('derives two uppercase initials from a full name', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "ada lovelace"
+    }));
+    expect(_reactNative2.screen.getByText('AL')).toBeTruthy();
+  });
+  it('shows a single initial when initialsCount is 1', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      initialsCount: 1
+    }));
+    expect(_reactNative2.screen.getByText('A')).toBeTruthy();
+  });
+  it('uses the first two letters for a single-word name', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada",
+      initialsCount: 2
+    }));
+    expect(_reactNative2.screen.getByText('AD')).toBeTruthy();
+  });
+  it('respects explicit initials', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      initials: "xy"
+    }));
+    expect(_reactNative2.screen.getByText('XY')).toBeTruthy();
+  });
+  it('renders the image (no initials) when a source is given', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      source: {
+        uri: 'x'
+      }
+    }));
+    expect(_reactNative2.screen.queryByText('AL')).toBeNull();
+  });
+  it('uses a custom diameter over the size preset', () => {
+    renderWithTheme(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "Ada Lovelace",
+      size: "sm",
+      diameter: 72
+    }));
+    const flat = _reactNative.StyleSheet.flatten(_reactNative2.screen.getByLabelText('Ada Lovelace').props.style);
+    expect(flat.width).toBe(72);
+    expect(flat.height).toBe(72);
+    expect(flat.borderRadius).toBe(36);
+  });
+});
+//# sourceMappingURL=Avatar.test.js.map

package/lib/commonjs/components/Avatar/Avatar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNative2","_Avatar","_index","_jsxRuntime","e","__esModule","default","renderWithTheme","ui","render","jsx","ThemeProvider","children","describe","it","Avatar","name","expect","screen","getByText","toBeTruthy","initialsCount","initials","source","uri","queryByText","toBeNull","size","diameter","flat","StyleSheet","flatten","getByLabelText","props","style","width","toBe","height","borderRadius"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Avatar/Avatar.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Avatar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.Avatar;
+  }
+});
+var _Avatar = require("./Avatar.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Avatar","require"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Avatar/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA","ignoreList":[]}