@bspk/ui 1.0.1 → 1.1.12

package/dist/utils/styleAdd.js

@@ -0,0 +1,11 @@
+export function styleAdd(css, first) {
+    if (!css || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.appendChild(document.createTextNode(css));
+    if (first && document.head.firstChild)
+        document.head.insertBefore(style, document.head.firstChild);
+    else
+        document.head.appendChild(style);
+}
+//# sourceMappingURL=styleAdd.js.map

package/dist/utils/styleAdd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleAdd.js","sourceRoot":"","sources":["../../src/utils/styleAdd.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,QAAQ,CAAC,GAAW,EAAE,KAAe;IACjD,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IAChD,IAAI,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU;QAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;QAC9F,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC1C,CAAC"}

package/{utils → dist/utils}/tryIntPsrse.js

@@ -1,10 +1,8 @@
-function tryIntParse(value) {
+export function tryIntParse(value) {
     if (value === null || value === undefined)
         return null;
     const parsed = parseInt(value, 10);
     return isNaN(parsed) ? null : parsed;
 }
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-
-export { tryIntParse };
-//# sourceMappingURL=tryIntPsrse.js.map
+//# sourceMappingURL=tryIntPsrse.js.map

package/dist/utils/tryIntPsrse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tryIntPsrse.js","sourceRoot":"","sources":["../../src/utils/tryIntPsrse.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,KAAyC;IACjE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACvD,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAe,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACzC,CAAC;AAED,sDAAsD"}

package/dist/utils/txtVariants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This file is generated by the build-css script. Do not edit this file directly. Instead, edit the script and run it
+ * again.
+ */
+export declare const TXT_VARIANTS: readonly ["body-base", "body-large", "body-small", "body-x-small", "labels-base", "labels-large", "labels-small", "labels-x-small", "display-regular-large", "display-regular-medium", "display-regular-small", "display-semibold-large", "display-semibold-medium", "display-semibold-small", "heading-h1", "heading-h2", "heading-h3", "heading-h4", "heading-h5", "heading-h6", "subheader-large", "subheader-medium", "subheader-x-large", "subheader-xx-large", "subheader-xxx-large"];
+export type TxtVariant = (typeof TXT_VARIANTS)[number];
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/{utils → dist/utils}/txtVariants.js

@@ -1,4 +1,8 @@
-const TXT_VARIANTS = [
+/**
+ * This file is generated by the build-css script. Do not edit this file directly. Instead, edit the script and run it
+ * again.
+ */
+export const TXT_VARIANTS = [
     'body-base',
     'body-large',
     'body-small',
@@ -25,6 +29,5 @@ const TXT_VARIANTS = [
     'subheader-xx-large',
     'subheader-xxx-large',
 ];
-
-export { TXT_VARIANTS };
-//# sourceMappingURL=txtVariants.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=txtVariants.js.map

package/dist/utils/txtVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"txtVariants.js","sourceRoot":"","sources":["../../src/utils/txtVariants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,cAAc;IACd,aAAa;IACb,cAAc;IACd,cAAc;IACd,gBAAgB;IAChB,uBAAuB;IACvB,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,yBAAyB;IACzB,wBAAwB;IACxB,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,oBAAoB;IACpB,qBAAqB;CACf,CAAC;AAGX,sDAAsD"}

package/meta-types.ts

@@ -0,0 +1,46 @@
+/**
+ * This file is used to build the meta types for the project. It's used in the build-meta.ts file and also copied in to
+ * the meta output file.
+ */
+export type BaseMeta = {
+    name: string;
+    description?: string;
+    file?: string;
+};
+
+export type TypeMeta = BaseMeta & {
+    id: string;
+    example?: string;
+    references?: string[];
+    properties?: TypeProperty[];
+};
+
+export type TypeProperty = {
+    name: string;
+    description?: string;
+    type?: string[] | string;
+    default?: unknown;
+    required?: boolean;
+    options?: number[] | string[];
+    variants?: string[];
+    properties?: TypeProperty[];
+    references?: string[];
+    minimum?: number;
+    maximum?: number;
+};
+
+export type ComponentMeta = BaseMeta & {
+    slug: string;
+    dependencies: string[];
+    modified: string;
+    css: string;
+    hasTouchTarget: boolean;
+};
+
+export type UtilityMeta = BaseMeta & {
+    param?: string;
+    returns?: string;
+    example?: string;
+};
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/meta.ts

@@ -0,0 +1,465 @@
+/* eslint-disable no-console */
+/**
+ * $ npm run meta
+ *
+ * This script generates the meta file which contains the information about the component, hooks, and utilities. This
+ * file scrapes from the JSdoc and also the Typescript types.
+ *
+ * The output file should not be included in this repo. ⚡️
+ */
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+import * as TJS from 'typescript-json-schema';
+
+import { ComponentMeta, TypeProperty, UtilityMeta, TypeMeta } from './meta-types';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+function jsDocParse(content: string) {
+    try {
+        const contentTrimmed = content
+            .trim()
+            .replace(/^\/\*\*/, '')
+            .replace(/\*\/$/, '');
+
+        const chunks: string[] = contentTrimmed.replace(/\n\s*\* @/g, '&&split&&%%variable%%').split('&&split&&');
+
+        const data: Record<string, string> = {};
+
+        chunks.forEach((chunk) => {
+            if (chunk.startsWith('%%variable%%')) {
+                const chunkMatch = [...(chunk.match(/^%%variable%%([^\s]+)\s(.*)/s) || [])];
+
+                if (!chunkMatch) throw new Error(`Unable to process chunk.`);
+
+                const [, key, value] = chunkMatch;
+
+                if (!value) return;
+
+                data[key] = value
+                    .replace(/\n[ ]+\*([ ]*)/g, '\n')
+                    .replace(/^\s+\*\s+/, '')
+                    .trim();
+
+                return;
+            }
+
+            data.description = chunk
+                .replace(/\n[ ]+\*([ ]*)/g, '\n')
+                .replace(/(\S)\n(\S)/g, (_, a, b) => `${a} ${b}`)
+                .trim();
+        });
+
+        return data;
+    } catch (error) {
+        console.error(error);
+        return {};
+    }
+}
+
+async function pretty(filePath: string) {
+    execSync(`npx prettier --write "${filePath}"`, { stdio: 'inherit' });
+}
+
+function kebabCase(str: string): string {
+    return (
+        str
+            .normalize('NFD') // Normalize to decompose accents
+            .replace(/[\u0300-\u036f&()']/g, '') // Remove accents
+            // Handle camelCase by inserting hyphens between lowercase and uppercase
+            .replace(/([a-zA-Z])([A-Z][a-z])/g, '$1-$2')
+            // do it again for the next uppercase letter
+            .replace(/([a-zA-Z])([A-Z][a-z])/g, '$1-$2')
+            .replace(/[^a-zA-Z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
+            .replace(/^-+|-+$/g, '') // Trim leading or trailing hyphens
+            .replace(/--+/g, '-') // Replace multiple hyphens with a single hyphen
+            .toLowerCase()
+    ); // Convert to lowercase
+}
+
+const ENUM_SIZE_ORDER = [
+    'x-small',
+    'small',
+    'medium',
+    'base',
+    'large',
+    'x-large',
+    'xx-large',
+    'xxx-large',
+    'xxxx-large',
+    'xxxxx-large',
+];
+
+const metaFilePath = process.argv[2];
+
+if (!metaFilePath) {
+    console.error('Please provide a path to the meta file.');
+    process.exit(1);
+}
+
+const { componentsDir, hooksDir, rootPath } = {
+    componentsDir: path.resolve(__dirname, 'src'),
+    hooksDir: path.resolve(__dirname, 'src', 'hooks'),
+    rootPath: path.resolve(__dirname),
+} as const;
+
+const componentFiles = fs
+    .readdirSync(componentsDir)
+    .filter((f) => f.endsWith('.tsx'))
+    .map((fileName) => {
+        const filePath = path.resolve(componentsDir, fileName);
+        return {
+            filePath,
+            name: fileName.replace(/\.[^.]+$/, ''),
+            fileName,
+            content: fs.readFileSync(filePath, 'utf-8'),
+        };
+    });
+
+function generateComponentMeta({
+    filePath: componentFile,
+    content,
+    name,
+}: {
+    filePath: string;
+    content: string;
+    name: string;
+}): ComponentMeta | null {
+    const stats = fs.statSync(componentFile);
+
+    const componentFunctionMatch = content.match(new RegExp(`function ${name}[(<]`));
+
+    if (!componentFunctionMatch) {
+        return null;
+    }
+
+    if (!content.includes(".bspkName = '")) {
+        console.warn(`No bspkName found for component ${name} for ${componentFile}`);
+        return null;
+    }
+
+    // eslint-disable-next-line no-useless-escape
+    const allJSDocMatches = content.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//g);
+
+    const componentDocStr = [...(allJSDocMatches || [])].find((doc) => doc.includes(`@name ${name}`));
+
+    if (!componentDocStr) {
+        console.warn(`No JSDoc found for component ${name} for ${componentFile}`);
+        return null;
+    }
+
+    const componentDoc = jsDocParse(componentDocStr);
+
+    const slug = kebabCase(componentDoc.name);
+
+    const dependencies = [...content.matchAll(/import { ([^}]+) } from '\.\/([a-zA-Z]+)';/g)]
+        //
+        ?.flatMap((d) => d.slice(1).flatMap((x) => x.split(', ')))
+        .filter((d, i, arr) => arr.indexOf(d) === i);
+
+    if (!dependencies?.length) {
+        //console.info(`No dependencies OR CSS found for component ${name} for ${componentFile}`);
+    }
+
+    const cssPath = path.join(componentsDir, `${slug}.scss`);
+
+    const css = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, { encoding: 'utf-8' }) : '';
+
+    return {
+        description: componentDoc.description,
+        file: componentFile.split(componentsDir)[1],
+        name,
+        slug,
+        dependencies,
+        modified: stats.mtime.toISOString(),
+        css,
+        hasTouchTarget: css.includes('data-touch-target'),
+    };
+}
+
+async function generateUtilityMeta(utilityFile: string): Promise<UtilityMeta | null> {
+    const content = fs.readFileSync(utilityFile, 'utf-8');
+
+    const fileName = path.basename(utilityFile).replace(/\.[^.]+$/, '');
+
+    const utility = fileName;
+
+    const comment = content.match(/\/\*\*[\s\S]+?\*\//);
+
+    if (!comment?.[0]) {
+        console.info(`No JSDoc found for hook ${utility} for ${hooksDir}/${utility}.tsx`);
+        return null;
+    }
+
+    const utilityDoc = jsDocParse(comment[0]);
+
+    if (!utilityDoc.example) {
+        // console.info(`No example found for hook ${utility} for ${hooksDir}/${utility}.tsx`);
+        return null;
+    }
+
+    return {
+        description: utilityDoc.description,
+        example: utilityDoc.example,
+        file: utilityFile.split(componentsDir)[1],
+        name: utility,
+    };
+}
+
+function generateTypes() {
+    const files = fs.readdirSync(componentsDir, { recursive: true, withFileTypes: true }).flatMap((f) => {
+        if (!f.isFile()) return [];
+
+        if (!f.name.endsWith('.tsx') && !f.name.endsWith('.ts')) return [];
+
+        const content = fs.readFileSync(path.resolve(f.parentPath, f.name), 'utf-8');
+
+        // we want to ignore some problematic utility components
+        return content.includes('export type') || content.includes('export interface')
+            ? [`${f.parentPath}/${f.name}`]
+            : [];
+    });
+
+    const program = TJS.getProgramFromFiles(
+        files,
+        {
+            module: 'ES2020',
+            target: 'ES2020',
+            lib: ['es5', 'dom'],
+            sourceMap: true,
+            jsx: 'react-jsx',
+            moduleResolution: 'node',
+            noImplicitReturns: true,
+            noImplicitThis: true,
+            noImplicitAny: true,
+            strictNullChecks: true,
+            esModuleInterop: true,
+            baseUrl: '.',
+        },
+        rootPath,
+    );
+
+    const generator = TJS.buildGenerator(program, {
+        required: true,
+        defaultProps: true,
+        noExtraProps: false,
+    })!;
+
+    const symbols = generator.getSchemaForSymbols(generator.getMainFileSymbols(program), true);
+
+    const definitions = symbols.definitions as {
+        [key: string]: TJS.Definition;
+    };
+
+    const nextTypes: TypeMeta[] = [];
+
+    const cleanUpDefinitionEnums = (def: TJS.Definition): number[] | string[] | undefined => {
+        // IF all enums are numerical, fix numerical sorting
+        if (def.enum?.every((e) => typeof e === 'number')) {
+            def.enum.sort((a, b) => a - b);
+            return def.enum;
+        }
+
+        const defEnum = def.enum?.flatMap((e) => (typeof e === 'string' ? e : e?.toString() || []));
+        if (!defEnum || !defEnum.length) return undefined;
+
+        if (defEnum.some((e) => ENUM_SIZE_ORDER.includes(e)))
+            defEnum.sort((a, b) => ENUM_SIZE_ORDER.indexOf(a) - ENUM_SIZE_ORDER.indexOf(b));
+
+        return defEnum;
+    };
+
+    const defineProperty = (
+        name: string,
+        definition: TJS.DefinitionOrBoolean,
+        required?: string[],
+    ): TypeProperty | undefined => {
+        if (typeof definition !== 'object') return undefined;
+
+        const next: TypeProperty = {
+            name,
+            required: required?.includes(name),
+            description: definition.description,
+            default: definition.default === 'undefined' ? undefined : definition.default,
+            type: definition.type,
+            properties:
+                definition.properties &&
+                Object.entries(definition.properties)?.flatMap(
+                    ([name2, definition2]) => defineProperty(name2, definition2, definition.required) || [],
+                ),
+            minimum: definition.minimum,
+            maximum: definition.maximum,
+        };
+
+        const defEnum = cleanUpDefinitionEnums(definition);
+
+        if (defEnum) {
+            next.type = defEnum?.map((e) => e?.toString());
+            next.options = defEnum;
+        }
+
+        if (definition.$ref) {
+            next.type = definition.$ref.split('/').pop() as string;
+
+            if (definitions[next.type]) {
+                next.options = cleanUpDefinitionEnums(definitions[next.type]);
+            }
+        }
+
+        return next;
+    };
+
+    if (definitions)
+        Object.entries(definitions).forEach(([definitionName, definition]) => {
+            if (typeof definition !== 'object') return;
+
+            if (!definition?.properties && !definition?.allOf) return;
+
+            if (['React', 'Omit<'].some((n) => definitionName.startsWith(n))) return;
+
+            let properties: TypeProperty[] = [];
+
+            if (definition.allOf) {
+                properties = definition.allOf.flatMap((ofDefinition) => {
+                    if (typeof ofDefinition !== 'object') return [];
+
+                    if (ofDefinition.properties) {
+                        return Object.entries(ofDefinition.properties).flatMap(
+                            ([refName, refDefinition]) =>
+                                defineProperty(refName, refDefinition, ofDefinition.required) || [],
+                        );
+                    }
+
+                    if (!ofDefinition['$ref']) return [];
+
+                    const reference = ofDefinition['$ref'].substring(14);
+
+                    const defReference = definitions[reference];
+
+                    if (!defReference) return [];
+
+                    return Object.entries(defReference.properties || {}).flatMap(
+                        ([refName, refDefinition]) =>
+                            defineProperty(refName, refDefinition, defReference.required) || [],
+                    );
+                });
+            }
+
+            if (definition.properties) {
+                const props = definition.properties as Record<string, TJS.Definition>;
+                const hasDescription = Object.values(props).some((p) => p.description);
+                if (!hasDescription) {
+                    // probably a type that is only used as a reference
+                    // console.error(`${definitionName} has no description`);
+                    return;
+                }
+                properties = Object.entries(props).flatMap(
+                    ([propName, prop]) => defineProperty(propName, prop, definition.required) || [],
+                );
+            }
+
+            nextTypes.push({
+                name: definitionName,
+                properties,
+                id: kebabCase(definitionName),
+                description: definition.description,
+            });
+        });
+
+    // we don't reference types that have names less than 3 characters long
+    const nextTypeNames = nextTypes.flatMap((t) => (t.name.length > 3 ? t.name : []));
+
+    nextTypes.forEach((nextType) => {
+        const references = nextType.properties
+            ?.flatMap((prop) =>
+                nextTypeNames.filter((name) => prop.description?.includes(name) || prop.type?.includes(name)),
+            )
+            ?.filter((name, index, arr) => arr.indexOf(name) === index);
+
+        if (references && references.length > 0) nextType.references = references;
+    });
+
+    const duplicateIds = nextTypes.flatMap((t) => t.id).filter((id, index, arr) => arr.indexOf(id) !== index);
+
+    if (duplicateIds.length > 0) {
+        console.error(`Duplicate IDs found: ${duplicateIds.join(', ')}`);
+        console.error('Please fix the IDs in the components.');
+        process.exit(1);
+    }
+
+    return nextTypes;
+}
+
+async function createMeta() {
+    const componentsMeta: ComponentMeta[] = componentFiles
+        .flatMap((component) => generateComponentMeta(component) || [])
+        // filter out dependencies that aren't components
+        .map((m, _, arr): ComponentMeta => {
+            return {
+                ...m,
+                dependencies: m.dependencies?.filter((d) => arr.find((c) => c.name === d)),
+            };
+        });
+
+    componentsMeta.sort((a, b) => a.name.localeCompare(b.name));
+
+    const hookFiles = fs
+        .readdirSync(hooksDir)
+        .map((f) => `${hooksDir}/${f}`)
+        .filter((f) => f.endsWith('.tsx') || f.endsWith('.ts'));
+
+    const metaComponentNames: string[] = componentsMeta.map((m) => m.name);
+
+    const utilitiesMeta: UtilityMeta[] = [];
+    for (const hookFile of hookFiles) {
+        const elementMeta = await generateUtilityMeta(hookFile);
+        if (elementMeta) utilitiesMeta.push(elementMeta);
+    }
+    utilitiesMeta.sort((a, b) => a.name.localeCompare(b.name));
+
+    const typesMeta = generateTypes();
+    typesMeta.sort((a, b) => a.name.localeCompare(b.name));
+
+    fs.writeFileSync(
+        metaFilePath,
+        [
+            `/** This file is generated by the @bspk/ui/meta.ts script with data scraped from the library. */`,
+
+            fs.readFileSync(path.resolve(__dirname, 'meta-types.ts'), { encoding: 'utf-8' }),
+
+            `export const componentsMeta: ComponentMeta[] = ${JSON.stringify(componentsMeta, null, 2)} as const;`,
+
+            `export const utilitiesMeta: UtilityMeta[] = ${JSON.stringify(utilitiesMeta, null, 2)} as const;`,
+
+            `export const typesMeta: TypeMeta[] = ${JSON.stringify(typesMeta, null, 2)} as const;`,
+
+            `export type MetaTypeName = '${typesMeta.map((t) => t.name).join("' | '")}';`,
+
+            `export type MetaComponentName = '${metaComponentNames.join("' | '")}';`,
+        ].join('\n\n'),
+    );
+
+    pretty(metaFilePath);
+
+    console.info('Create meta complete.');
+
+    return {
+        componentsMeta,
+        utilitiesMeta,
+        typesMeta,
+    };
+}
+
+async function main() {
+    await createMeta();
+
+    process.exit(0);
+}
+
+main();
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/package.json

@@ -1,24 +1,32 @@
 {
     "name": "@bspk/ui",
-    "version": "1.0.1",
-    "main": "index.js",
+    "version": "1.1.12",
     "license": "CC-BY-4.0",
+    "type": "module",
+    "files": [
+        "dist",
+        "src",
+        "README.md",
+        "LICENSE",
+        "meta.ts",
+        "meta-types.ts"
+    ],
+    "exports": {
+        "./*": "./dist/*.js",
+        ".": "./dist/index.js"
+    },
     "scripts": {
-        "build": "ts-node .scripts/build.ts",
-        "build:css": "ts-node .scripts/build-css.ts",
-        "meta": "ts-node .scripts/build-meta-pre.ts && ts-node .scripts/build-meta.ts",
-        "lint:style": "ts-node .scripts/lint-style.ts",
-        "clean": "ts-node .scripts/clean.ts",
-        "lint": "eslint && tsc --noEmit",
+        "sass": "sass --style=compressed --no-source-map src:dist",
+        "build": "tsx build.ts",
+        "lint:css": "npx stylelint '**/*.scss'",
+        "lint": "eslint",
         "lint:fix": "eslint --fix",
-        "rollup": "rollup -c",
         "semantic-release": "semantic-release",
         "test": "jest",
-        "pack": "rm -rf ./package && npm run build && npm pack && npm run clean",
         "prepare": "husky",
-        "update:css": "npm un @bspk/styles && npm i @bspk/styles@latest && npm run build:css && npm run lint:style",
-        "prod": "npm run pack && tar -xvf ./bspk-ui-*.tgz && cp -R ./package/* ../bspk-demo/node_modules/@bspk/ui && rm -rf ./package && rm -rf bspk-ui-*.tgz",
-        "watch:dev": "ts-node .scripts/watch-dev.ts"
+        "pre:commit": "tsx .scripts/pre-commit.ts",
+        "tsc": "tsc",
+        "meta": "tsx meta.ts"
     },
     "publishConfig": {
         "access": "public"
@@ -27,19 +35,20 @@
         "node": ">=20"
     },
     "dependencies": {
-        "@bspk/icons": "^1.0.3",
         "@bspk/styles": "^1.0.0",
         "@floating-ui/dom": "^1.6.13",
         "focus-trap-react": "^11.0.1"
     },
     "peerDependencies": {
-        "@emotion/react": "^11.14.0",
-        "react": "^18.3.1"
+        "@bspk/icons": "^1.0.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     },
     "devDependencies": {
         "@cspell/eslint-plugin": "^8.17.5",
+        "@eslint/css": "^0.8.1",
         "@eslint/js": "^9.14.0",
-        "@rollup/plugin-typescript": "^12.1.1",
+        "@playwright/test": "^1.52.0",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^11.0.2",
         "@semantic-release/npm": "^12.0.1",
@@ -60,12 +69,14 @@
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "prettier-plugin-jsdoc": "^1.3.0",
-        "react-dom": "^18.3.1",
-        "rollup": "^2.79.2",
+        "sass": "^1.89.0",
         "semantic-release": "^24.2.0",
+        "stylelint": "^16.19.1",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
         "ts-jest": "^29.2.5",
-        "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
+        "tsx": "^4.19.4",
         "typescript": "5.6.3",
         "typescript-eslint": "8.13.0",
         "typescript-json-schema": "^0.65.1"