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

package/dist/cjs/storybook/RadiusDocumentation.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../components/Text/Text"));
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const RadiusItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+const RadiusVisual = styled_components_1.default.div `
+  width: 120px;
+  height: 80px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ $radius }) => $radius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid ${({ theme }) => theme.color.border.contrast};
+`;
+const RadiusInfo = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const RadiusLabel = styled_components_1.default.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const RadiusValue = styled_components_1.default.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const RadiusSection = () => {
+    const theme = (0, styled_components_1.useTheme)();
+    const radiusTokens = [
+        {
+            key: 'xxxsmall',
+            value: theme.radius.xxxsmall,
+            description: '4px - Subtle rounding',
+        },
+        {
+            key: 'xxsmall',
+            value: theme.radius.xxsmall,
+            description: '8px - Standard rounding',
+        },
+        {
+            key: 'xsmall',
+            value: theme.radius.xsmall,
+            description: '12px - Comfortable rounding',
+        },
+        {
+            key: 'small',
+            value: theme.radius.small,
+            description: '16px - Noticeable rounding',
+        },
+        {
+            key: 'medium',
+            value: theme.radius.medium,
+            description: '20px - Prominent rounding',
+        },
+        {
+            key: 'large',
+            value: theme.radius.large,
+            description: '24px - Generous rounding',
+        },
+        {
+            key: 'xlarge',
+            value: theme.radius.xlarge,
+            description: '32px - Substantial rounding',
+        },
+        {
+            key: 'xxlarge',
+            value: theme.radius.xxlarge,
+            description: '40px - Maximum rounding',
+        },
+        {
+            key: 'massive',
+            value: theme.radius.massive,
+            description: '100px - Dramatic rounding',
+        },
+        {
+            key: 'half',
+            value: theme.radius.half,
+            description: '50% - Circular elements',
+        },
+        {
+            key: 'full',
+            value: theme.radius.full,
+            description: '100% - Fully rounded',
+        },
+    ];
+    return (react_1.default.createElement(Container, null, radiusTokens.map(({ key, value, description }) => (react_1.default.createElement(RadiusItem, { key: key },
+        react_1.default.createElement(RadiusVisual, { "$radius": value },
+            react_1.default.createElement(Text_1.default, { type: "Body4" }, value)),
+        react_1.default.createElement(RadiusInfo, null,
+            react_1.default.createElement(RadiusLabel, null,
+                react_1.default.createElement(Text_1.default, { type: "Body4" }, key)),
+            react_1.default.createElement(RadiusValue, null,
+                react_1.default.createElement(Text_1.default, { type: "Body6" }, description))))))));
+};
+exports.default = RadiusSection;

package/dist/cjs/storybook/SpacingDocumentation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SpacingSection: () => React.JSX.Element;
+export default SpacingSection;

package/dist/cjs/storybook/SpacingDocumentation.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../components/Text/Text"));
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const SpacingItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+const SpacingVisual = styled_components_1.default.div `
+  width: 200px;
+  height: 24px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  padding: ${({ $size }) => $size};
+`;
+const SpacingInfo = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const SpacingLabel = styled_components_1.default.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const SpacingValue = styled_components_1.default.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const SpacingSection = () => {
+    const theme = (0, styled_components_1.useTheme)();
+    const spacingTokens = [
+        {
+            key: 'xxxxsmall',
+            value: theme.spacing.xxxxsmall,
+            description: '2px - Minimal spacing',
+        },
+        {
+            key: 'xxxsmall',
+            value: theme.spacing.xxxsmall,
+            description: '4px - Tight spacing',
+        },
+        {
+            key: 'xxsmall',
+            value: theme.spacing.xxsmall,
+            description: '8px - Standard spacing',
+        },
+        {
+            key: 'xsmall',
+            value: theme.spacing.xsmall,
+            description: '12px - Comfortable spacing',
+        },
+        {
+            key: 'small',
+            value: theme.spacing.small,
+            description: '16px - Standard section spacing',
+        },
+        {
+            key: 'medium',
+            value: theme.spacing.medium,
+            description: '24px - Breathing room',
+        },
+        {
+            key: 'large',
+            value: theme.spacing.large,
+            description: '32px - Generous spacing',
+        },
+        {
+            key: 'xlarge',
+            value: theme.spacing.xlarge,
+            description: '40px - Substantial spacing',
+        },
+        {
+            key: 'xxlarge',
+            value: theme.spacing.xxlarge,
+            description: '64px - Maximum spacing',
+        },
+        {
+            key: 'massive',
+            value: theme.spacing.massive,
+            description: '120px - Dramatic spacing',
+        },
+    ];
+    return (react_1.default.createElement(Container, null, spacingTokens.map(({ key, value, description }) => (react_1.default.createElement(SpacingItem, { key: key },
+        react_1.default.createElement(SpacingVisual, { "$size": value },
+            react_1.default.createElement(Text_1.default, { type: "Body4", style: { color: 'white' } }, value)),
+        react_1.default.createElement(SpacingInfo, null,
+            react_1.default.createElement(SpacingLabel, null,
+                react_1.default.createElement(Text_1.default, { type: "Body4" }, key)),
+            react_1.default.createElement(SpacingValue, null,
+                react_1.default.createElement(Text_1.default, { type: "Body6" }, description))))))));
+};
+exports.default = SpacingSection;

package/dist/cjs/theme/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { ThemeVariants, ThemeContextType } from '@a-little-world/little-world-design-system-core';
+export declare const lightTheme: DefaultTheme;
+export declare const darkTheme: DefaultTheme;
+export declare const defaultTheme: DefaultTheme;
+export declare const themes: {
+    readonly light: DefaultTheme;
+    readonly dark: DefaultTheme;
+};
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeVariants;
+    enableDarkMode?: boolean;
+}
+export declare const themeContext: React.Context<ThemeContextType>;
+export declare const CustomThemeProvider: ({ children, defaultMode, enableDarkMode, }: ThemeProviderProps) => React.JSX.Element;

package/dist/cjs/theme/index.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomThemeProvider = exports.themeContext = exports.themes = exports.defaultTheme = exports.darkTheme = exports.lightTheme = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+exports.lightTheme = {
+    ...little_world_design_system_core_1.tokensPixelated,
+    color: little_world_design_system_core_1.tokensPixelated.color.theme.light,
+};
+exports.darkTheme = {
+    ...little_world_design_system_core_1.tokensPixelated,
+    color: little_world_design_system_core_1.tokensPixelated.color.theme.dark,
+};
+exports.defaultTheme = exports.lightTheme;
+exports.themes = {
+    light: exports.lightTheme,
+    dark: exports.darkTheme,
+};
+exports.themeContext = (0, react_1.createContext)({
+    toggleMode: () => { },
+    setMode: (_mode) => { },
+    currentMode: little_world_design_system_core_1.defaultThemeVariant,
+});
+const { Provider } = exports.themeContext;
+const CustomThemeProvider = ({ children, defaultMode = little_world_design_system_core_1.defaultThemeVariant, enableDarkMode = false, }) => {
+    const [currentMode, setCurrentMode] = (0, react_1.useState)(defaultMode);
+    (0, react_1.useEffect)(() => {
+        if (enableDarkMode && typeof window !== 'undefined') {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (savedTheme && ['dark', 'light'].includes(savedTheme)) {
+                setCurrentMode(savedTheme);
+            }
+            else if (prefersDark) {
+                setCurrentMode(little_world_design_system_core_1.ThemeVariants.dark);
+            }
+        }
+    }, [enableDarkMode]);
+    const toggleMode = (0, react_1.useCallback)(() => {
+        setCurrentMode((currentMode) => currentMode === little_world_design_system_core_1.ThemeVariants.light
+            ? little_world_design_system_core_1.ThemeVariants.dark
+            : little_world_design_system_core_1.ThemeVariants.light);
+    }, []);
+    const setMode = (0, react_1.useCallback)((mode) => {
+        setCurrentMode(mode);
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        currentMode,
+        toggleMode,
+        setMode,
+    }), [currentMode, toggleMode, setMode]);
+    return (react_1.default.createElement(Provider, { value: contextValue },
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: exports.themes[currentMode] || exports.defaultTheme }, children)));
+};
+exports.CustomThemeProvider = CustomThemeProvider;

package/dist/cjs/utils/animations.d.ts

@@ -0,0 +1,12 @@
+export declare const enterFromRight: import("styled-components/dist/models/Keyframes").default;
+export declare const enterFromLeft: import("styled-components/dist/models/Keyframes").default;
+export declare const exitToRight: import("styled-components/dist/models/Keyframes").default;
+export declare const exitToLeft: import("styled-components/dist/models/Keyframes").default;
+export declare const slideUpAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideRightAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideDownAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideLeftAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const scaleIn: import("styled-components/dist/models/Keyframes").default;
+export declare const scaleOut: import("styled-components/dist/models/Keyframes").default;
+export declare const fadeIn: import("styled-components/dist/models/Keyframes").default;
+export declare const fadeOut: import("styled-components/dist/models/Keyframes").default;

package/dist/cjs/utils/animations.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fadeOut = exports.fadeIn = exports.scaleOut = exports.scaleIn = exports.slideLeftAndFade = exports.slideDownAndFade = exports.slideRightAndFade = exports.slideUpAndFade = exports.exitToLeft = exports.exitToRight = exports.enterFromLeft = exports.enterFromRight = void 0;
+const styled_components_1 = require("styled-components");
+exports.enterFromRight = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  `;
+exports.enterFromLeft = (0, styled_components_1.keyframes) `
+    from {
+        opacity: 0;
+        transform: translateX(-200px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+  `;
+exports.exitToRight = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  `;
+exports.exitToLeft = (0, styled_components_1.keyframes) `
+from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+`;
+exports.slideUpAndFade = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+exports.slideRightAndFade = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+exports.slideDownAndFade = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+exports.slideLeftAndFade = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+exports.scaleIn = (0, styled_components_1.keyframes) `
+ from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+ `;
+exports.scaleOut = (0, styled_components_1.keyframes) `
+from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+  }
+`;
+exports.fadeIn = (0, styled_components_1.keyframes) `
+from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+exports.fadeOut = (0, styled_components_1.keyframes) `
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;

package/dist/cjs/utils/createReactSvg.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SvgTransformOptions, ParsedSvg } from '@a-little-world/little-world-design-system-core';
+export declare const createReactSvg: (svgData: ParsedSvg, options: SvgTransformOptions) => React.JSX.Element;

package/dist/cjs/utils/createReactSvg.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactSvg = void 0;
+const react_1 = __importDefault(require("react"));
+const IconGradient_1 = __importDefault(require("../components/Icon/IconGradient"));
+// Helper function to generate unique keys
+const generateUniqueKey = (element, index) => {
+    return `${element.type}-${index}-${Math.random()
+        .toString(36)
+        .substring(2, 11)}`;
+};
+// Helper function to safely render children, filtering out null values
+const renderChildren = (children, options, parentIndex) => {
+    return children
+        .map((child, i) => renderSvgElement(child, options, `${parentIndex}-${i}`))
+        .filter(Boolean); // Filter out null elements
+};
+// Renders SVG elements recursively
+const renderSvgElement = (element, options, index) => {
+    const { gradient, gradientId, color } = options;
+    // Get all attributes and override fill for path elements if needed
+    const attrs = { ...element.attributes };
+    // Handle color attributes for SVG elements based on the colorAttribute property
+    // If element has color set that isn't #000 - do not override
+    if (element.colorAttribute && element.colorAttribute !== 'none') {
+        if (attrs[element.colorAttribute] === '#000') {
+            attrs[element.colorAttribute] = gradient
+                ? `url(#${gradientId})`
+                : color || 'currentColor';
+        }
+        else {
+            attrs[element.colorAttribute] =
+                attrs[element.colorAttribute] || color || 'currentColor';
+        }
+    }
+    // Add unique key attribute
+    const elementKey = generateUniqueKey(element, index);
+    switch (element.type) {
+        case 'path':
+            return react_1.default.createElement("path", { key: elementKey, ...attrs });
+        case 'g':
+            return (react_1.default.createElement("g", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'defs':
+            return (react_1.default.createElement("defs", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'linearGradient':
+            return (react_1.default.createElement("linearGradient", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'clipPath':
+            return (react_1.default.createElement("clipPath", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'stop':
+            return react_1.default.createElement("stop", { key: elementKey, ...attrs });
+        case 'circle':
+            return react_1.default.createElement("circle", { key: elementKey, ...attrs });
+        case 'rect':
+            return react_1.default.createElement("rect", { key: elementKey, ...attrs });
+        case 'line':
+            return react_1.default.createElement("line", { key: elementKey, ...attrs });
+        case 'polygon':
+            return react_1.default.createElement("polygon", { key: elementKey, ...attrs });
+        case 'polyline':
+            return react_1.default.createElement("polyline", { key: elementKey, ...attrs });
+        case 'ellipse':
+            return react_1.default.createElement("ellipse", { key: elementKey, ...attrs });
+        default:
+            console.warn(`Unsupported SVG element type: ${element.type}`);
+            return null;
+    }
+};
+const createReactSvg = (svgData, options) => {
+    const { className, width, height, gradient, gradientId, gradientType, label, } = options;
+    return (react_1.default.createElement("svg", { "aria-labelledby": label, fill: "none", focusable: false, width: width, height: height, className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: svgData.viewBox },
+        svgData.elements.map((element, index) => renderSvgElement(element, options, index)),
+        gradient && (react_1.default.createElement(IconGradient_1.default, { variation: gradient, type: gradientType, id: gradientId }))));
+};
+exports.createReactSvg = createReactSvg;

package/dist/cjs/utils/parser.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ParserOptions {
+    customElements?: {
+        Component: React.ElementType;
+        props?: Record<string, any>;
+        tag: string;
+    }[];
+    onlyLinks?: boolean;
+    nonInteractive?: boolean;
+}
+declare const textParser: (text: string, options?: ParserOptions) => string | React.JSX.Element;
+export default textParser;