@platformatic/ui-components 0.1.31 → 0.1.33

package/fonts/Montserrat/README.txt

@@ -1,81 +1,81 @@
-Montserrat Variable Font
-========================
-
-This download contains Montserrat as both variable fonts and static fonts.
-
-Montserrat is a variable font with this axis:
-  wght
-
-This means all the styles are contained in these files:
-  Montserrat-VariableFont_wght.ttf
-  Montserrat-Italic-VariableFont_wght.ttf
-
-If your app fully supports variable fonts, you can now pick intermediate styles
-that aren’t available as static fonts. Not all apps support variable fonts, and
-in those cases you can use the static font files for Montserrat:
-  static/Montserrat-Thin.ttf
-  static/Montserrat-ExtraLight.ttf
-  static/Montserrat-Light.ttf
-  static/Montserrat-Regular.ttf
-  static/Montserrat-Medium.ttf
-  static/Montserrat-SemiBold.ttf
-  static/Montserrat-Bold.ttf
-  static/Montserrat-ExtraBold.ttf
-  static/Montserrat-Black.ttf
-  static/Montserrat-ThinItalic.ttf
-  static/Montserrat-ExtraLightItalic.ttf
-  static/Montserrat-LightItalic.ttf
-  static/Montserrat-Italic.ttf
-  static/Montserrat-MediumItalic.ttf
-  static/Montserrat-SemiBoldItalic.ttf
-  static/Montserrat-BoldItalic.ttf
-  static/Montserrat-ExtraBoldItalic.ttf
-  static/Montserrat-BlackItalic.ttf
-
-Get started
------------
-
-1. Install the font files you want to use
-
-2. Use your app's font picker to view the font family and all the
-available styles
-
-Learn more about variable fonts
--------------------------------
-
-  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
-  https://variablefonts.typenetwork.com
-  https://medium.com/variable-fonts
-
-In desktop apps
-
-  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
-  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
-
-Online
-
-  https://developers.google.com/fonts/docs/getting_started
-  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
-  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
-
-Installing fonts
-
-  MacOS: https://support.apple.com/en-us/HT201749
-  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
-  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
-
-Android Apps
-
-  https://developers.google.com/fonts/docs/android
-  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
-
-License
--------
-Please read the full license text (OFL.txt) to understand the permissions,
-restrictions and requirements for usage, redistribution, and modification.
-
-You can use them in your products & projects – print or digital,
-commercial or otherwise.
-
-This isn't legal advice, please consider consulting a lawyer and see the full
-license for all details.
+Montserrat Variable Font
+========================
+
+This download contains Montserrat as both variable fonts and static fonts.
+
+Montserrat is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Montserrat-VariableFont_wght.ttf
+  Montserrat-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Montserrat:
+  static/Montserrat-Thin.ttf
+  static/Montserrat-ExtraLight.ttf
+  static/Montserrat-Light.ttf
+  static/Montserrat-Regular.ttf
+  static/Montserrat-Medium.ttf
+  static/Montserrat-SemiBold.ttf
+  static/Montserrat-Bold.ttf
+  static/Montserrat-ExtraBold.ttf
+  static/Montserrat-Black.ttf
+  static/Montserrat-ThinItalic.ttf
+  static/Montserrat-ExtraLightItalic.ttf
+  static/Montserrat-LightItalic.ttf
+  static/Montserrat-Italic.ttf
+  static/Montserrat-MediumItalic.ttf
+  static/Montserrat-SemiBoldItalic.ttf
+  static/Montserrat-BoldItalic.ttf
+  static/Montserrat-ExtraBoldItalic.ttf
+  static/Montserrat-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

package/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Platformatic UI Components</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Platformatic UI Components</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/index.js

@@ -1,58 +1,58 @@
-'use strict'
-
-import BorderedBox from './src/components/BorderedBox'
-import BorderedText from './src/components/BorderedText'
-import Box from './src/components/Box'
-import Button from './src/components/Button'
-import DetailedMetric from './src/components/DetailedMetric'
-import DropDown from './src/components/DropDown'
-import FollowUs from './src/components/FollowUs'
-import GHLoginButton from './src/components/GHLoginButton'
-import HorizontalSeparator from './src/components/HorizontalSeparator'
-import Icons from './src/components/icons'
-import Input from './src/components/Input'
-import Layout from './src/components/layouts/Layout'
-import List from './src/components/List'
-import ListElement from './src/components/ListElement'
-import Loadable from './src/components/Loadable'
-import LoginButton from './src/components/LoginButton'
-import Logo from './src/components/Logo'
-import Modal from './src/components/Modal'
-import Playground from './src/components/Playground'
-import SearchBar from './src/components/SearchBar'
-import SimpleMetric from './src/components/SimpleMetric'
-import Status from './src/components/Status'
-import TabbedWindow from './src/components/TabbedWindow'
-import TextWithLabel from './src/components/TextWithLabel'
-import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
-import Versions from './src/components/Versions'
-import VerticalSeparator from './src/components/VerticalSeparator'
-export {
-  BorderedBox,
-  BorderedText,
-  Box,
-  Button,
-  DetailedMetric,
-  DropDown,
-  FollowUs,
-  HorizontalSeparator,
-  GHLoginButton,
-  Icons,
-  Input,
-  Layout,
-  List,
-  ListElement,
-  Loadable,
-  LoginButton,
-  Logo,
-  Modal,
-  Playground,
-  SearchBar,
-  SimpleMetric,
-  Status,
-  TabbedWindow,
-  TextWithLabel,
-  TwoColumnsLayout,
-  Versions,
-  VerticalSeparator
-}
+'use strict'
+
+import BorderedBox from './src/components/BorderedBox'
+import BorderedText from './src/components/BorderedText'
+import Box from './src/components/Box'
+import Button from './src/components/Button'
+import DetailedMetric from './src/components/DetailedMetric'
+import DropDown from './src/components/DropDown'
+import FollowUs from './src/components/FollowUs'
+import GHLoginButton from './src/components/GHLoginButton'
+import HorizontalSeparator from './src/components/HorizontalSeparator'
+import Icons from './src/components/icons'
+import Input from './src/components/Input'
+import Layout from './src/components/layouts/Layout'
+import List from './src/components/List'
+import ListElement from './src/components/ListElement'
+import Loadable from './src/components/Loadable'
+import LoginButton from './src/components/LoginButton'
+import Logo from './src/components/Logo'
+import Modal from './src/components/Modal'
+import Playground from './src/components/Playground'
+import SearchBar from './src/components/SearchBar'
+import SimpleMetric from './src/components/SimpleMetric'
+import Status from './src/components/Status'
+import TabbedWindow from './src/components/TabbedWindow'
+import TextWithLabel from './src/components/TextWithLabel'
+import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
+import Versions from './src/components/Versions'
+import VerticalSeparator from './src/components/VerticalSeparator'
+export {
+  BorderedBox,
+  BorderedText,
+  Box,
+  Button,
+  DetailedMetric,
+  DropDown,
+  FollowUs,
+  HorizontalSeparator,
+  GHLoginButton,
+  Icons,
+  Input,
+  Layout,
+  List,
+  ListElement,
+  Loadable,
+  LoginButton,
+  Logo,
+  Modal,
+  Playground,
+  SearchBar,
+  SimpleMetric,
+  Status,
+  TabbedWindow,
+  TextWithLabel,
+  TwoColumnsLayout,
+  Versions,
+  VerticalSeparator
+}

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "@platformatic/ui-components",
-  "description": "Platformatic UI Components",
-  "version": "0.1.31",
-  "type": "module",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/platformatic/ui-components.git"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
-    "build-storybook": "NODE_OPTIONS='--openssl-legacy-provider' build-storybook",
-    "tailwind:watch": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --watch",
-    "tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css",
-    "lint": "standard src | snazzy",
-    "lint:fix": "standard src --fix",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "autoprefixer": "^10.4.12",
-    "postcss": "^8.4.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-tooltip": "^4.4.3",
-    "spinners-react": "^1.0.7",
-    "storybook-tailwind-foundations": "^1.1.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@fastify/pre-commit": "^2.0.2",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-vite": "^0.2.4",
-    "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.1.0",
-    "babel-loader": "^8.2.5",
-    "happy-dom": "^7.6.6",
-    "jsdom": "^20.0.1",
-    "react-test-renderer": "^18.2.0",
-    "snazzy": "^9.0.0",
-    "standard": "^17.0.0",
-    "tailwindcss": "^3.1.8",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3"
-  },
-  "standard": {
-    "globals": [
-      "expect",
-      "test",
-      "alert"
-    ],
-    "ignore": [
-      "/dist"
-    ]
-  },
-  "pre-commit": [
-    "lint",
-    "test"
-  ]
-}
+{
+  "name": "@platformatic/ui-components",
+  "description": "Platformatic UI Components",
+  "version": "0.1.33",
+  "type": "module",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/platformatic/ui-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "storybook": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
+    "build-storybook": "NODE_OPTIONS='--openssl-legacy-provider' build-storybook",
+    "tailwind:watch": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css --watch",
+    "tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css",
+    "lint": "standard src | snazzy",
+    "lint:fix": "standard src --fix",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-tooltip": "^4.4.3",
+    "spinners-react": "^1.0.7",
+    "storybook-tailwind-foundations": "^1.1.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@fastify/pre-commit": "^2.0.2",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "babel-loader": "^8.2.5",
+    "happy-dom": "^7.6.6",
+    "jsdom": "^20.0.1",
+    "react-test-renderer": "^18.2.0",
+    "snazzy": "^9.0.0",
+    "standard": "^17.0.0",
+    "tailwindcss": "^3.1.8",
+    "vite": "^3.1.0",
+    "vitest": "^0.24.3"
+  },
+  "standard": {
+    "globals": [
+      "expect",
+      "test",
+      "alert"
+    ],
+    "ignore": [
+      "/dist"
+    ]
+  },
+  "pre-commit": [
+    "lint",
+    "test"
+  ]
+}

package/postcss.config.cjs

@@ -1,8 +1,8 @@
-'use strict'
-
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-}
+'use strict'
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

package/public/api-icon-closed.svg

@@ -1,6 +1,6 @@
-<svg width="38" height="42" viewBox="0 0 38 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.12022 22.3583C4.18631 22.3583 1 19.1696 1 15.2381C1 11.3065 4.18631 8.11784 8.11784 8.12022C8.11784 4.18631 11.3065 1 15.2381 1C18.1449 1 20.6433 2.74124 21.7492 5.23965C21.9498 5.22054 22.1529 5.21099 22.3583 5.21099C25.6377 5.21099 28.3965 7.42994 29.2229 10.4467C29.7627 10.289 30.3336 10.203 30.9236 10.203C34.2795 10.203 37 12.926 37 16.2818C37 19.6377 34.2795 22.3583 30.9236 22.3583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13 11.5V18.5M13 31V28M13 25V21.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M25 13V19M25 34.5V31M25 28V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19 15.4L19 22.5M19 40.5L19 36.5M19 25.5L19 33.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="38" height="42" viewBox="0 0 38 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.12022 22.3583C4.18631 22.3583 1 19.1696 1 15.2381C1 11.3065 4.18631 8.11784 8.11784 8.12022C8.11784 4.18631 11.3065 1 15.2381 1C18.1449 1 20.6433 2.74124 21.7492 5.23965C21.9498 5.22054 22.1529 5.21099 22.3583 5.21099C25.6377 5.21099 28.3965 7.42994 29.2229 10.4467C29.7627 10.289 30.3336 10.203 30.9236 10.203C34.2795 10.203 37 12.926 37 16.2818C37 19.6377 34.2795 22.3583 30.9236 22.3583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 11.5V18.5M13 31V28M13 25V21.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 13V19M25 34.5V31M25 28V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 15.4L19 22.5M19 40.5L19 36.5M19 25.5L19 33.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/public/api-icon.svg

@@ -1,9 +1,9 @@
-<svg width="38" height="56" viewBox="0 0 38 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.12022 22.3583C4.18631 22.3583 1 19.1696 1 15.2381C1 11.3065 4.18631 8.11784 8.11784 8.12022C8.11784 4.18631 11.3065 1 15.2381 1C18.1449 1 20.6433 2.74124 21.7492 5.23965C21.9498 5.22054 22.1529 5.21099 22.3583 5.21099C25.6377 5.21099 28.3965 7.42994 29.2229 10.4467C29.7627 10.289 30.3336 10.203 30.9236 10.203C34.2795 10.203 37 12.926 37 16.2818C37 19.6377 34.2795 22.3583 30.9236 22.3583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13 11.5V31H11.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M25 13V31H28" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M19 15.4L19 51.2L30.4 51.2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="7" cy="31" r="3" stroke="white" stroke-width="2"/>
-<circle cx="31" cy="31" r="3" stroke="white" stroke-width="2"/>
-<circle cx="34" cy="51.2" r="3" stroke="white" stroke-width="2"/>
-</svg>
+<svg width="38" height="56" viewBox="0 0 38 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.12022 22.3583C4.18631 22.3583 1 19.1696 1 15.2381C1 11.3065 4.18631 8.11784 8.11784 8.12022C8.11784 4.18631 11.3065 1 15.2381 1C18.1449 1 20.6433 2.74124 21.7492 5.23965C21.9498 5.22054 22.1529 5.21099 22.3583 5.21099C25.6377 5.21099 28.3965 7.42994 29.2229 10.4467C29.7627 10.289 30.3336 10.203 30.9236 10.203C34.2795 10.203 37 12.926 37 16.2818C37 19.6377 34.2795 22.3583 30.9236 22.3583" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 11.5V31H11.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 13V31H28" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 15.4L19 51.2L30.4 51.2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="7" cy="31" r="3" stroke="white" stroke-width="2"/>
+<circle cx="31" cy="31" r="3" stroke="white" stroke-width="2"/>
+<circle cx="34" cy="51.2" r="3" stroke="white" stroke-width="2"/>
+</svg>

package/src/App.jsx

@@ -1,12 +1,12 @@
-import Layout from './components/layouts/Layout'
-import Main from './components/Main'
-
-function App () {
-  return (
-    <Layout>
-      <Main />
-    </Layout>
-  )
-}
-
-export default App
+import Layout from './components/layouts/Layout'
+import Main from './components/Main'
+
+function App () {
+  return (
+    <Layout>
+      <Main />
+    </Layout>
+  )
+}
+
+export default App

package/src/components/BorderedBox.jsx

@@ -1,16 +1,16 @@
-'use strict'
-
-import { getColor } from '../lib/utils'
-import styles from './BorderedBox.module.css'
-import commonStyles from './Common.module.css'
-import React from 'react'
-export default function BorderedBox (props) {
-  const { classes, color, children } = props
-  const borderColor = getColor('border', color)
-
-  return (
-    <div className={`${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor}`}>
-      {children}
-    </div>
-  )
-}
+'use strict'
+
+import { getColor } from '../lib/utils'
+import styles from './BorderedBox.module.css'
+import commonStyles from './Common.module.css'
+import React from 'react'
+export default function BorderedBox (props) {
+  const { classes, color, children } = props
+  const borderColor = getColor('border', color)
+
+  return (
+    <div className={`${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor}`}>
+      {children}
+    </div>
+  )
+}

package/src/components/BorderedBox.module.css

@@ -1,3 +1,3 @@
-.borderedBox {
-  @apply rounded-md p-5 bg-dark-blue text-white mb-4 flex-1 gap-y-4;
+.borderedBox {
+  @apply rounded-md p-5 bg-dark-blue text-white mb-4 flex-1 gap-y-4;
 }

package/src/components/BorderedText.jsx

@@ -1,8 +1,8 @@
-'use strict'
-import styles from './BorderedText.module.css'
-import React from 'react'
-export default function BorderedText (props) {
-  return (
-    <span className={styles.bordered}>{props.text}</span>
-  )
-}
+'use strict'
+import styles from './BorderedText.module.css'
+import React from 'react'
+export default function BorderedText (props) {
+  return (
+    <span className={styles.bordered}>{props.text}</span>
+  )
+}

package/src/components/BorderedText.module.css

@@ -1,3 +1,3 @@
-.bordered {
-  @apply border border-solid rounded-md px-2 py-1 border-white tracking-[.25rem] text-white;
+.bordered {
+  @apply border border-solid rounded-md px-2 py-1 border-white tracking-[.25rem] text-white;
 }

package/src/components/Box.jsx

@@ -1,14 +1,14 @@
-'use strict'
-
-import styles from './Box.module.css'
-import React from 'react'
-export default function Box ({ justifyCentered, children }) {
-  let className = `${styles.box}`
-  if (justifyCentered) className += ` ${styles.justifyCentered}`
-
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  )
-}
+'use strict'
+
+import styles from './Box.module.css'
+import React from 'react'
+export default function Box ({ justifyCentered, children }) {
+  let className = `${styles.box}`
+  if (justifyCentered) className += ` ${styles.justifyCentered}`
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  )
+}