@a-little-world/little-world-design-system 2.10.0

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/env", { "targets": { "node": "18" } }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,36 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+const require = createRequire(import.meta.url);
+export default {
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@chromatic-com/storybook",
+    "storybook-addon-remix-react-router",
+    "@storybook/addon-docs"
+  ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  stories: [
+    '../src/components/**/*.stories.tsx',
+    '../src/components/**/*.mdx',
+    '../src/utils/*.mdx',
+    '../src/storybook/*.mdx',
+  ],
+
+  features: {
+    interactionsDebugger: true,
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;600;700&family=Work+Sans:wght@700&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+import { GlobalStyles } from '../src/index';
+import { CustomThemeProvider, themes } from '../src/theme';
+import { ThemeVariants } from '@a-little-world/little-world-design-system-core';
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes,
+    defaultTheme: ThemeVariants.light,
+    Provider: CustomThemeProvider,
+    GlobalStyles: GlobalStyles,
+  }),
+];
+export const tags = ['autodocs'];

package/.turbo/turbo-build.log

@@ -0,0 +1,14 @@
+
+
+> @a-little-world/little-world-design-system@2.10.0 build /home/tim/development/little-world/little-world-design-system/packages/web
+> rimraf dist && npm run build:esm && npm run build:cjs
+
+
+> @a-little-world/little-world-design-system@2.10.0 build:esm
+> tsc --outDir dist/esm
+
+⠙
+> @a-little-world/little-world-design-system@2.10.0 build:cjs
+> tsc --module commonjs --outDir dist/cjs
+
+⠙

package/CHANGELOG.md

@@ -0,0 +1,398 @@
+# @a-little-world/little-world-design-system
+
+## 2.10.0
+
+### Minor Changes
+
+- Add new Radio Group type
+- Fix styling for Popover close button
+- Add withBackground prop to MultiSelection for styling variation
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.7.0
+
+## 2.9.0
+
+### Minor Changes
+
+- Add loading logo type
+- Improve Button Icon type styling
+- Add ShareScreen Icon
+- Improve Icon styling in MultiDropdown & TextInput components
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.6.0
+
+## 2.8.0
+
+### Minor Changes
+
+- Update styling of TextArea and Button Icon Type
+
+## 2.7.0
+
+### Minor Changes
+
+- Expo 54 upgrades
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.5.0
+
+## 2.5.4
+
+### Patch Changes
+
+- Updated dependencies
+  - Change versioning for react packages to allow minor update versions for React 19
+
+## 2.6.0
+
+### Patch Changes
+
+- Fix TextArea component mobile keyboard behavior
+  - Added touch device detection to prevent Enter key from submitting form on mobile devices
+  - Enter key now correctly creates new lines on mobile while maintaining submit functionality on desktop
+  - Improved cross-platform compatibility for text input handling
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.4.4
+
+## 2.5.3
+
+### Patch Changes
+
+- Add onlyCountries prop to TextInput (for phone numbers)
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.4.3
+
+## 2.5.2
+
+### Minor Changes
+
+- Add nonInteractive option to text parser
+  - Renders interactive elements (buttons, links) as plain text
+  - Preserves styling tags (bold, highlight)
+  - Prevents URL auto-conversion to clickable links
+- Enhance Text component stories with comprehensive nonInteractive visual tests
+
+### Patch Changes
+
+- Fix parser tests for nonInteractive functionality
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.4.2
+
+## 2.5.1
+
+### Patch Changes
+
+- Add className to StatusMessage
+- Do not spread key in attribute props for svg elements
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.4.1
+
+## 2.5.0
+
+### Minor Changes
+
+- Upgrade to React 19
+- Improve StatusMessage component
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.4.0
+
+## 2.4.0
+
+### Minor Changes
+
+- Implement version 2 of text parser (non-regex based)
+
+## 2.3.4
+
+### Patch Changes
+
+- Fix issue with TextArea size
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.3.4
+
+## 2.3.3
+
+### Patch Changes
+
+- Fix issue with publishing error
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.3.3
+
+## 2.3.2
+
+### Patch Changes
+
+- Fix some dark mode colors
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.3.2
+
+## 2.3.1
+
+### Patch Changes
+
+- **Fix issue with gradient label**
+- **Add line-height logic to Text**
+- **Add setMode to customThemeProvider**
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.3.1
+
+## 2.3.0
+
+### Minor Changes
+
+- **ESLint Integration**: Added comprehensive ESLint configuration with TypeScript support, React hooks rules, and accessibility guidelines
+- **Code Quality**: Implemented strict linting rules for better code consistency and maintainability across all components
+- **Type Safety**: Enhanced TypeScript configurations with proper project references and type checking
+- **Component Improvements**: Enhanced various component implementations with better styling and functionality
+
+### Patch Changes
+
+- **Utility Consolidation**: Removed duplicate utility files (`isValidUrl.ts`, `validDomains.ts`) and consolidated them in the core package
+- **Theme System**: Fixed theme provider issues and improved browser API handling with proper SSR support
+- **Component Styling**: Enhanced component styling consistency and improved theme integration
+- **Build System**: Updated build configurations for better cross-platform compatibility
+- **Dependencies**: Updated and optimized package dependencies for improved performance and security
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.3.0
+
+## 2.2.9
+
+### Patch Changes
+
+- Ensure web Icons take className prop and add surface.quaternary
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.2.3
+
+## 2.2.8
+
+### Patch Changes
+
+- Move theme declaration into index file
+- Improve styling of AccordionContent
+- Remove redundant copy-declaration scripts
+
+## 2.2.7
+
+### Patch Changes
+
+- Fix theme type declaration import in index file (Unsuccessful)
+
+## 2.2.6
+
+### Patch Changes
+
+- Fix theme type declaration import in index file (Unsuccessful)
+
+## 2.2.5
+
+### Patch Changes
+
+- Fix theme type declaration import in theme file (Unsuccessful)
+
+## 2.2.4
+
+### Patch Changes
+
+- **TypeScript Integration**: Fixed styled-components theme type declarations by ensuring theme.d.ts is included in build output, resolving "Property 'color' does not exist on type 'DefaultTheme'" errors in consuming applications
+- **Accordion Component**: Added ContentWrapper prop for flexible content styling - consumers can now pass custom styled components to wrap accordion content
+- **Icon System**: Enhanced icon gradient system with improved diagonal gradient support for better visual consistency
+- **SVG Processing**: Improved SVG gradient definitions with better universal applicability across different icon shapes
+- **Accordion Component**: Fixed TypeScript issues with Accordion component by removing required type prop dependency
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.2.2
+
+## 2.2.3
+
+### Patch Changes
+
+- **Theme System**: Fixed critical theme provider issues that were causing undefined theme objects and runtime errors in consuming applications
+- **Dependencies**: Moved react-router and styled-components to peer dependencies to prevent version conflicts and bundling issues
+- **Accordion Component**: Fixed TypeScript issues with Accordion component by removing required type prop dependency
+- **Icon System**: Improved gradient system with better universal gradient support for square icons
+- **Build Process**: Enhanced build configuration and dependency management
+- **Component Exports**: Added ThemeWeb type export for better TypeScript support
+- **Testing**: Improved test configuration and setup for better reliability
+
+### Updated Dependencies
+
+- @a-little-world/little-world-design-system-core@1.2.1
+
+## 2.2.2
+
+### Patch Changes
+
+- **Type Exports**: Added ThemeWeb type export for better TypeScript integration
+- **Component Improvements**: Enhanced various component implementations and exports
+
+## 2.2.1
+
+### Patch Changes
+
+- **Theme Provider**: Fixed theme provider issues in web package that were causing undefined theme objects
+- **Testing**: Resolved test configuration issues and improved test setup
+- **Component Stability**: Enhanced component stability and error handling
+
+## 2.2.0
+
+### Minor Changes
+
+- **Font Loading**: Fixed issues with loading fonts in web environments by implementing conditional font exports
+- **Theme Integration**: Improved theme construction to properly preserve breakpoints, radius, and spacing properties
+
+### Patch Changes
+
+- **Build System**: Enhanced build process for better cross-platform compatibility
+- **Package Structure**: Improved package organization and exports
+
+### Updated Dependencies
+
+- @a-little-world/little-world-design-system-core@1.2.0
+
+## 2.1.0
+
+### Minor Changes
+
+- **Illustration Components**: Enhanced illustration component system with improved SVG processing and better component structure
+- **Icon Components**: Updated icon component creation utilities for better performance and consistency
+- **Theme Integration**: Improved theme handling and integration across components
+- **SVG Utilities**: Enhanced SVG processing utilities for better web rendering
+- **Component Exports**: Updated component exports to include latest illustration and icon improvements
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.1.5
+
+## 2.0.3
+
+### Patch Changes
+
+- Fix patch build issue with incorrect reference to workspaces
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.1.4
+
+## 2.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.1.3
+
+## 2.0.1
+
+### Patch Changes
+
+## 📚 Documentation Improvements
+
+- **Storybook MDX**: Enhanced theme accessibility in MDX documentation files
+- **Design Tokens**: Added comprehensive documentation for spacing, radius, and breakpoints
+- **Color System**: Improved color token documentation with proper theme implementation
+- **Typography**: Updated typography documentation with accurate font size values from core
+
+## 🔧 Technical Improvements
+
+- **Theme Integration**: Fixed MDX files to use theme directly instead of tokensPixelated
+- **Documentation Structure**: Reorganized foundation documentation for better discoverability
+- **Implementation Examples**: Updated all code examples to use proper styled-components theme pattern
+
+- Updated dependencies
+  - @a-little-world/little-world-design-system-core@1.1.2
+
+## 2.0.0
+
+### Major Changes
+
+- bd7e9d2: # BREAKING: Monorepo Refactor - Core Package Extraction
+
+  ## What Changed
+  - **Extracted shared design tokens and types** into a new `@a-little-world/little-world-design-system-core` package
+  - **Restructured the design system** into a monorepo with separate packages for web, native, and core
+  - **Updated styled-components** from v5 to v6 for better compatibility
+  - **Added Toast component** to the core package
+
+  ## Why This Change Was Made
+  - **Better separation of concerns** - Core tokens and types are now reusable across web and native
+  - **Improved maintainability** - Shared code is centralized and versioned independently
+  - **Enhanced developer experience** - Clear package boundaries and dependencies
+  - **New functionality** - Toast component provides consistent notification system
+
+  ## How to Update Your Code
+
+  ### For Web Applications
+  1. **Update your package.json**:
+
+     ```json
+     {
+       "dependencies": {
+         "@a-little-world/little-world-design-system": "^2.0.0",
+         "@a-little-world/little-world-design-system-core": "^1.1.0"
+       }
+     }
+     ```
+
+  2. **Update imports** (if you were importing tokens directly):
+
+     ```typescript
+     // OLD
+     import {
+       colors,
+       spacing,
+     } from '@a-little-world/little-world-design-system';
+
+     // NEW
+     import {
+       colors,
+       spacing,
+     } from '@a-little-world/little-world-design-system-core';
+     ```
+
+  3. **Component imports remain the same**:
+     ```typescript
+     import { Button, Text } from '@a-little-world/little-world-design-system';
+     ```
+
+  ### For React Native Applications
+  1. **Add the native package**:
+
+     ```json
+     {
+       "dependencies": {
+         "@a-little-world/little-world-design-system-native": "^0.1.0",
+         "@a-little-world/little-world-design-system-core": "^1.1.0"
+       }
+     }
+     ```
+
+  2. **Import components**:
+     ```typescript
+     import {
+       Button,
+       Text,
+     } from '@a-little-world/little-world-design-system-native';
+     ```
+
+  ## Migration Checklist
+  - [ ] Update package.json dependencies
+  - [ ] Update any direct token imports to use the core package
+  - [ ] Test your application thoroughly
+  - [ ] Update any build configurations if needed
+
+  ## Support
+
+  If you encounter any issues during migration, please check the [documentation](https://github.com/a-little-world/little-world-design-system) or create an issue.
+
+### Patch Changes
+
+- Updated dependencies [bd7e9d2]
+  - @a-little-world/little-world-design-system-core@1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Little World
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,180 @@
+# @a-little-world/little-world-design-system
+
+Web components for the Little World Design System.
+
+This system utilises [Radix Primitives](https://github.com/radix-ui/primitives) to ensure components are accessible and customizable.
+
+## Installation
+
+```bash
+npm install @a-little-world/little-world-design-system
+```
+
+## Usage
+
+```tsx
+import { Button, Text } from '@a-little-world/little-world-design-system';
+
+export default function App() {
+  return (
+    <Button variant="primary">
+      <Text>Hello World</Text>
+    </Button>
+  );
+}
+```
+
+## Fonts
+
+Ensure that you have the required fonts available by including them in your HTML file:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;600;700&family=Work+Sans:wght@700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+## Local Development
+
+### ⚠️ Important: Build from Root
+
+**Always build and publish from the root of the monorepo, never from individual package directories.**
+
+✅ **Correct (from root):**
+```bash
+pnpm build:web
+pnpm --filter=@a-little-world/little-world-design-system publish
+```
+
+❌ **Incorrect (from package directory):**
+```bash
+cd packages/web
+npm run build
+npm publish  # This will break workspace dependencies!
+```
+
+### Quick Start
+
+From the root of the monorepo:
+
+```bash
+# Build the web package
+pnpm build:web
+
+# Start Storybook for development
+pnpm storybook:web
+
+# Build Storybook for production
+pnpm storybook:web:build
+```
+
+### Development Workflow
+
+1. **Make changes** to web components
+2. **Build package** - `pnpm build:web`
+3. **Test in Storybook** - `pnpm storybook:web`
+4. **Preview changes** - View components in Storybook at http://localhost:6006
+
+### Manual Setup
+
+If you prefer to work directly in the web package directory:
+
+```bash
+cd packages/web
+npm install
+npm run build
+npm run storybook
+```
+
+## Storybook
+
+The web package includes Storybook for component development and testing:
+
+```bash
+# From root
+pnpm storybook:web
+
+# Or from web package directory
+cd packages/web
+npm run storybook
+```
+
+## Building
+
+```bash
+# Build the web package
+pnpm build:web
+
+# Or from the web package directory
+cd packages/web
+npm run build
+```
+
+## Publishing
+
+### Automated Releases (Recommended)
+
+**Releases should ideally be automated and handled via merging into the main branch of the repo.** 
+
+See the [Versioning and Releases section in the root README](../../README.md#versioning-and-releases) for detailed information about the automated release process using Changesets.
+
+The automated workflow will:
+- Detect version changes in package.json
+- Publish to GitHub Packages registry
+- Create GitHub releases with changelog information
+- Handle all publishing steps automatically
+
+### Manual Publishing (Fallback)
+
+If you need to publish manually (not recommended):
+
+```bash
+# Ensure you're authenticated to GitHub Packages
+npm login --registry=https://npm.pkg.github.com
+
+pnpm build:web
+pnpm --filter=@a-little-world/little-world-design-system publish
+```
+
+**Note**: Manual publishing bypasses the automated changelog generation and release management. Use the automated process whenever possible.
+
+## Dependencies
+
+This package depends on:
+- `@a-little-world/little-world-design-system-core` - Core design tokens and utilities
+- `react` - React framework
+- `styled-components` - Styling library
+- `@radix-ui/react-*` - Radix UI primitives for accessibility
+
+## Gotcha's! Going from web to native...
+
+In React Native, when you set `minWidth` on a component, it doesn't automatically expand beyond that width based on content like it would on the web. The flexbox implementation in React Native is more strict about respecting explicit dimensions.
+
+**Recommendation**: For most cases:
+- Use `flex: 1` when you want a component to fill its parent
+- Use `max-width` to limit the size
+- Otherwise use an explicit `width` and manage the content
+
+## Contributing
+
+Check [contribution guidelines](CONTRIBUTING.md).
+
+## Versioning and Releases
+
+This package uses [Changesets](https://github.com/changesets/changesets) for version management. See the root README for detailed information about the release process.
+
+**Note**: The manual release process described below is deprecated. Use Changesets instead.
+
+### Deprecated Manual Release Process
+
+~~In order to release a new version of this package:~~
+
+1. ~~Bump the version in the `package.json` and run `npm install` to update the package-lock.json in the relevant release branch.~~
+2. ~~Ensure your release branch has been tested, approved and merged into `main`.~~
+3. ~~Go to the "Draft a release" [section](https://github.com/a-little-world/little-world-design-system/releases/new) of the repo.~~
+4. ~~Create a tag that relates to the new version.~~
+5. ~~Include the release version in the title and give an appropriate description~~
+6. ~~Hit the "publish release" button which will trigger a github action that will publish the new version to npm.~~

package/__mocks__/focus-trap-react.tsx

@@ -0,0 +1 @@
+export default ({ children }) => children;

package/__mocks__/svg.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const SvgrMock = props => <svg {...props} data-testid="svg" />;
+
+export const ReactComponent = SvgrMock;
+export default SvgrMock;