@utilitywarehouse/hearth-react 0.31.2 → 0.31.4

package/dist/props/prop-def.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/prop-def.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/prop-def.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/prop-def.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/prop-def.cjs"}

package/dist/props/size.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/size.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,2CAA0B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/size.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/size.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,2CAA0B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/size.props.cjs"}

package/dist/props/spacing.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/spacing.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,8CAA6B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/spacing.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/spacing.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,8CAA6B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/spacing.props.cjs"}

package/dist/props/text-align.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/text-align.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,gDAA+B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/text-align.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-align.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,gDAA+B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-align.props.cjs"}

package/dist/props/text-transform.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/text-transform.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,oDAAmC","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/text-transform.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-transform.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,oDAAmC","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-transform.props.cjs"}

package/dist/props/text-wrap.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/text-wrap.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,+CAA8B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/text-wrap.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-wrap.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,+CAA8B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/text-wrap.props.cjs"}

package/dist/props/z-index.props.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/props/z-index.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,6CAA4B","file":"/home/runner/work/hearth/hearth/packages/react/dist/props/z-index.props.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/z-index.props.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,6CAA4B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/props/z-index.props.cjs"}

package/dist/tokens/breakpoints.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/tokens/breakpoints.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/home/runner/work/hearth/hearth/packages/react/dist/tokens/breakpoints.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/tokens/breakpoints.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/tokens/breakpoints.cjs"}

package/dist/tokens/space.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/tokens/space.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/home/runner/work/hearth/hearth/packages/react/dist/tokens/space.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/tokens/space.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/tokens/space.cjs"}

package/dist/types/css-token-variable.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/types/css-token-variable.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/home/runner/work/hearth/hearth/packages/react/dist/types/css-token-variable.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/css-token-variable.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/css-token-variable.cjs"}

package/dist/types/orientation.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/types/orientation.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,2CAA0B","file":"/home/runner/work/hearth/hearth/packages/react/dist/types/orientation.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/orientation.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,2CAA0B","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/orientation.cjs"}

package/dist/types/responsive.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/types/responsive.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/home/runner/work/hearth/hearth/packages/react/dist/types/responsive.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/responsive.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,0CAAyB","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/responsive.cjs"}

package/dist/types/union.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/types/union.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/home/runner/work/hearth/hearth/packages/react/dist/types/union.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/union.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/types/union.cjs"}

package/dist/utils/media.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/utils/media.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,iCAA8B,oCAAmB","file":"/home/runner/work/hearth/hearth/packages/react/dist/utils/media.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/utils/media.cjs"],"names":[],"mappings":"AAAA,qFAAY;AACZ;AACA,yDAAoC,iCAA8B,oCAAmB","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/utils/media.cjs"}

package/dist/vite-env.d.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/vite-env.d.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/home/runner/work/hearth/hearth/packages/react/dist/vite-env.d.cjs"}
+{"version":3,"sources":["/Users/robphoenix/code/uw/hearth2/packages/react/dist/vite-env.d.cjs"],"names":[],"mappings":"AAAA,yBAAY;AACZ","file":"/Users/robphoenix/code/uw/hearth2/packages/react/dist/vite-env.d.cjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "description": "React components",
   "license": "Apache-2.0",
   "repository": {
@@ -32,6 +32,34 @@
   "bin": {
     "hearth-react": "./scripts/init-ai.js"
   },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules dist *.css storybook-static",
+    "build": "pnpm build:css && pnpm build:js",
+    "copy:breakpoints": "cp ./src/styles/breakpoints.css ./breakpoints.css",
+    "copy:tokens": "rm -rf ./src/styles/tokens && mkdir -p ./src/styles/tokens && cp -r ../tokens/css/* ./src/styles/tokens && pnpm run copy:tokens:index && pnpm run lint:css:fix",
+    "copy:tokens:index": "cp ./src/styles/tokens.css ./src/styles/tokens/index.css",
+    "build:css": "postcss ./src/styles/index.css -o styles.css && pnpm copy:breakpoints",
+    "build:js": "NODE_OPTIONS='--max-old-space-size=6144' tsup && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "dev:js": "NODE_OPTIONS='--max-old-space-size=16384' tsup --watch",
+    "dev:css": "postcss --watch --verbose src/styles/index.css -o styles.css",
+    "dev:storybook": "storybook dev -p 6006",
+    "dev": "pnpm run \"/^dev:.*/\"",
+    "ts-types": "tsc",
+    "lint": "turbo run lint:js lint:css",
+    "lint:fix": "turbo run lint:js:fix lint:css:fix",
+    "lint:js": "TIMING=1 eslint --max-warnings 0 \"src/**/*.ts*\"",
+    "lint:js:fix": "TIMING=1 eslint --fix --max-warnings 0 \"src/**/*.{js,ts*}\"",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
+    "format": "prettier --write \"{src,public,docs,scripts}/**/*.{js,ts*,md*,css}\" {README,SKILL}.md",
+    "format:ci": "prettier --list-different \"src/**/*.{ts*,mdx,css}\"",
+    "figma:publish": "figma connect publish",
+    "build:storybook": "pnpm generate:llm-docs && storybook build",
+    "generate:llm-docs": "rm -rf public && node scripts/generate-llm-docs.js && prettier --write \"public/**/*.md\"",
+    "copy:changelog": "node ./scripts/copy-changelog.js",
+    "test:storybook": "vitest run --project=storybook"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -43,21 +71,22 @@
     "public/llms.txt"
   ],
   "peerDependencies": {
+    "@utilitywarehouse/hearth-fonts": "workspace:*",
     "@utilitywarehouse/hearth-react-icons": "0.8.0",
     "react": "^18.0.0 || ^19.0.0 ",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@utilitywarehouse/hearth-fonts": "0.1.1"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
     "@base-ui/utils": "^0.2.4",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-use-controllable-state": "^1.0.1",
+    "@utilitywarehouse/hearth-css-reset": "workspace:*",
     "radix-ui": "^1.4.3",
-    "react-datepicker": "^8.9.0",
-    "@utilitywarehouse/hearth-css-reset": "0.1.5"
+    "react-datepicker": "^8.9.0"
   },
   "devDependencies": {
+    "@utilitywarehouse/hearth-storybook-utils": "workspace:*",
     "@storybook/addon-a11y": "^10.3.6",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-mcp": "^0.6.0",
@@ -68,6 +97,10 @@
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.6",
     "@types/seedrandom": "^3.0.8",
+    "@utilitywarehouse/hearth-fonts": "workspace:*",
+    "@utilitywarehouse/hearth-react-icons": "workspace:*",
+    "@utilitywarehouse/hearth-svg-assets": "workspace:*",
+    "@utilitywarehouse/hearth-tokens": "workspace:*",
     "@vitest/browser-playwright": "^4.1.7",
     "autoprefixer": "^10.4.20",
     "browserslist": "^4.28.1",
@@ -94,39 +127,6 @@
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tsup": "^8.5.1",
     "tsx": "^4.19.3",
-    "vitest": "^4.1.7",
-    "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-fonts": "0.1.1",
-    "@utilitywarehouse/hearth-svg-assets": "0.6.5",
-    "@utilitywarehouse/hearth-react-icons": "0.9.0",
-    "@utilitywarehouse/hearth-tokens": "0.4.3"
-  },
-  "scripts": {
-    "clean": "rm -rf .turbo node_modules dist *.css storybook-static",
-    "build": "pnpm build:css && pnpm build:js",
-    "copy:breakpoints": "cp ./src/styles/breakpoints.css ./breakpoints.css",
-    "copy:tokens": "rm -rf ./src/styles/tokens && mkdir -p ./src/styles/tokens && cp -r ../tokens/css/* ./src/styles/tokens && pnpm run copy:tokens:index && pnpm run format",
-    "copy:tokens:index": "cp ./src/styles/tokens.css ./src/styles/tokens/index.css",
-    "build:css": "postcss ./src/styles/index.css -o styles.css && pnpm copy:breakpoints",
-    "build:js": "NODE_OPTIONS='--max-old-space-size=6144' tsup && tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
-    "dev:js": "NODE_OPTIONS='--max-old-space-size=16384' tsup --watch",
-    "dev:css": "postcss --watch --verbose src/styles/index.css -o styles.css",
-    "dev:storybook": "storybook dev -p 6006",
-    "dev": "pnpm run \"/^dev:.*/\"",
-    "ts-types": "tsc",
-    "lint": "turbo run lint:js lint:css",
-    "lint:fix": "turbo run lint:js:fix lint:css:fix",
-    "lint:js": "TIMING=1 eslint --max-warnings 0 \"src/**/*.ts*\"",
-    "lint:js:fix": "TIMING=1 eslint --fix --max-warnings 0 \"src/**/*.{js,ts*}\"",
-    "lint:css": "stylelint \"src/**/*.css\"",
-    "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
-    "format": "prettier --write \"{src,public,docs,scripts}/**/*.{js,ts*,md*,css}\" {README,SKILL}.md",
-    "format:ci": "prettier --list-different \"src/**/*.{ts*,mdx,css}\"",
-    "figma:publish": "figma connect publish",
-    "build:storybook": "pnpm generate:llm-docs && storybook build",
-    "generate:llm-docs": "rm -rf public && node scripts/generate-llm-docs.js && prettier --write \"public/**/*.md\"",
-    "copy:changelog": "node ./scripts/copy-changelog.js",
-    "test:storybook": "vitest run --project=storybook"
+    "vitest": "^4.1.7"
   }
-}
+}

package/public/llms/components/button.md

@@ -442,8 +442,6 @@ appropriate styles.
 A semantic HTML `button` is rendered by default, however you can change the
 underlying HTML element by using the `asChild` prop.
 
-**NOTE:** Be aware that you cannot currently use `asChild` with the `emphasis` variant.
-
 When `asChild` is set to true, we will not render a default DOM element,
 instead cloning the child and passing it the props and behaviour required to
 make it functional.
@@ -460,6 +458,10 @@ Read more about this idea in the [Radix UI composition docs](https://www.radix-u
     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
     <a href={args.disabled ? undefined : 'https://uw.co.uk/services'}>View UW services</a>
   </Button>
+  <Button asChild variant="emphasis">
+    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+    <a href={args.disabled ? undefined : 'https://uw.co.uk/services'}>View UW services</a>
+  </Button>
 </Flex>
 ```
 

package/public/llms/components/icon-button.md

@@ -459,8 +459,6 @@ const MyComponent = () => (
 A semantic HTML button is rendered by default, however you can change the
 underlying HTML element by using the `asChild` prop.
 
-**NOTE:** Be aware that you cannot currently use `asChild` with the `emphasis` variant.
-
 When `asChild` is set to true, the button will not render a default DOM element,
 instead cloning the child and passing it the props and behaviour required to
 make it functional.
@@ -481,6 +479,12 @@ Read more about this idea in the [Radix UI composition docs](https://www.radix-u
       <AddMediumIcon />
     </a>
   </IconButton>
+  <IconButton {...args} asChild variant="emphasis" label="add">
+    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+    <a href={args.disabled ? undefined : 'https://uw.co.uk/services'}>
+      <AddMediumIcon />
+    </a>
+  </IconButton>
 </Flex>
 ```
 

package/public/llms/docs/a-i-toolkit.md

@@ -0,0 +1,113 @@
+# AI Toolkit
+
+The Hearth React AI Tools are intended to help your AI agents use Hearth React
+components to build Utility Warehouse UIs. They provide access to APIs,
+component documentation and usage guidelines, so your agent has the context it
+needs to build with Hearth correctly.
+
+These tools include:
+
+- [llms.txt](https://hearth.prod.uw.systems/react/llms.txt) and markdown docs
+- [SKILL.md](https://github.com/utilitywarehouse/hearth/blob/main/packages/react/SKILL.md)
+- [MCP Server](https://main--68dbda8270df9c2a6568ece8.chromatic.com/mcp)
+
+If you're building UI from a design in Figma, start with Figma's MCP Server.
+This should be the first step, since it gives your agent direct access to the
+design you're implementing. You can read more information about setting this up
+in the root AI Toolkit documentation.
+
+## Plugin
+
+The Hearth AI Toolkit plugin is the recommended way to set up your agent with
+the Hearth React AI Tools. It will automatically add the skill and MCP
+server to your agent configuration, and ensure that your agent has access to
+the latest Hearth React documentation and usage guidance. How to install
+and use the plugin is documented in the root AI Toolkit documentation.
+
+## llms.txt and markdown docs
+
+The [llms.txt](https://hearth.prod.uw.systems/react/llms.txt) file is a list of
+all Hearth React documentation, and each documentation page has a corresponding
+markdown file for use by AI agents.
+
+Each docs page has a "View Markdown" link, and a "Copy Markdown" button, at the
+top, which can be used to share documentation with AI chat assistants to help
+them understand Hearth concepts and component APIs.
+
+This documentation is also included in the Hearth React package, so your agent
+can access it locally if you have the package installed. The easiest way to do
+this is via the Hearth React Agent Skill.
+
+## Agent Skill
+
+The [Hearth React Agent Skill](https://github.com/utilitywarehouse/hearth/blob/main/packages/react/SKILL.md)
+is a skill for your AI agent to use when building any React UI.
+
+This skill is focused on usage of the Hearth React component library, and
+doesn't attempt to cover any other aspects of building a React application, or
+local custom components. If you have local custom components, for instance
+Hearth components integrated with the Next.js `Link` component, you should
+document this in your agents file, or a custom skill.
+
+The skill is packaged with the Hearth React package, so your agent can access
+it locally if you have the package installed. To ensure your agent has access
+to the skill, you can add an entry to your local `AGENTS.md` or `CLAUDE.md`
+file.
+
+You can do this by using the `init-ai` tool:
+
+```console
+npx @utilitywarehouse/hearth-react init-ai
+```
+
+This will add an entry to your `AGENTS.md` or `CLAUDE.md` file pointing to the
+skill file.
+
+Alternatively, you can add an entry manually to your `AGENTS.md` or `CLAUDE.md`
+file like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react — AI skill for component library usage guidance -->
+
+@node_modules/@utilitywarehouse/hearth-react/SKILL.md
+```
+
+or if you are using a monorepo with the Hearth React package in a subdirectory,
+you can add an entry like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react — AI skill for component library usage guidance -->
+
+@../../node_modules/@utilitywarehouse/hearth-react/SKILL.md
+```
+
+We recommend having `v0.29.6` or later of the Hearth React package installed,
+as this version includes the latest updates to the skill.
+
+## MCP Server
+
+The remote [MCP Server](https://main--68dbda8270df9c2a6568ece8.chromatic.com/mcp),
+built on the [Storybook MCP Server](https://storybook.js.org/docs/ai/mcp/overview#docs),
+provides tools for agents to use Hearth React documentation and components.
+
+It is referenced in the Hearth React Agent Skill, so your agent can access it
+remotely if you have the skill installed, and the MCP server configured in your
+agent.
+
+To configure your agent to use the MCP server, you can add an entry to your
+configuration file like this:
+
+```json
+{
+  "servers": {
+    "hearth-react": {
+      "url": "https://main--68dbda8270df9c2a6568ece8.chromatic.com/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+This is an example for adding to the VS Code `mcp.json` file, but the
+configuration format may vary depending on your agent. We are in the process of
+adding support for the MCP Server to the organisation's Claude configuration.

package/public/llms/docs/getting-started.md

@@ -1,6 +1,6 @@
 # Hearth React
 
-Current version: v0.31.2
+Current version: v0.31.4
 
 - [Install Hearth](#install-hearth)
 - [Import CSS](#import-css)