@contentful/experiences-components-react 0.0.1-beta.0 → 0.0.1-beta.1

package/README.md

@@ -38,14 +38,6 @@ npm install @contentful/experiences-components-react
 
 By default, the components are unstyled. This allows you to style the components to match your brand and design system. If you want a set of default styles to get started, see below.
 
-### Including default styles
-
-A set of optional, default styles are included with the components. To include them, import the `styles.css` file from the `@contentful/experiences-components-react` package:
-
-```jsx
-import '@contentful/experiences-components-react/styles.css';
-```
-
 ### Adding custom styles
 
 Each component has a css class that you can use to add your own styles. The classes are named in the style of `cf-{component-name}` (ie `cf-button`).

package/dist/index.js

@@ -428,7 +428,7 @@ const TextComponentDefinition = {
     },
 };
 
-var css_248z$2 = ".cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
+var css_248z$2 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\n.cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
 styleInject(css_248z$2);
 
 const Image = ({ className = '', src, cfImageAsset, ...props }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-components-react",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.1",
   "description": "A basic set of components to use with Studio Experiences",
   "homepage": "https://github.com/contentful/experience-builder/tree/next/packages/components#readme",
   "repository": {
@@ -10,13 +10,12 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "style": "./styles.css",
   "type": "module",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
   "scripts": {
-    "clean": "rimraf dist && rimraf styles.css",
+    "clean": "rimraf dist",
     "predev": "npm run clean",
     "dev": "rollup -c ./rollup.config.mjs --watch --environment DEV",
     "prebuild": "npm run clean",
@@ -32,7 +31,6 @@
   "license": "MIT",
   "files": [
     "readme.md",
-    "styles.css",
     "package.json",
     "dist/**/*.*"
   ],
@@ -76,10 +74,10 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@contentful/experiences-core": "0.0.1-beta.0",
+    "@contentful/experiences-core": "0.0.1-beta.1",
     "@contentful/rich-text-react-renderer": "^15.17.2",
     "postcss-import": "^15.1.0",
     "style-inject": "^0.3.0"
   },
-  "gitHead": "7dd5f4c79bdf539080dbde14d70b25c3257bf279"
+  "gitHead": "cc255e27017366cf0e1e9bf721dcf7b5827ad1c3"
 }

package/styles.css

@@ -1,70 +0,0 @@
-@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);
-
-:root {
-  /* All sizing comments based of 16px base body font size */
-
-  /* color */
-  --cf-color-white: #fff;
-  --cf-color-black: #000;
-  --cf-color-gray100: #f7f9fa;
-  --cf-color-gray400: #aec1cc;
-  --cf-color-gray400-rgb: 174, 193, 204;
-
-  /* spacing */
-  --cf-spacing-0: 0rem; /* 0px */
-  --cf-spacing-1: 0.125rem; /* 2px */
-  --cf-spacing-2: 0.25rem; /* 4px */
-  --cf-spacing-3: 0.375rem; /* 6px */
-  --cf-spacing-4: 0.5rem; /* 8px */
-  --cf-spacing-5: 0.625rem; /* 10px */
-  --cf-spacing-6: 0.75rem; /* 12px */
-  --cf-spacing-7: 0.875rem; /* 14px */
-  --cf-spacing-8: 1rem; /* 16px */
-  --cf-spacing-9: 1.25rem; /* 20px */
-  --cf-spacing-10: 1.5rem; /* 24px */
-  --cf-spacing-11: 1.75rem; /* 28px */
-  --cf-spacing-12: 2rem; /* 32px */
-  --cf-spacing-13: 2.25rem; /* 36px */
-
-  /* font-size */
-  --cf-text-xs: 0.75rem; /* 12px */
-  --cf-text-sm: 0.875rem; /* 14px */
-  --cf-text-base: 1rem; /* 16px */
-  --cf-text-lg: 1.125rem; /* 18px */
-  --cf-text-xl: 1.25rem; /* 20px */
-  --cf-text-2xl: 1.5rem; /* 24px */
-  --cf-text-3xl: 2rem; /* 32px */
-  --cf-text-4xl: 2.75rem; /* 44px */
-
-  /* font-weight */
-  --cf-font-light: 300;
-  --cf-font-normal: 400;
-  --cf-font-medium: 500;
-  --cf-font-semibold: 600;
-  --cf-font-bold: 700;
-  --cf-font-extra-bold: 800;
-  --cf-font-black: 900;
-
-  /* border-radius */
-  --cf-border-radius-none: 0px; /* none */
-  --cf-border-radius-sm: 0.125rem; /* 2px */
-  --cf-border-radius: 0.25rem; /* 4px */
-  --cf-border-radius-md: 0.375rem; /* 6px */
-  --cf-border-radius-lg: 0.5rem; /* 8px */
-  --cf-border-radius-xl: 0.75rem; /* 12px */
-  --cf-border-radius-2xl: 1rem; /* 16px */
-  --cf-border-radius-3xl: 1.5rem; /* 24px */
-  --cf-border-radius-full: 9999px; /* full */
-
-  /* font-family */
-  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;
-  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;
-
-  /* max widths */
-  --cf-max-width-full: 100%;
-
-  /* component specific colors */
-  --cf-button-bg: var(--cf-color-black);
-  --cf-button-color: var(--cf-color-white);
-  --cf-text-color: var(--cf-color-black);
-}