@snyk-mktg/brand-ui 2.5.9 → 2.5.10-canary.0

package/dist/scss/evo/components/atoms/_button.scss

@@ -6,17 +6,41 @@
 @use '../../../base/variables/sizing' as *;
 @use '../../../base/mixins/color-mode' as color;
 
-$primary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
-	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
-$primary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
-	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$action-base: RGBA(brandui-rgb-labels(action), 0.1);
+$action-base-dark: RGBA(brandui-rgb-labels(action-dark), 0.1);
+$action-secondary-base: RGBA(brandui-rgb-labels(action-secondary), 0.1);
+$action-secondary-base-dark: RGBA(brandui-rgb-labels(action-secondary-dark), 0.1);
+$fail-base: RGBA(brandui-rgb-labels(fail), 0.1);
+$fail-base-dark: RGBA(brandui-rgb-labels(fail-dark), 0.1);
+$fail-hover: brandui-color-labels(fail);
+$fail-hover-dark: brandui-color-labels(fail-dark);
+$neutral: brandui-color-labels(neutral-3);
+$neutral-hover: brandui-color-labels(neutral-6);
+$primary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.7),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.7), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
+$primary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.7),
+	RGBA(brandui-rgb-labels(action-secondary-dark), 0.7), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
 $secondary-conic-light-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
 	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
 $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(brandui-rgb-labels(action-dark), 0.3),
 	RGBA(brandui-rgb-labels(action-secondary-dark), 0.3), RGBA(brandui-rgb-labels(action-secondary-dark), 1);
 
+@property --glimmer-angle {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 0deg;
+}
+
+@property --glimmer-duration {
+	syntax: '<time>';
+	inherits: false;
+	initial-value: 6s;
+}
+
 .button {
 	font-family: map.get($brandui-font-family, geist-mono), monospace;
+	isolation: isolate;
+	border: none;
 	border-radius: map.get($brandui-radius, medium);
 
 	&.primary {
@@ -30,6 +54,31 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 			brandui-color-labels(action-dark),
 			brandui-color-labels(action-secondary-dark)
 		);
+		&:before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			z-index: -1;
+		}
+
+		@include color.conic-gradient-mode-pseudo(
+			'&:after',
+			background,
+			var(--glimmer-angle),
+			$primary-conic-light-values,
+			$primary-conic-dark-values
+		);
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			inset: -1px;
+			animation: glimmer var(--glimmer-duration) linear infinite;
+			border-radius: inherit;
+			z-index: -2;
+		}
+
 		&:hover,
 		&:focus {
 			@include color.gradient-mode-pseudo(
@@ -42,6 +91,9 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 				brandui-color-labels(action-secondary-dark),
 				brandui-color-labels(action-dark)
 			);
+			&:after {
+				--glimmer-duration: 2s;
+			}
 		}
 
 		// This is the rotating conic-gradient glimmer effect
@@ -55,13 +107,49 @@ $secondary-conic-dark-values: RGBA(brandui-rgb-labels(action-dark), 1), RGBA(bra
 	}
 
 	&.secondary {
+		border: none;
+		isolation: isolate;
+
 		@include color.color-mode(color, brandui-color-labels(action-secondary-contrast), brandui-color-labels(action-secondary-contrast-dark));
 		@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-1));
 
+		&:before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			backdrop-filter: blur(4px);
+			z-index: -1;
+		}
+		// This is the rotating conic-gradient glimmer effect
+		@include color.conic-gradient-mode-pseudo(
+			'&:after',
+			background,
+			var(--glimmer-angle),
+			$secondary-conic-light-values,
+			$secondary-conic-dark-values
+		);
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			inset: -1px;
+			animation: glimmer var(--glimmer-duration) linear infinite;
+			border-radius: inherit;
+			z-index: -2;
+		}
+
 		&:hover,
 		&:focus {
 			@include color.color-mode(color, brandui-color-labels(action-secondary-contrast), brandui-color-labels(action-secondary-contrast-dark));
 			@include color.color-mode-pseudo('&:before', background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-3));
+			&:before {
+				transition: background-color map.get($brandui-transition, fast);
+			}
+
+			&:after {
+				--glimmer-duration: 2s;
+			}
 		}
 
 		// This is the rotating conic-gradient glimmer effect

package/dist/scss/evo/components/molecules/_share-this.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../../../base/functions' as *;
+@use '../../../base/variables/effects' as *;
+@use '../../../base/variables/sizing' as *;
+@use '../../../base/mixins/color-mode' as color;
+@use '../../../base/mixins/typography' as font;
+
+// Not importing the other share this component because they are so different
+.share-this {
+	display: flex;
+	gap: map.get($brandui-padding, extra-small);
+
+	&-label {
+		max-width: max-content;
+		@include font.get-typography(body-bold);
+	}
+
+	&-icon {
+		text-decoration: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: map.get($brandui-padding, medium);
+		height: map.get($brandui-padding, medium);
+		border-style: solid;
+		border-width: 1px;
+		border-radius: map.get($brandui-radius, small);
+		transition: map.get($brandui-transition, 'fast');
+		padding: map.get($brandui-padding, extra-small);
+		@include color.color-mode(color, brandui-color-labels(neutral-1), brandui-color-labels(neutral-5));
+		@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-1), 0.3), RGBA(brandui-rgb-labels(neutral-5), 0.1));
+
+		&-list {
+			display: flex;
+			gap: map.get($brandui-padding, extra-small);
+		}
+
+		&:hover {
+			cursor: pointer;
+			@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill-dark));
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
+}

package/dist/scss/evo/components/molecules/cards/_card.scss

@@ -6,7 +6,10 @@
 
 .card {
 	position: relative;
+	border-width: 0.1875rem;
+	border-style: solid;
 	border-width: map.get($brandui-padding, 'hairline');
+	border-radius: map.get($brandui-radius, 'large');
 	// box-shadow: map.get($brandui-shadow, 'outline');
 	//TODO: Extend Drop shadow theme later
 	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);

package/dist/scss/evo/components/organisms/_footer.scss

@@ -22,7 +22,21 @@
 			}
 		}
 		&-social-links {
+			@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+
+			li {
+				list-style: none;
+			}
+
+			.icon-border {
+				@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-6), 0.3), RGBA(brandui-rgb-labels(neutral-1), 0.7));
+			}
+
 			a {
+				font-weight: 400;
+				text-decoration: none;
+				@include color.color-mode(color, brandui-color-labels(ui-text), brandui-color-labels(ui-text-dark));
+
 				&:hover {
 					@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 				}

package/dist/scss/evo/components/organisms/ctas/_basic-cta.scss

@@ -10,6 +10,7 @@
 	border-width: 1px;
 	background-color: none;
 	background: none;
+	box-shadow: map.get($brandui-shadow, outline);
 	@include glass.bg-glass;
 	@include glass.border-glass;
 }

package/dist/scss/labs/_components.scss

@@ -28,7 +28,6 @@
 @use '../components/molecules/alert' as *;
 @use '../components/molecules/avatar-grid-item' as *;
 @use '../components/molecules/avatar-username' as *;
-@use '../components/molecules/cards/card-bg-image' as *;
 @use '../components/molecules/charts/charts' as *;
 @use '../components/molecules/charts/vertical-chart' as *;
 @use '../components/molecules/charts/horizontal-chart' as *;
@@ -60,6 +59,7 @@
 @use './components/atoms/tooltip' as *;
 @use './components/molecules/announcements' as *;
 @use './components/molecules/cards/card' as *;
+@use './components/molecules/cards/card-bg-image' as *;
 @use './components/molecules/cards/card-repo' as *;
 @use './components/molecules/pagination' as *;
 @use './components/molecules/share-this' as *;

package/dist/scss/labs/base/_baseline.scss

@@ -20,6 +20,8 @@ h6 {
 
 code:not([class]) {
 	font-family: map.get($brandui-font-family, space-mono), monospace;
+	@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
+	@include color.color-mode(border-color, RGBA(brandui-rgb-labels(neutral-4), 0.1), RGBA(brandui-rgb-labels(neutral-2), 0.1));
 }
 
 hr {

package/dist/scss/labs/base/variables/_colors.scss

@@ -8,10 +8,18 @@ $labsui-color-labels: (
 	'ui-headline-dark': map.get($brandui-colors, 'white'),
 	'ui-body': map.get($brandui-colors, 'space'),
 	'ui-body-dark': map.get($brandui-colors, 'white'),
+	'ui-stroke': map.get($brandui-colors, 'space'),
+	'ui-stroke-dark': map.get($brandui-colors, 'dawn'),
 	'action': map.get($brandui-colors, 'deep-blue'),
 	'action-dark': map.get($brandui-colors, 'cyan'),
 	'action-secondary': map.get($brandui-colors, 'midnight'),
 	'action-secondary-dark': map.get($brandui-colors, 'snow'),
+	'neutral-1': map.get($brandui-colors, 'midnight'),
+	'neutral-2': map.get($brandui-colors, 'ocean'),
+	'neutral-3': map.get($brandui-colors, 'dawn'),
+	'neutral-4': map.get($brandui-colors, 'smoke'),
+	'neutral-5': map.get($brandui-colors, 'snow'),
+	'neutral-6': map.get($brandui-colors, 'white'),
 );
 
 $brandui-color-labels: map.merge($brandui-color-labels, $labsui-color-labels);

package/dist/scss/labs/base/variables/_typography.scss

@@ -5,6 +5,50 @@ $labsui-font-family: (
 	space-mono: 'Space Mono',
 );
 
+$brandui-font-size: (
+	hero-title-large: 5.625rem,
+	hero-title-small: 3.125rem,
+	page-title-large: 4.375rem,
+	page-title: 3rem,
+	section-title: 3rem,
+	headline-large: 2.5rem,
+	headline-small: 2rem,
+	subhead: 1.5rem,
+	subhead-small: 1.125rem,
+	mini-header: 1rem,
+	mini-header-small: 0.875rem,
+	body-lead: 1rem,
+	body-lead-bold: 1rem,
+	body: 1rem,
+	body-bold: 1rem,
+	body-long: 1.125rem,
+	body-small: 0.875rem,
+	body-small-medium: 0.875rem,
+	code: 1rem,
+) !default;
+
+$brandui-line-height: (
+	hero-title-large: 6.25rem,
+	hero-title-small: 3.75rem,
+	page-title-large: 5rem,
+	page-title: 4rem,
+	section-title: 4rem,
+	headline-large: 3rem,
+	headline-small: 2.5rem,
+	subhead: 2.25rem,
+	subhead-small: 1.75rem,
+	mini-header: 1.5rem,
+	mini-header-small: 1.5rem,
+	body-lead: 1.5rem,
+	body-lead-bold: 1.5rem,
+	body: 1.5rem,
+	body-bold: 1.5rem,
+	body-long: 2rem,
+	body-small: 1.5rem,
+	body-small-medium: 1.5rem,
+	code: 1.625rem,
+) !default;
+
 // Why does this work? Do I need the font 'as'?
 $brandui-font-family: map.merge(font.$brandui-font-family, $labsui-font-family);
 

package/dist/scss/labs/components/atoms/_button.scss

@@ -11,6 +11,7 @@
 
 .button {
 	font-family: map.get($brandui-font-family, space-mono), monospace;
+	border-radius: map.get($brandui-radius, pill);
 
 	&.primary {
 		border-width: 0.0625rem;
@@ -50,4 +51,15 @@
 			@include color.color-mode(border-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
 		}
 	}
+	&.tertiary,
+	&.glyph,
+	&.arrow,
+	&.external {
+		@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(action-dark));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+		}
+	}
 }

package/dist/scss/labs/components/atoms/triggers/_play.scss

@@ -16,6 +16,6 @@
 	}
 	&:after {
 		border-radius: map.get($brandui-radius, 'pill');
-		@include color.color-mode(background-color, brandui-color-labels(ui-fill), brandui-color-labels(ui-fill));
 	}
+	@include color.color-mode-pseudo('&:after', background-color, brandui-color-labels(action), brandui-color-labels(action-dark));
 }

package/dist/scss/labs/components/molecules/_pagination.scss

@@ -17,6 +17,11 @@
 			@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-3));
 			@include color.color-mode(border-color, brandui-color-labels(action), brandui-color-labels(neutral-3));
 			@include color.color-mode(color, brandui-color-labels(action), brandui-color-labels(neutral-6));
+			&:hover {
+				@include color.color-mode(color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+				@include color.color-mode(background-color, brandui-color-labels(neutral-6), brandui-color-labels(neutral-1));
+				@include color.color-mode(border-color, brandui-color-labels(action-secondary), brandui-color-labels(action-secondary-dark));
+			}
 		}
 		&-tile {
 			&.active {

package/dist/scss/labs/components/molecules/_table-of-contents.scss

@@ -1,11 +1,24 @@
+@use 'sass:map';
 @use '../../../components/molecules/table-of-contents';
-
+@use '../../../base/variables/effects' as *;
+@use '../../../base/mixins/color-mode' as color;
 @use '../../base/mixins/typography' as font;
 
 .toc {
+	border-radius: map.get($brandui-radius, extra-large);
+	@include color.color-mode(border-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+
+	&-title {
+		@include color.color-mode(border-bottom-color, brandui-color-labels(ui-stroke), brandui-color-labels(ui-stroke-dark));
+	}
+
 	&-item {
 		&-link {
 			@include font.get-typography(body-small);
 		}
 	}
+
+	&.active {
+		@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
+	}
 }

package/dist/scss/labs/components/molecules/cards/_card-bg-image.scss

@@ -0,0 +1,7 @@
+@use 'sass:map';
+@use '../../../../components/molecules/cards/card-bg-image' as *;
+@use '../../../../base/variables/effects' as *;
+
+.card-bg-image {
+	border-radius: map.get($brandui-radius, large);
+}

package/dist/scss/labs/components/molecules/cards/_card.scss

@@ -1,12 +1,18 @@
+@use 'sass:map';
 @use '../../../../components/molecules/cards/card' as *;
 @use '../../../../base/mixins/breakpoints' as break;
 @use '../../../../base/functions' as *;
+@use '../../../../base/variables/effects' as *;
+@use '../../../../base/variables/sizing' as *;
 @use '../../../../base/mixins/color-mode' as color;
+@use '../../../../base/mixins/glass' as glass;
 
 .card {
 	backdrop-filter: none;
 	-webkit-backdrop-filter: none;
 	border: none;
+	border-radius: map.get($brandui-radius, 'large');
+
 	@include color.color-mode(background-color, brandui-color-labels(neutral-5), brandui-color-labels(neutral-2));
 
 	&-wrapper {
@@ -53,6 +59,10 @@
 			}
 		}
 	}
+
+	&-banner {
+		border-radius: map.get($brandui-radius, 'medium') map.get($brandui-radius, 'medium') 0 0;
+	}
 }
 
 /* Unfinished example of using clip-path (link: https://www.sitepoint.com/css-path-function-squeaky-portraits/) */

package/dist/scss/labs/components/organisms/ctas/_basic-cta.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../../../base/variables/sizing' as *;
+@use '../../../../base/variables/effects' as *;
 @use '../../../../base/mixins/page-theme' as theme;
 @use '../../../../base/mixins/breakpoints' as break;
 @use '../../../../components/organisms/ctas/basic-cta' as *;
@@ -8,6 +9,7 @@
 .basic-cta {
 	max-width: unset;
 	gap: map.get($brandui-padding, extra-large);
+	box-shadow: map.get($brandui-shadow, outline);
 	@include theme.theme-color(background-color, spotlight);
 	@include theme.theme-color(border-color, spotlight);
 }

package/dist/scss/labs/utilities/_rich-text.scss

@@ -2,6 +2,7 @@
 @use '../../utilities/rich-text' as *;
 @use '../base/mixins/typography' as font;
 @use '../../base/functions' as *;
+@use '../../base/mixins/color-mode' as color;
 @use '../base/variables/typography' as *;
 
 .txt-rich,
@@ -38,4 +39,16 @@
 	blockquote:not([class]) {
 		@include font.get-typography(body-lead);
 	}
+
+	a:not([class]) {
+		overflow-wrap: break-word;
+		text-decoration: underline;
+		font-weight: 700;
+		@include color.color-mode(color, brandui-color-labels('action'), brandui-color-labels('action-dark'));
+
+		&:hover,
+		&:focus {
+			@include color.color-mode(color, brandui-color-labels('action-secondary'), brandui-color-labels('action-secondary-dark'));
+		}
+	}
 }

package/dist/scss/utilities/_rich-text.scss

@@ -60,7 +60,7 @@ The rich text class applies default styling to HTML when you cannot apply class
 
 		&:hover,
 		&:focus {
-			@include color.color-mode(color, brandui-color-labels('action-secondary'), brandui-color-labels('action-secondary-dark'));
+			@include color.color-mode(color, brandui-color-labels('action-tertiary'), brandui-color-labels('action-tertiary-dark'));
 		}
 	}
 

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@snyk-mktg/brand-ui",
-	"version": "2.5.9",
+	"version": "2.5.10-canary.0",
 	"description": "The official style library for Snyk’s BrandUI Design System",
 	"scripts": {
 		"dev:css": "gulp devCss",
 		"build": "gulp",
 		"test": "jest",
 		"lint": "sass-lint -v",
-		"lint:fix": "sass-lint-auto-fix"
+		"lint:fix": "sass-lint-auto-fix",
+		"compile": "rm -rf dist/js && tsc -p tsconfig.build.json && tsc -p tsconfig.build.json --module CommonJs --moduleResolution node --outDir dist/js/cjs"
 	},
 	"type": "module",
 	"repository": {

package/dist/js/helpers/caseFormats.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/js/helpers/caseFormats.test.js

@@ -1,59 +0,0 @@
-import { expect, describe, it } from '@jest/globals';
-import { formatCase } from './';
-describe('formatCase', () => {
-    it('should convert text to kebab case', () => {
-        const text = 'helloWorld';
-        const result = formatCase(text, 'kebab');
-        expect(result).toBe('hello-world');
-    });
-    it('should convert text to snake case', () => {
-        const text = 'helloWorld';
-        const result = formatCase(text, 'snake');
-        expect(result).toBe('hello_world');
-    });
-    it('should convert text to space case', () => {
-        const text = 'helloWorld';
-        const result = formatCase(text, 'space');
-        expect(result).toBe('hello world');
-    });
-    it('should convert text to camel case', () => {
-        const text = 'hello world';
-        const result = formatCase(text, 'camel');
-        expect(result).toBe('helloWorld');
-    });
-    it('should convert text to sentence case', () => {
-        const text = 'hello world';
-        const result = formatCase(text, 'sentence');
-        expect(result).toBe('Hello world');
-    });
-    it('should capitalize the first letter', () => {
-        const text = 'hello world';
-        const result = formatCase(text, 'capitalize');
-        expect(result).toBe('Hello world');
-    });
-    it('should capitalize the first letter of each word', () => {
-        const text = 'hello world';
-        const result = formatCase(text, 'capitalizeSentence');
-        expect(result).toBe('Hello World');
-    });
-    it('should handle empty text', () => {
-        const text = '';
-        const result = formatCase(text, 'kebab');
-        expect(result).toBe('');
-    });
-    it('should handle invalid convertCase', () => {
-        const text = 'hello world';
-        const result = formatCase(text, 'invalid');
-        expect(result).toBe('hello world');
-    });
-    it('should handle text with special characters', () => {
-        const text = 'hello-world123';
-        const result = formatCase(text, 'kebab');
-        expect(result).toBe('hello-world123');
-    });
-    it('should handle text with mixed case', () => {
-        const text = 'HelloWorld';
-        const result = formatCase(text, 'camel');
-        expect(result).toBe('helloWorld');
-    });
-});

package/dist/js/helpers/classnames.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/js/helpers/classnames.test.js

@@ -1,13 +0,0 @@
-import { expect, describe, it } from '@jest/globals';
-import { classNames } from './'; // Replace with the correct import path
-describe('classNames', () => {
-    it('should return an empty string with no classes', () => {
-        expect(classNames()).toBe('');
-    });
-    it('should return a single class', () => {
-        expect(classNames('class1')).toBe('class1');
-    });
-    it('should return multiple classes joined by spaces', () => {
-        expect(classNames('class1', 'class2', 'class3')).toBe('class1 class2 class3');
-    });
-});

package/dist/js/helpers/getInitials.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/js/helpers/getInitials.test.js

@@ -1,29 +0,0 @@
-import { expect, describe, it } from '@jest/globals';
-import { getInitials } from './';
-describe('getInitials', () => {
-    it('should return the first and last initials for a full name', () => {
-        const fullName = 'John Doe';
-        const initials = getInitials(fullName);
-        expect(initials).toBe('JD');
-    });
-    it('should return the first initial for a single name', () => {
-        const fullName = 'John';
-        const initials = getInitials(fullName);
-        expect(initials).toBe('J');
-    });
-    it('should handle empty string input', () => {
-        const fullName = '';
-        const initials = getInitials(fullName);
-        expect(initials).toBe('');
-    });
-    it('should handle multiple middle names', () => {
-        const fullName = 'John William Doe Smith';
-        const initials = getInitials(fullName);
-        expect(initials).toBe('JS');
-    });
-    it('should handle names with special characters', () => {
-        const fullName = 'John O\'Brien Smith';
-        const initials = getInitials(fullName);
-        expect(initials).toBe('JS');
-    });
-});

package/dist/js/helpers/grid.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/js/helpers/grid.test.js

@@ -1,44 +0,0 @@
-import { expect, describe, it } from '@jest/globals';
-import { gridSplit, gridSpacing } from './';
-describe('gridSplit', () => {
-    it('should return the count when count is less than maxCols', () => {
-        expect(gridSplit(3)).toBe(3);
-        expect(gridSplit(4, 10)).toBe(4);
-    });
-    it('should return maxCols when count is greater than or equal to maxCols', () => {
-        expect(gridSplit(6)).toBe(5); // Default maxCols is 5
-        expect(gridSplit(10, 8)).toBe(8);
-    });
-    it('should return 12 when maxCols is greater than or equal to 12 and sount is 0', () => {
-        expect(gridSplit(0, 15)).toBe(12);
-        expect(gridSplit(0, 13)).toBe(12);
-    });
-    it('should return 1 for invalid or zero count', () => {
-        expect(gridSplit(0)).toBe(1);
-        expect(gridSplit(-2)).toBe(1);
-    });
-});
-describe('gridSpacing', () => {
-    it('should return max width for 2 or less columns', () => {
-        const spacing2 = gridSpacing(2);
-        expect(spacing2.hasMaxWidth).toBe(true);
-        const spacing1 = gridSpacing(1);
-        expect(spacing1.hasMaxWidth).toBe(true);
-    });
-    it('should adjust padding and gap for 4 columns', () => {
-        const spacing = gridSpacing(4);
-        expect(spacing).toEqual({
-            hasMaxWidth: false,
-            itemPadding: 'medium',
-            gap: 'medium',
-        });
-    });
-    it('should adjust padding and gap for more than 4 columns', () => {
-        const spacing = gridSpacing(5);
-        expect(spacing).toEqual({
-            hasMaxWidth: false,
-            itemPadding: 'medium',
-            gap: 'small',
-        });
-    });
-});