@windstream/react-shared-components 0.0.2 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # @windstream/react-shared-components
 
-A comprehensive React component library built with TypeScript and Tailwind CSS, designed for Kinetic applications.
+A comprehensive React component library built with TypeScript and Tailwind CSS, designed for Kinetic applications. This library provides a complete set of reusable UI components following the Kinetic design system.
 
 ## 🚀 Features
 
@@ -10,6 +10,9 @@ A comprehensive React component library built with TypeScript and Tailwind CSS,
 - **Accessible**: Components follow accessibility best practices
 - **Customizable**: Easy to customize with CSS variables and Tailwind classes
 - **Tree-shakeable**: Optimized for bundle size with proper exports
+- **Storybook**: Interactive component documentation and development environment
+- **Design System**: Comprehensive design tokens following Kinetic brand guidelines
+- **Material Icons**: Built-in Material Symbols Rounded icon support
 
 ## 📦 Installation
 
@@ -23,51 +26,40 @@ pnpm add @windstream/react-shared-components
 
 ## 🔧 Setup
 
-### Tailwind CSS
-
-This library requires Tailwind CSS to be installed in your project. Make sure you have Tailwind CSS configured:
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-### Import Styles
+### Prerequisites
 
-**Important**: Styles are NOT automatically included when you import components. You MUST manually import the CSS file in your application.
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+- Tailwind CSS 3.4+ (for styling)
 
-Import the library styles in your main CSS file (recommended approach):
+### Tailwind CSS Configuration
 
-```css
-@import '@windstream/react-shared-components/dist/styles.css';
-```
+This library requires Tailwind CSS to be installed and configured in your project. You can extend the library's Tailwind configuration:
 
-Or import it directly in your JavaScript/TypeScript entry file:
+```js
+// tailwind.config.js
+const sharedConfig = require('@windstream/react-shared-components/tailwind.config');
 
-```tsx
-import '@windstream/react-shared-components/dist/styles.css';
+module.exports = {
+  ...sharedConfig,
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@windstream/react-shared-components/src/**/*.{js,jsx,ts,tsx}',
+  ],
+};
 ```
 
-**CSS Import Order**: The order in which you import styles matters:
-- If you want to override package styles with your own `globals.css`, import the package styles **before** your `globals.css`
-- If you want package styles to take precedence, import them **after** your `globals.css`
-
-Example with CSS import order control:
-
-```css
-/* In your main CSS file (e.g., globals.css) */
-/* Import package styles first */
-@import '@windstream/react-shared-components/dist/styles.css';
-
-/* Then your app-specific overrides */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Your custom styles that can override package styles */
-.bg-bg-fill-brand {
-  background-color: #your-custom-color;
-}
+Or import the Tailwind config directly:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('@windstream/react-shared-components/tailwind.config')],
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@windstream/react-shared-components/src/**/*.{js,jsx,ts,tsx}',
+  ],
+};
 ```
 
 ## 🎯 Usage
@@ -88,6 +80,25 @@ function MyComponent() {
 }
 ```
 
+### Import Paths
+
+The library provides multiple export paths for different use cases:
+
+```tsx
+// Core components (recommended)
+import { Button, Input, Text } from '@windstream/react-shared-components/core';
+
+// Utilities
+import { cx, clsx } from '@windstream/react-shared-components/utils';
+
+// Styles (required - styles are not automatically included)
+import '@windstream/react-shared-components/dist/styles.css';
+// Or in CSS: @import '@windstream/react-shared-components/dist/styles.css';
+
+// Tailwind config
+const tailwindConfig = require('@windstream/react-shared-components/tailwind.config');
+```
+
 ### Component Examples
 
 #### Button
@@ -115,14 +126,24 @@ import { Button } from '@windstream/react-shared-components/core';
 #### Input
 
 ```tsx
-import { Input } from '@windstream/react-shared-components/core';
+import { Input, InputField, TextInput } from '@windstream/react-shared-components/core';
 
+// Input, InputField, and TextInput are all aliases for the same component
 <Input 
   placeholder="Enter text"
   type="text"
   variant="default"
   size="medium"
 />
+
+<InputField 
+  placeholder="Enter text"
+  label="Name"
+/>
+
+<TextInput 
+  placeholder="Enter text"
+/>
 ```
 
 #### Text
@@ -137,10 +158,32 @@ import { Text } from '@windstream/react-shared-components/core';
 
 ### Utilities
 
+The `cx` utility is an enhanced version of `clsx` that intelligently merges Tailwind classes:
+
 ```tsx
 import { cx, clsx } from '@windstream/react-shared-components/utils';
 
-const classes = cx('btn', condition && 'btn-primary');
+// cx automatically merges conflicting Tailwind classes
+const classes = cx('btn', 'btn-primary', condition && 'btn-secondary');
+// If condition is true, btn-secondary will override btn-primary
+
+// clsx is also available for basic class name concatenation
+const basicClasses = clsx('btn', condition && 'active');
+```
+
+### Hooks
+
+```tsx
+import { useBodyScrollLock } from '@windstream/react-shared-components/core';
+
+function Modal({ isOpen }) {
+  // Lock body scroll when modal is open
+  useBodyScrollLock(isOpen, true);
+  
+  return (
+    // Modal content
+  );
+}
 ```
 
 ## 🎨 Available Components
@@ -150,9 +193,12 @@ All components are available from the `/core` export path:
 ```tsx
 import { 
   Button, 
-  Input, 
+  Input,
+  InputField,
+  TextInput,
   Link, 
-  List, 
+  List,
+  ListItem,
   MaterialIcon, 
   Spinner, 
   Text,
@@ -170,54 +216,96 @@ import {
   SeeMore,
   SelectPlanButton,
   Skeleton,
+  PageSkeleton,
   Tooltip,
-  ViewCartButton
+  ViewCartButton,
+  useBodyScrollLock
 } from '@windstream/react-shared-components/core';
 ```
 
 ### Core Components
 
 - **Button** - Versatile button component with multiple variants and sizes
-- **Input** - Form input component with validation states
+- **Input / InputField / TextInput** - Form input component with validation states (all are aliases)
 - **Link** - Accessible link component
-- **List** - List and list item components
-- **MaterialIcon** - Material Design icon component
+- **List / ListItem** - List and list item components
+- **MaterialIcon** - Material Design icon component using Material Symbols Rounded
 - **Spinner** - Loading spinner component
-- **Text** - Typography component with predefined variants
+- **Text** - Typography component with predefined variants (heading1-6, body1-3, etc.)
 - **CallButton** - Button component for call-to-action
-- **Modal** - Modal dialog component
+- **Modal** - Modal dialog component with customizable size, shape, and animations
 - **Accordion** - Collapsible accordion component
 - **Checkbox** - Checkbox input component
-- **Select** - Select dropdown component
+- **Select** - Select dropdown component (powered by react-select)
 - **AlertCard** - Alert notification card component
-- **BrandButton** - Branded button variant
+- **BrandButton** - Branded button variant with responsive sizing
 - **Checklist** - Checklist component
 - **Collapse** - Collapsible content component
 - **Divider** - Divider/separator component
 - **RadioButton** - Radio button input component
 - **SeeMore** - Expandable content component
 - **SelectPlanButton** - Plan selection button
-- **Skeleton** - Loading skeleton component
+- **Skeleton / PageSkeleton** - Loading skeleton components
 - **Tooltip** - Tooltip component
 - **ViewCartButton** - Shopping cart button component
 
+### Custom Hooks
+
+- **useBodyScrollLock** - Hook to lock/unlock body scroll (useful for modals)
+
 ### Component Variants
 
 Each component comes with multiple variants and sizes to fit different use cases:
 
 - **Variants**: default, primary, secondary, outline, unstyled
-- **Sizes**: small, medium, large
+- **Sizes**: small (btn-small), medium (btn-medium), large (btn-large), x-large (btn-x-large)
 - **States**: loading, disabled, error, success
 
+### Typography Variants
+
+The `Text` component supports the following typography variants via className:
+
+- **Headings**: `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`
+- **Subheadings**: `subheading1`, `subheading2`, `subheading3`, `subheading4`, `subheading5`, `subheading6`
+- **Body**: `body1`, `body2`, `body3`
+- **Labels**: `label1`, `label2`, `label3`, `label4`, `label5`, `label6`
+- **Other**: `footnote`, `micro`
+
 ## 🎨 Design System
 
-This library follows the Kinetic design system with:
+This library follows the Kinetic design system with comprehensive design tokens:
+
+### Color System
+
+- **Brand Colors**: Primary brand color (#24A76A) with variants (accent, active, hover, disabled, etc.)
+- **Semantic Colors**: Success, critical (error), info, inverse
+- **Surface Colors**: Background fills, surfaces with states (active, hover, selected, disabled)
+- **Text Colors**: Default, brand, critical, secondary, inverse, disabled
+- **Border Colors**: Default, brand, critical, focus, hover, disabled
+- **Icon Colors**: Brand, critical, default, info, inverse, secondary, success
+
+### Typography
+
+- **Font Families**: 
+  - Sans-serif (configurable via CSS variable `--win-site-font`)
+  - Material Symbols Rounded (for icons)
+  - Figtree (for body text)
+- **Font Sizes**: Comprehensive scale from micro (12px) to heading1 (48px)
+- **Line Heights**: Standardized line heights for optimal readability
 
-- **Color Palette**: Primary, secondary, and semantic colors
-- **Typography**: Consistent font sizes and line heights
-- **Spacing**: Standardized spacing scale
-- **Shadows**: Consistent shadow system
-- **Border Radius**: Unified border radius values
+### Spacing & Layout
+
+- **Spacing Scale**: Custom spacing values (1.5, 2, 3, 4, 4.5, 6, 7, 13, 15, 17, 18, 26)
+- **Border Radius**: Custom radius values (2.5, 3.5, 2xl, 2.5xl, 4xl)
+- **Shadows**: drop, light, cardDrop, card
+
+### Responsive Breakpoints
+
+- `sm`: 640px
+- `md`: 768px
+- `lg`: 1024px
+- `xl`: 1280px
+- `max`: 1200px
 
 ## 🔧 Development
 
@@ -236,7 +324,7 @@ cd kinetic-react-shared-components
 # Install dependencies
 npm install
 
-# Start development mode
+# Start development mode (watch mode)
 npm run dev
 
 # Build the library
@@ -245,11 +333,32 @@ npm run build
 # Run tests
 npm test
 
+# Run tests in watch mode
+npm run test:watch
+
 # Run linting
 npm run lint
 
+# Fix linting issues
+npm run lint:fix
+
 # Format code
 npm run format
+
+# Check code formatting
+npm run format:check
+
+# Type check
+npm run type-check
+
+# Start Storybook (component documentation)
+npm run storybook
+
+# Build Storybook
+npm run build-storybook
+
+# Clean build artifacts
+npm run clean
 ```
 
 ### Project Structure
@@ -290,17 +399,30 @@ src/
 
 The library is built using Rollup with the following outputs:
 
-- **CommonJS**: `dist/index.js`
-- **ES Modules**: `dist/index.esm.js`
-- **TypeScript declarations**: `dist/index.d.ts`
+- **CommonJS**: `dist/index.js` and `dist/utils/index.js`
+- **ES Modules**: `dist/index.esm.js` and `dist/utils/index.esm.js`
+- **TypeScript declarations**: `dist/index.d.ts`, `dist/core.d.ts`, and `dist/utils/index.d.ts`
+- **Styles**: `dist/styles.css` (extracted and minified)
 
 All components are exported from a single entry point (`src/index.ts`), which allows for:
 - Simplified build process
 - Consistent import path: `@windstream/react-shared-components/core`
 - Tree-shaking support for optimal bundle sizes
+- Separate utils export path for utility-only imports
+
+### Package Exports
+
+The package provides the following export paths:
+
+- `@windstream/react-shared-components/core` - All components and hooks
+- `@windstream/react-shared-components/utils` - Utility functions (cx, clsx)
+- `@windstream/react-shared-components/styles.css` - Compiled CSS styles
+- `@windstream/react-shared-components/tailwind.config` - Tailwind configuration
 
 ## 🧪 Testing
 
+The library uses Jest and React Testing Library for testing:
+
 ```bash
 # Run tests
 npm test
@@ -312,6 +434,8 @@ npm run test:watch
 npm run test:coverage
 ```
 
+Test files should be named `*.test.ts` or `*.test.tsx` and placed alongside the components they test.
+
 ## 📝 Contributing
 
 1. Fork the repository
@@ -342,19 +466,48 @@ For support and questions:
 
 ## 🔄 Changelog
 
-### v0.1.0
-- Initial release
-- Core components: Button, Input, Link, List, MaterialIcon, Spinner, Text
-- Additional components: CallButton, Modal, Accordion, Checkbox, Select, AlertCard, BrandButton, Checklist, Collapse, Divider, RadioButton, SeeMore, SelectPlanButton, Skeleton, Tooltip, ViewCartButton
-- TypeScript support
-- Tailwind CSS integration
-- Unified `/core` export path for all components
-- Simplified build process with single entry point
-- Comprehensive documentation
+### v0.0.2
+- Current version
+- 23+ React components with full TypeScript support
+- Comprehensive design system with Tailwind CSS
+- Material Symbols Rounded icon support
+- Storybook integration for component documentation
+- Custom hooks (useBodyScrollLock)
+- Utility functions (cx, clsx) with Tailwind class merging
+- Multiple export paths (core, utils, styles, tailwind.config)
+- CommonJS and ES Module builds
+- Full type definitions
+
+### Components Included
+- **Form Components**: Button, Input, Checkbox, RadioButton, Select
+- **Layout Components**: List, ListItem, Divider, Collapse, Accordion
+- **Feedback Components**: Spinner, Skeleton, PageSkeleton, AlertCard, Tooltip
+- **Navigation Components**: Link, Modal, SeeMore
+- **Specialized Components**: CallButton, BrandButton, SelectPlanButton, ViewCartButton
+- **Typography**: Text component with comprehensive variant system
+- **Icons**: MaterialIcon component
 
 ## 📚 Additional Resources
 
 - [React Documentation](https://reactjs.org/)
 - [Tailwind CSS Documentation](https://tailwindcss.com/)
 - [TypeScript Documentation](https://www.typescriptlang.org/)
-- [Kinetic Design System](https://design.kinetic.com/)
+- [Storybook Documentation](https://storybook.js.org/)
+- [Material Symbols](https://fonts.google.com/icons)
+- [React Testing Library](https://testing-library.com/react)
+- [Jest Documentation](https://jestjs.io/)
+
+## 📦 Package Information
+
+- **Package Name**: `@windstream/react-shared-components`
+- **Current Version**: `0.0.2`
+- **License**: MIT
+- **Repository**: [GitHub](https://github.com/kinetic/react-shared-components)
+- **Issues**: [GitHub Issues](https://github.com/kinetic/react-shared-components/issues)
+
+## 🔗 Related Packages
+
+This package is part of the Kinetic ecosystem and works seamlessly with:
+- Kinetic design system tokens
+- Kinetic applications and services
+- Other Windstream/Kinetic React packages

package/dist/contentful/index.d.ts

@@ -0,0 +1,62 @@
+type AccordionProps = {};
+
+declare const Accordion: React.FC<{
+    fields: AccordionProps;
+}>;
+
+type CalloutProps = {};
+
+declare const Callout: React.FC<{
+    fields: CalloutProps;
+}>;
+
+type CardsProps = {};
+
+declare const Cards: React.FC<{
+    fields: CardsProps;
+}>;
+
+type CarouselProps = {};
+
+declare const Carousel: React.FC<{
+    fields: CarouselProps;
+}>;
+
+type FloatingBannerProps = {};
+
+declare const FloatingBanner: React.FC<{
+    fields: FloatingBannerProps;
+}>;
+
+type FooterProps = {};
+
+declare const Footer: React.FC<{
+    fields: FooterProps;
+}>;
+
+type ImagePromoBarProps = {};
+
+declare const ImagePromoBar: React.FC<{
+    fields: ImagePromoBarProps;
+}>;
+
+type NavigationProps = {};
+
+declare const Navigation: React.FC<{
+    fields: NavigationProps;
+}>;
+
+type PrimaryHeroProps = {};
+
+declare const PrimaryHero: React.FC<{
+    fields: PrimaryHeroProps;
+}>;
+
+type TextProps = {};
+
+declare const Text: React.FC<{
+    fields: TextProps;
+}>;
+
+export { Accordion, Callout, Cards, Carousel, FloatingBanner, Footer, ImagePromoBar, Navigation, PrimaryHero, Text };
+export type { AccordionProps, CalloutProps, CardsProps, CarouselProps, FloatingBannerProps, FooterProps, ImagePromoBarProps, NavigationProps, PrimaryHeroProps, TextProps };

package/dist/contentful/index.esm.js

@@ -0,0 +1,2 @@
+import{jsx as i}from"react/jsx-runtime";const d=({fields:d})=>i("div",{children:"Accordion"}),e=({fields:d})=>i("div",{children:"Callout"}),l=({fields:d})=>i("div",{children:"Cards"}),r=({fields:d})=>i("div",{children:"Carousel"}),n=({fields:d})=>i("div",{children:"FloatingBanner"}),o=({fields:d})=>i("div",{children:"Footer component"}),c=({fields:d})=>i("div",{children:"Image Promo Bar"}),s=({fields:d})=>i("div",{children:"Navigation"}),a=({fields:d})=>i("div",{children:"Primary Hero"}),f=({fields:d})=>i("div",{children:"Text Block"});export{d as Accordion,e as Callout,l as Cards,r as Carousel,n as FloatingBanner,o as Footer,c as ImagePromoBar,s as Navigation,a as PrimaryHero,f as Text};
+//# sourceMappingURL=index.esm.js.map

package/dist/contentful/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/contentful/blocks/accordion/index.tsx","../../src/contentful/blocks/callout/index.tsx","../../src/contentful/blocks/cards/index.tsx","../../src/contentful/blocks/carousel/index.tsx","../../src/contentful/blocks/floating-banner/index.tsx","../../src/contentful/blocks/footer/index.tsx","../../src/contentful/blocks/image-promo-bar/index.tsx","../../src/contentful/blocks/navigation/index.tsx","../../src/contentful/blocks/primary-hero/index.tsx","../../src/contentful/blocks/text/index.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null],"names":["Accordion","fields","_jsx","Callout","Cards","Carousel","FloatingBanner","Footer","ImagePromoBar","Navigation","PrimaryHero","Text"],"mappings":"8CAEaA,EAAkD,EAAGC,YACzDC,gCCDIC,EAA8C,EAAGF,YACrDC,8BCDIE,EAA0C,EAAGH,YACjDC,4BCDIG,EAAgD,EAAGJ,YACvDC,+BCDII,EAA0D,EAAGL,YACjEC,qCCDIK,EAA4C,EAAGN,YACnDC,uCCDIM,EAA0D,EAAGP,YACjEC,sCCDIO,EAAoD,EAAGR,YAC3DC,iCCDIQ,EAAsD,EAAGT,YAC7DC,mCCDIS,EAAwC,EAAGV,YAC/CC"}

package/dist/contentful/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");exports.Accordion=({fields:r})=>e.jsx("div",{children:"Accordion"}),exports.Callout=({fields:r})=>e.jsx("div",{children:"Callout"}),exports.Cards=({fields:r})=>e.jsx("div",{children:"Cards"}),exports.Carousel=({fields:r})=>e.jsx("div",{children:"Carousel"}),exports.FloatingBanner=({fields:r})=>e.jsx("div",{children:"FloatingBanner"}),exports.Footer=({fields:r})=>e.jsx("div",{children:"Footer component"}),exports.ImagePromoBar=({fields:r})=>e.jsx("div",{children:"Image Promo Bar"}),exports.Navigation=({fields:r})=>e.jsx("div",{children:"Navigation"}),exports.PrimaryHero=({fields:r})=>e.jsx("div",{children:"Primary Hero"}),exports.Text=({fields:r})=>e.jsx("div",{children:"Text Block"});
+//# sourceMappingURL=index.js.map

package/dist/contentful/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/contentful/blocks/accordion/index.tsx","../../src/contentful/blocks/callout/index.tsx","../../src/contentful/blocks/cards/index.tsx","../../src/contentful/blocks/carousel/index.tsx","../../src/contentful/blocks/floating-banner/index.tsx","../../src/contentful/blocks/footer/index.tsx","../../src/contentful/blocks/image-promo-bar/index.tsx","../../src/contentful/blocks/navigation/index.tsx","../../src/contentful/blocks/primary-hero/index.tsx","../../src/contentful/blocks/text/index.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null],"names":["fields","_jsx"],"mappings":"kEAE+D,EAAGA,YACzDC,EAAAA,kDCDkD,EAAGD,YACrDC,EAAAA,8CCD8C,EAAGD,YACjDC,EAAAA,+CCDoD,EAAGD,YACvDC,EAAAA,wDCD8D,EAAGD,YACjEC,EAAAA,sDCDgD,EAAGD,YACnDC,EAAAA,+DCD8D,EAAGD,YACjEC,EAAAA,2DCDwD,EAAGD,YAC3DC,EAAAA,uDCD0D,EAAGD,YAC7DC,EAAAA,kDCD4C,EAAGD,YAC/CC,EAAAA"}

package/dist/core.d.ts

@@ -55,16 +55,16 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
-    size?: "medium" | "large" | "slim" | undefined;
+    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
+    size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
-    prefixIconSize?: 24 | 20 | 40 | 48 | undefined;
+    prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
-    suffixIconSize?: 24 | 20 | 40 | 48 | undefined;
+    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
     loading?: boolean | undefined;
@@ -295,7 +295,7 @@ type ButtonCustomProps = {
 };
 type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
 
-declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/dist/index.d.ts

@@ -55,15 +55,15 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "error" | "default" | "filled" | "active" | "focus" | "hover" | undefined;
-    size?: "medium" | "large" | "slim" | undefined;
+    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
+    size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
+    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
@@ -295,7 +295,7 @@ type ButtonCustomProps = {
 };
 type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
 
-declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",
@@ -13,6 +13,9 @@
       ],
       "utils": [
         "./dist/utils/index.d.ts"
+      ],
+      "contentful": [
+        "./dist/contentful/index.d.ts"
       ]
     }
   },
@@ -32,6 +35,11 @@
       "import": "./dist/utils/index.esm.js",
       "require": "./dist/utils/index.js"
     },
+    "./contentful": {
+      "types": "./dist/contentful/index.d.ts",
+      "import": "./dist/contentful/index.esm.js",
+      "require": "./dist/contentful/index.js"
+    },
     "./tailwind.config": {
       "types": "./tailwind.config.cjs",
       "require": "./tailwind.config.cjs",

package/src/contentful/blocks/accordion/index.tsx

@@ -0,0 +1,7 @@
+import { AccordionProps } from "./types";
+
+export const Accordion: React.FC<{ fields: AccordionProps }> = ({ fields }) => {
+  return <div>Accordion</div>;
+};
+
+export default Accordion;

package/src/contentful/blocks/accordion/types.ts

@@ -0,0 +1 @@
+export type AccordionProps = {} 

package/src/contentful/blocks/callout/index.tsx

@@ -0,0 +1,7 @@
+import { CalloutProps } from "./types";
+
+export const Callout: React.FC<{ fields: CalloutProps }> = ({ fields }) => {
+  return <div>Callout</div>;
+};
+
+export default Callout;

package/src/contentful/blocks/callout/types.ts

@@ -0,0 +1 @@
+export type CalloutProps = {} 

package/src/contentful/blocks/cards/index.tsx

@@ -0,0 +1,7 @@
+import { CardsProps } from "./types";
+
+export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
+  return <div>Cards</div>;
+};
+
+export default Cards;

package/src/contentful/blocks/cards/types.ts

@@ -0,0 +1 @@
+export type CardsProps = {} 

package/src/contentful/blocks/carousel/index.tsx

@@ -0,0 +1,7 @@
+import { CarouselProps } from "./types";
+
+export const Carousel: React.FC<{ fields: CarouselProps }> = ({ fields }) => {
+  return <div>Carousel</div>;
+};
+
+export default Carousel;

package/src/contentful/blocks/carousel/types.ts

@@ -0,0 +1 @@
+export type CarouselProps = {}

package/src/contentful/blocks/floating-banner/index.tsx

@@ -0,0 +1,7 @@
+import { FloatingBannerProps } from "./types";
+
+export const FloatingBanner: React.FC<{fields: FloatingBannerProps}> = ({ fields }) => {
+  return <div>FloatingBanner</div>;
+};
+
+export default FloatingBanner;

package/src/contentful/blocks/floating-banner/types.ts

@@ -0,0 +1 @@
+export type FloatingBannerProps = {}

package/src/contentful/blocks/footer/index.tsx

@@ -0,0 +1,7 @@
+import { FooterProps } from "./types";
+
+export const Footer: React.FC<{ fields: FooterProps }> = ({ fields }) => {
+  return <div>Footer component</div>;
+};
+
+export default Footer;

package/src/contentful/blocks/footer/types.ts

@@ -0,0 +1 @@
+export type FooterProps = {}

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -0,0 +1,7 @@
+import { ImagePromoBarProps } from "./types";
+
+export const ImagePromoBar: React.FC<{ fields: ImagePromoBarProps }> = ({ fields }) => {
+  return <div>Image Promo Bar</div>;
+};
+
+export default ImagePromoBar;

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -0,0 +1 @@
+export type ImagePromoBarProps = {}

package/src/contentful/blocks/navigation/index.tsx

@@ -0,0 +1,7 @@
+import { NavigationProps } from "./types";
+
+export const Navigation: React.FC<{ fields: NavigationProps }> = ({ fields }) => {
+  return <div>Navigation</div>;
+};
+
+export default Navigation;

package/src/contentful/blocks/navigation/types.ts

@@ -0,0 +1 @@
+export type NavigationProps = {}

package/src/contentful/blocks/primary-hero/index.tsx

@@ -0,0 +1,7 @@
+import { PrimaryHeroProps } from "./types";
+
+export const PrimaryHero: React.FC<{ fields: PrimaryHeroProps }> = ({ fields }) => {
+  return <div>Primary Hero</div>;
+};
+
+export default PrimaryHero;

package/src/contentful/blocks/primary-hero/types.ts

@@ -0,0 +1 @@
+export type PrimaryHeroProps = {}

package/src/contentful/blocks/text/index.tsx

@@ -0,0 +1,6 @@
+import { TextProps } from "./types";
+
+export const Text: React.FC<{ fields: TextProps }> = ({ fields }) => {
+  return <div>Text Block</div>;
+};
+export default Text;

package/src/contentful/blocks/text/types.ts

@@ -0,0 +1 @@
+export type TextProps = {}

package/src/contentful/index.ts

@@ -0,0 +1,31 @@
+// Contentful Blocks
+export { Accordion } from "./blocks/accordion";
+export type { AccordionProps } from "./blocks/accordion/types";
+
+export { Callout } from "./blocks/callout";
+export type { CalloutProps } from "./blocks/callout/types";
+
+export { Cards } from "./blocks/cards";
+export type { CardsProps } from "./blocks/cards/types";
+
+export { Carousel } from "./blocks/carousel";
+export type { CarouselProps } from "./blocks/carousel/types";
+
+export { FloatingBanner } from "./blocks/floating-banner";
+export type { FloatingBannerProps } from "./blocks/floating-banner/types";
+
+export { Footer } from "./blocks/footer";
+export type { FooterProps } from "./blocks/footer/types";
+
+export { ImagePromoBar } from "./blocks/image-promo-bar";
+export type { ImagePromoBarProps } from "./blocks/image-promo-bar/types";
+
+export { Navigation } from "./blocks/navigation";
+export type { NavigationProps } from "./blocks/navigation/types";
+
+export { PrimaryHero } from "./blocks/primary-hero";
+export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
+
+export { Text } from "./blocks/text";
+export type { TextProps } from "./blocks/text/types";
+