yRectType = ClientRect | DOMRect | Rect | Spacing;
```

### `createBox`

> `({ borderBox, margin, border, padding }: CreateBoxArgs) => BoxModel`

Allows you to create a `BoxModel` by passing in a `Rect` like shape (`AnyRectType`) and optionally your own `margin`, `border` and or `padding`.

```js
type CreateBoxArgs = {|
  borderBox: AnyRectType,
  margin?: Spacing,
  border?: Spacing,
  padding?: Spacing,
|};
```

```js
const borderBox: Spacing = {
  top: 10,
  right: 100,
  left: 20,
  bottom: 80,
};
const padding: Spacing = {
  top: 10,
  right: 20,
  left: 20,
  bottom: 10,
};

const box: BoxModel = createBox({ borderBox, padding });
```

## Utility API

> Functions to help you interact with the objects we provide

### `getRect`

> `(spacing: AnyRectType) => Rect`

Given any `Rect` like shape, return a `Rect`. Accepts any object that has `top`, `right`, `bottom` and `right` (eg `ClientRect`, `DOMRect`);

```js
const spacing: Spacing = {
  top: 0,
  right: 100,
  bottom: 50,
  left: 50,
};

const rect: Rect = getRect(spacing);

console.log(rect);

/*
{
  top: 0,
  right: 100,
  bottom: 50,
  left: 50,
  width: 100,
  height: 50,
  x: 0,
  y: 0,
  center: { x: 50, y: 50 },
}
*/
```

### `expand`

Used to expand a `Spacing`

```js
(target: Spacing, expandBy: Spacing) => Spacing;
```

```js
const original: Spacing = {
  top: 10,
  left: 11,
  right: 21,
  bottom: 22,
};

const expandBy: Spacing = {
  top: 1,
  left: 2,
  right: 3,
  bottom: 4,
};

const expanded: Spacing = expand(original, expandBy);

console.log(expanded);

/*
{
  // pulled back
  top: 8,
  left: 8
  // pushed forward
  bottom: 22,
  right: 22,
}
*/
```

### `shrink`

Used to shrink a `Spacing`

```js
(target: Spacing, shrinkBy: Spacing) => Spacing;
```

```js
const original: Spacing = {
  top: 10,
  left: 10,
  right: 20,
  bottom: 20,
};

const shrinkBy: Spacing = {
  top: 2,
  left: 2,
  right: 2,
  bottom: 2,
};

const smaller: Spacing = shrink(original, shrinkBy);

console.log(smaller);

/*
{
  // pushed forward
  top: 12,
  left: 12
  // pulled back
  bottom: 18,
  right: 18,
}
*/
```