@eightshift/frontend-libs-tailwind 1.0.0 → 1.1.0

package/scripts/editor/registration.js

@@ -57,7 +57,6 @@ export const registerBlocks = (
 	deprecationsComponentPath = null,
 	overridesComponentPath = null,
 ) => {
-
 	const componentsManifest = componentsManifestPath.keys().map(componentsManifestPath);
 	const blocksManifests = blocksManifestPath.keys().map(blocksManifestPath);
 
@@ -76,9 +75,7 @@ export const registerBlocks = (
 
 	// Iterate blocks to register.
 	blocksManifests.map((blockManifest) => {
-		const {
-			active = true,
-		} = blockManifest;
+		const { active = true } = blockManifest;
 
 		// If block has active key set to false the block will not show in the block editor.
 		if (active) {
@@ -117,19 +114,12 @@ export const registerBlocks = (
 				const blockOverridesComponent = getBlockGenericComponent(blockManifest.blockName, overridesComponentPath, 'overrides');
 
 				if (blockOverridesComponent !== null) {
-					blockManifest = Object.assign(blockManifest, blockOverridesComponent); // eslint-disable-line no-param-reassign
+					blockManifest = Object.assign(blockManifest, blockOverridesComponent);
 				}
 			}
 
 			// Pass data to registerBlock helper to get final output for registerBlockType.
-			const blockDetails = registerBlock(
-				globalManifest,
-				wrapperManifest,
-				componentsManifest,
-				blockManifest,
-				wrapperComponent,
-				blockComponent
-			);
+			const blockDetails = registerBlock(globalManifest, wrapperManifest, componentsManifest, blockManifest, wrapperComponent, blockComponent);
 
 			// Format the 'deprecated' attribute details to match the format Gutenberg wants.
 			if (blockDetails?.options?.deprecated) {
@@ -154,7 +144,7 @@ export const registerBlocks = (
 								...deprecation.newAttributes(attributes),
 							};
 						},
-						// eslint-disable-next-line max-len
+
 						isEligible: deprecation?.isEligible ?? ((attributes) => Object.keys(deprecation.oldAttributes).every((v) => Object.keys(attributes).includes(v))),
 						save: blockDetails.options.save,
 					};
@@ -169,10 +159,7 @@ export const registerBlocks = (
 	});
 
 	// Add icon foreground and background colors as CSS variables for later use.
-	const {
-		background: backgroundGlobal,
-		foreground: foregroundGlobal,
-	} = globalManifest;
+	const { background: backgroundGlobal, foreground: foregroundGlobal } = globalManifest;
 
 	document.documentElement.style.setProperty('--es-admin-block-icon-foreground', foregroundGlobal);
 	document.documentElement.style.setProperty('--es-admin-block-icon-background', backgroundGlobal);
@@ -209,13 +196,7 @@ export const registerBlocks = (
  * );
  * ```
  */
-export const registerVariations = (
-	globalManifest = {},
-	variationsManifestPath,
-	blocksManifestPath = null,
-	overridesComponentPath = null,
-) => {
-
+export const registerVariations = (globalManifest = {}, variationsManifestPath, blocksManifestPath = null, overridesComponentPath = null) => {
 	const variationsManifests = variationsManifestPath.keys().map(variationsManifestPath);
 
 	// Set all store values.
@@ -223,9 +204,7 @@ export const registerVariations = (
 
 	// Iterate blocks to register.
 	variationsManifests.map((variationManifest) => {
-		const {
-			active = true,
-		} = variationManifest;
+		const { active = true } = variationManifest;
 
 		// If variation has active key set to false the variation will not show in the block editor.
 		if (active) {
@@ -234,16 +213,12 @@ export const registerVariations = (
 				const blockOverridesComponent = getBlockGenericComponent(variationManifest.name, overridesComponentPath, 'overrides');
 
 				if (blockOverridesComponent !== null) {
-					variationManifest = Object.assign(variationManifest, blockOverridesComponent);// eslint-disable-line no-param-reassign
+					variationManifest = Object.assign(variationManifest, blockOverridesComponent);
 				}
 			}
 
 			// Pass data to registerVariation helper to get final output for registerBlockVariation.
-			const blockDetails = registerVariation(
-				globalManifest,
-				variationManifest,
-				(blocksManifestPath !== null) ? blocksManifestPath.keys().map(blocksManifestPath) : []
-			);
+			const blockDetails = registerVariation(globalManifest, variationManifest, blocksManifestPath !== null ? blocksManifestPath.keys().map(blocksManifestPath) : []);
 
 			// Native WP method for block registration.
 			registerBlockVariation(blockDetails.blockName, blockDetails.options);
@@ -269,7 +244,6 @@ export const registerVariations = (
  *
  */
 export const getBlockEditComponent = (blockName, paths, fileName) => {
-
 	// Create an array of all blocks file paths.
 	const pathsKeys = paths.keys();
 
@@ -278,7 +252,6 @@ export const getBlockEditComponent = (blockName, paths, fileName) => {
 
 	// If edit component is missing throw and error.
 	if (typeof editComponent === 'undefined') {
-		// eslint-disable-next-line max-len
 		throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`);
 	}
 
@@ -287,7 +260,6 @@ export const getBlockEditComponent = (blockName, paths, fileName) => {
 
 	// If edit component callback is missing throw and error.
 	if (typeof editCallback === 'undefined') {
-		// eslint-disable-next-line max-len
 		throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`);
 	}
 
@@ -307,7 +279,6 @@ export const getBlockEditComponent = (blockName, paths, fileName) => {
  *
  */
 export const getBlockGenericComponent = (blockName, paths, fileName) => {
-
 	// Create an array of all blocks file paths.
 	const pathsKeys = paths.keys();
 
@@ -334,7 +305,7 @@ export const getBlockGenericComponent = (blockName, paths, fileName) => {
  * @returns {string?}
  */
 export const getNamespace = (globalManifest, blockManifest) => {
-	return (typeof blockManifest.namespace === 'undefined') ? globalManifest.namespace : blockManifest.namespace;
+	return typeof blockManifest.namespace === 'undefined' ? globalManifest.namespace : blockManifest.namespace;
 };
 
 /**
@@ -375,9 +346,7 @@ export const getFullBlockNameVariation = (globalManifest, blockManifest) => {
  * @returns {function} Save callback.
  */
 export const getSaveCallback = (blockManifest) => {
-	const {
-		hasInnerBlocks,
-	} = blockManifest;
+	const { hasInnerBlocks } = blockManifest;
 
 	if (hasInnerBlocks && typeof InnerBlocks !== 'undefined') {
 		return () => createElement(InnerBlocks.Content);
@@ -394,9 +363,7 @@ export const getSaveCallback = (blockManifest) => {
  * @param {object} blockManifest - Block manifest.
  */
 export const getMergeCallback = (blockManifest) => {
-	const {
-		mergeableAttributes,
-	} = blockManifest;
+	const { mergeableAttributes } = blockManifest;
 
 	if (mergeableAttributes) {
 		return (receiver, merger) => {
@@ -408,24 +375,24 @@ export const getMergeCallback = (blockManifest) => {
 				});
 
 				switch (mergeStrategy) {
-					case "append": {
+					case 'append': {
 						outputObject[attribute] = `${receiver[attribute] ?? ''}${merger[attribute] ?? ''}`;
 						break;
 					}
-					case "useDestinationAttribute": {
+					case 'useDestinationAttribute': {
 						outputObject[attribute] = merger[attribute] ?? '';
 						break;
 					}
-					case "addNumericIntValue": {
+					case 'addNumericIntValue': {
 						outputObject[attribute] = parseInt(receiver[attribute] ?? '0') + parseInt(merger[attribute] ?? '0');
 						break;
 					}
-					case "addNumericFloatValue": {
+					case 'addNumericFloatValue': {
 						outputObject[attribute] = parseFloat(receiver[attribute] ?? '0') + parseFloat(merger[attribute] ?? '0');
 						break;
 					}
-					/* eslint-disable no-case-declarations */
-					case "addNumericPixelValue": {
+
+					case 'addNumericPixelValue': {
 						// Remove numbers
 						const receiverUnit = (receiver[attribute] ?? '0px').replace(/\d/g, '');
 
@@ -437,7 +404,7 @@ export const getMergeCallback = (blockManifest) => {
 						outputObject[attribute] = `${calculatedValue}${receiverUnit}`;
 						break;
 					}
-					/* eslint-enable no-case-declarations */
+
 					default: {
 						// "useSourceAttribute" is default
 						outputObject[attribute] = receiver[attribute] ?? '';
@@ -466,12 +433,12 @@ export const getMergeCallback = (blockManifest) => {
 export const getEditCallback = (Component, Wrapper) => (props) => {
 	const useWrapper = select(STORE_NAME).getConfigUseWrapper();
 
-	return (
-		useWrapper ?
-			<Wrapper props={props}>
-				<Component {...props} />
-			</Wrapper> :
+	return useWrapper ? (
+		<Wrapper props={props}>
 			<Component {...props} />
+		</Wrapper>
+	) : (
+		<Component {...props} />
 	);
 };
 
@@ -485,19 +452,10 @@ export const getEditCallback = (Component, Wrapper) => (props) => {
  *
  * @returns {object}
  */
-export const getIconOptions = (
-	globalManifest,
-	blockManifest
-) => {
+export const getIconOptions = (globalManifest, blockManifest) => {
+	const { background: backgroundGlobal, foreground: foregroundGlobal } = globalManifest;
 
-	const {
-		background: backgroundGlobal,
-		foreground: foregroundGlobal,
-	} = globalManifest;
-
-	const {
-		icon,
-	} = blockManifest;
+	const { icon } = blockManifest;
 
 	if (typeof icon === 'undefined') {
 		return {};
@@ -507,15 +465,15 @@ export const getIconOptions = (
 	// icon exists in the library
 	if (icon.src !== undefined && blockIcons[icon.src] !== undefined) {
 		return {
-			background: (typeof icon.background === 'undefined') ? backgroundGlobal : icon.background,
-			foreground: (typeof icon.foreground === 'undefined') ? foregroundGlobal : icon.foreground,
+			background: typeof icon.background === 'undefined' ? backgroundGlobal : icon.background,
+			foreground: typeof icon.foreground === 'undefined' ? foregroundGlobal : icon.foreground,
 			src: <span dangerouslySetInnerHTML={{ __html: blockIcons[icon.src] }} />,
 		};
 	}
 
 	return {
-		background: (typeof icon.background === 'undefined') ? backgroundGlobal : icon.background,
-		foreground: (typeof icon.foreground === 'undefined') ? foregroundGlobal : icon.foreground,
+		background: typeof icon.background === 'undefined' ? backgroundGlobal : icon.background,
+		foreground: typeof icon.foreground === 'undefined' ? foregroundGlobal : icon.foreground,
 		src: icon.src.includes('<svg') ? <span dangerouslySetInnerHTML={{ __html: icon.src }} /> : icon.src,
 	};
 };
@@ -550,7 +508,6 @@ export const prepareComponentAttribute = (manifest, newName, realName, isExample
 
 	// Iterate each attribute and attach parent prefixes.
 	for (const [componentAttribute] of Object.entries(componentAttributes)) {
-
 		let attribute = componentAttribute;
 
 		// If there is a attribute name switch use the new one.
@@ -589,32 +546,23 @@ export const prepareComponentAttribute = (manifest, newName, realName, isExample
  *
  * @returns {object}
  */
-export const prepareComponentAttributes = (
-	componentsManifest,
-	manifest,
-	isExample = false,
-	parent = ''
-) => {
+export const prepareComponentAttributes = (componentsManifest, manifest, isExample = false, parent = '') => {
 	const output = {};
 
-	const {
-		components = {},
-	} = manifest;
+	const { components = {} } = manifest;
 
 	// Determine if this is component or block and provide the name, not used for anything important but only to output the error msg.
 	const name = manifest?.blockName ? manifest.blockName : manifest.componentName;
 
-	const newParent = (parent === '') ? name : parent;
+	const newParent = parent === '' ? name : parent;
 
 	// Iterate over components key in manifest recursively and check component names.
 	for (let [newComponentName, realComponentName] of Object.entries(components)) {
-
 		// Filter components real name.
 		const [component] = componentsManifest.filter((item) => item.componentName === kebabCase(realComponentName));
 
 		// Bailout if component doesn't exist.
 		if (!component) {
-			// eslint-disable-next-line max-len
 			throw Error(`Component specified in "${name}" manifest doesn't exist in your components list. Please check if you project has "${realComponentName}" component.`);
 		}
 
@@ -622,7 +570,6 @@ export const prepareComponentAttributes = (
 
 		// If component has more components do recursive loop.
 		if (component?.components) {
-			// eslint-disable-next-line max-len
 			outputAttributes = prepareComponentAttributes(componentsManifest, component, isExample, `${newParent}${upperFirst(camelCase(newComponentName))}`);
 		} else {
 			// Output the component attributes if there is no nesting left, and append the parent prefixes.
@@ -630,13 +577,10 @@ export const prepareComponentAttributes = (
 		}
 
 		// Populate the output recursively.
-		Object.assign(
-			output,
-			{
-				...output,
-				...outputAttributes,
-			}
-		);
+		Object.assign(output, {
+			...output,
+			...outputAttributes,
+		});
 	}
 
 	// Add the current block/component attributes to the output.
@@ -662,20 +606,10 @@ export const prepareComponentAttributes = (
  * getAttributes(globalManifest, wrapperManifest, componentManifests, manifest)
  * ```
  */
-export const getAttributes = (
-	globalManifest,
-	wrapperManifest,
-	componentsManifest,
-	parentManifest
-) => {
-	const {
-		blockName,
-	} = parentManifest;
+export const getAttributes = (globalManifest, wrapperManifest, componentsManifest, parentManifest) => {
+	const { blockName } = parentManifest;
 
-	const {
-		attributes: attributesGlobal,
-		blockClassPrefix = 'block',
-	} = globalManifest;
+	const { attributes: attributesGlobal, blockClassPrefix = 'block' } = globalManifest;
 
 	const output = {
 		blockName: {
@@ -683,9 +617,10 @@ export const getAttributes = (
 			default: blockName,
 		},
 		blockClientId: {
-			type: 'string'
+			type: 'string',
 		},
-		blockTopLevelId: { // Used to pass reference to all components.
+		blockTopLevelId: {
+			// Used to pass reference to all components.
 			type: 'string',
 			default: Math.random().toString(36).slice(-6),
 		},
@@ -701,7 +636,7 @@ export const getAttributes = (
 			type: 'string',
 			default: `js-${blockClassPrefix}-${blockName}`,
 		},
-		...((typeof attributesGlobal === 'undefined') ? {} : attributesGlobal),
+		...(typeof attributesGlobal === 'undefined' ? {} : attributesGlobal),
 		...(wrapperManifest?.attributes ?? {}),
 		...prepareComponentAttributes(componentsManifest, parentManifest),
 	};
@@ -752,10 +687,7 @@ export const getAttributes = (
  * }
  * ```
  */
-export const getExample = (
-	parent = '',
-	manifest = {}
-) => {
+export const getExample = (parent = '', manifest = {}) => {
 	return prepareComponentAttributes(select(STORE_NAME).getComponents(), manifest, true, parent);
 };
 
@@ -770,10 +702,7 @@ export const getExample = (
  *
  * @returns {object}
  */
-export const registerVariation = (
-	globalManifest = {},
-	variationManifest = {}
-) => {
+export const registerVariation = (globalManifest = {}, variationManifest = {}) => {
 	const parentBlockManifest = select(STORE_NAME).getBlock(variationManifest.parentName);
 
 	// Append globalManifest data in to output.
@@ -823,15 +752,7 @@ export const registerVariation = (
  *
  * @returns {object}
  */
-export const registerBlock = (
-	globalManifest = {},
-	wrapperManifest = {},
-	componentsManifest = {},
-	blockManifest = {},
-	wrapperComponent,
-	blockComponent
-) => {
-
+export const registerBlock = (globalManifest = {}, wrapperManifest = {}, componentsManifest = {}, blockManifest = {}, wrapperComponent, blockComponent) => {
 	// Block Icon option.
 	blockManifest['icon'] = getIconOptions(globalManifest, blockManifest);
 
@@ -843,7 +764,7 @@ export const registerBlock = (
 
 	blockManifest['attributes'] = {
 		metadata: {
-			type: 'object'
+			type: 'object',
 		},
 		...attributes,
 	};
@@ -855,6 +776,7 @@ export const registerBlock = (
 
 	// Find all attributes that have default value and output that to example.
 	const exampleAttributes = {};
+
 	for (const [key, value] of Object.entries(attributes)) {
 		if (value?.default) {
 			exampleAttributes[key] = value.default;
@@ -888,6 +810,7 @@ export const registerBlock = (
 
 				if (context === 'accessibility') {
 					const { content } = attributes;
+
 					return !content || content?.length === 0 ? __('Empty', 'eightshift-frontend-libs') : content;
 				}
 

package/scripts/editor/tailwindcss.js

@@ -6,9 +6,9 @@ import { clsx } from '@eightshift/ui-components/utilities';
  *
  * The part needs to be defined within the manifest, in the `tailwind` object.
  *
- * @param {string} attributes - Part name.
+ * @param {string} part - Part name.
  * @param {Object<string, mixed>} manifest - Component/block manifest.
- * @param {...string?} custom - Custom classes to include in the ouptut.
+ * @param {...string?} custom - Custom classes to include in the output.
  *
  * @returns {string} Output classes.
  *
@@ -29,12 +29,77 @@ export const getTwPart = (part, manifest, ...custom) => {
 	return clsx(partClasses, ...custom);
 };
 
+/**
+ * Gets Tailwind classes for the provided dynamic part.
+ *
+ * The part needs to be defined within the manifest, in the `tailwind` object.
+ *
+ * @param {string} part - Part name.
+ * @param {Object<string, mixed>} attributes - Current attribute value.
+ * @param {Object<string, mixed>} manifest - Component/block manifest.
+ * @param {...string?} custom - Custom classes to include in the output.
+ *
+ * @returns {string} Output classes.
+ *
+ * @example
+ * const classes = getTwPart('intro', manifest);
+ *
+ * @example
+ * const classes = getTwPart('intro', manifest, 'p-4 bg-gray-100');
+ *
+ */
+export const getTwDynamicPart = (part, attributes, manifest, ...custom) => {
+	if (!part || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
+		return '';
+	}
+
+	const baseClasses = manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
+
+	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
+		if (partName !== part) {
+			return current;
+		}
+
+		const value = checkAttr(attributeName, attributes, manifest, true);
+
+		if (!value) {
+			return current;
+		}
+
+		if (!responsive) {
+			return [...current, twClassesEditor?.[value] ?? twClasses?.[value]];
+		}
+
+		const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
+			if (breakpoint === '_desktopFirst') {
+				return curr;
+			}
+
+			const currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
+
+			if (breakpoint === '_default') {
+				return [...curr, currentClasses];
+			}
+
+			if (Array.isArray(currentClasses)) {
+				return [...curr, ...currentClasses.split(' ').map((currentClass) => `${breakpoint}:${currentClass}`)];
+			}
+
+			return [...curr, `${breakpoint}:${currentClasses}`];
+		}, []);
+
+		return [...current, ...responsiveClasses];
+	}, []);
+
+	return clsx(baseClasses, ...mainClasses, ...custom);
+};
+
 /**
  * Get Tailwind classes from attributes and manifest.
  *
  * @param {Object<string, mixed>} attributes - Current attribute value.
  * @param {Object<string, mixed>} manifest - Component/block manifest.
- * @param {...string?} custom - Custom classes to include in the ouptut.
+ * @param {...string?} custom - Custom classes to include in the output.
  *
  * @returns {string} Output classes
  *
@@ -52,7 +117,11 @@ export const getTwClasses = (attributes, manifest, ...custom) => {
 
 	const baseClasses = manifest?.tailwind?.base?.twClassesEditor ?? manifest?.tailwind?.base?.twClasses ?? '';
 
-	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor }]) => {
+	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor, part: partName }]) => {
+		if (partName) {
+			return current;
+		}
+
 		const value = checkAttr(attributeName, attributes, manifest, true);
 
 		if (!value) {
@@ -84,25 +153,26 @@ export const getTwClasses = (attributes, manifest, ...custom) => {
 		return [...current, ...responsiveClasses];
 	}, []);
 
-	const combinationClasses = manifest?.tailwind?.combinations?.reduce((current, { attributes: conditions, twClasses, twClassesEditor }) => {
-		const conditionKeys = Object.keys(conditions);
+	const combinationClasses =
+		manifest?.tailwind?.combinations?.reduce((current, { attributes: conditions, twClasses, twClassesEditor }) => {
+			const conditionKeys = Object.keys(conditions);
 
-		for (const key of conditionKeys) {
-			const value = checkAttr(key, attributes, manifest, true);
+			for (const key of conditionKeys) {
+				const value = checkAttr(key, attributes, manifest, true);
 
-			const isArrayCondition = Array.isArray(conditions[key]);
+				const isArrayCondition = Array.isArray(conditions[key]);
 
-			if (!value) {
-				return current;
-			} else if (isArrayCondition && !conditions[key].includes(value)) {
-				return current;
-			} else if (!isArrayCondition && value !== conditions[key]) {
-				return current;
+				if (!value) {
+					return current;
+				} else if (isArrayCondition && !conditions[key].includes(value)) {
+					return current;
+				} else if (!isArrayCondition && value !== conditions[key]) {
+					return current;
+				}
 			}
-		}
 
-		return [...current, twClassesEditor ?? twClasses];
-	}, []) ?? [];
+			return [...current, twClassesEditor ?? twClasses];
+		}, []) ?? [];
 
 	return clsx(baseClasses, ...mainClasses, ...combinationClasses, ...custom);
 };
@@ -137,7 +207,7 @@ export const getTwClasses = (attributes, manifest, ...custom) => {
 export const processEightshiftClasses = (breakpoints) => ({
 	// Make sure to include all the custom ES classes from JSON manifests.
 	json: (rawContent) => {
-		if (!(rawContent.includes('tailwind'))) {
+		if (!rawContent.includes('tailwind')) {
 			return rawContent;
 		}
 
@@ -153,14 +223,18 @@ export const processEightshiftClasses = (breakpoints) => ({
 			combinedResults[key] = combined.join(' ');
 		}
 
-		const responsiveVars = combinedResults?.responsive?.split(' ')?.map((cls) => {
-			return breakpoints.reduce((curr, breakpoint) => `${curr} ${breakpoint}:${cls} max-${breakpoint}:${cls}`, cls)
-		})?.join(' ') ?? '';
+		const responsiveVars =
+			combinedResults?.responsive
+				?.split(' ')
+				?.map((cls) => {
+					return breakpoints.reduce((curr, breakpoint) => `${curr} ${breakpoint}:${cls} max-${breakpoint}:${cls}`, cls);
+				})
+				?.join(' ') ?? '';
 
 		const nonResponsiveVars = combinedResults?.regular ?? '';
 
 		return `${nonResponsiveVars} ${responsiveVars}`.trim();
-	}
+	},
 });
 
 /**
@@ -182,43 +256,50 @@ export const processEightshiftClasses = (breakpoints) => ({
  *
  */
 export const getScreens = (breakpointData, unit = 'rem') => {
-	return Object.entries(breakpointData ?? []).reduce((acc, [key, value]) => ({
-		...acc,
-		[key]: `${value}${unit}`,
-	}), {});
+	return Object.entries(breakpointData ?? []).reduce(
+		(acc, [key, value]) => ({
+			...acc,
+			[key]: `${value}${unit}`,
+		}),
+		{},
+	);
 };
 
 export const generateOptionsFromValue = (value, getLabel = (v) => v) => {
-	return Object.entries(value).filter(([breakpoint]) => breakpoint !== '_desktopFirst').map(([breakpoint, innerValue]) => ({
-		value: innerValue,
-		label: getLabel(innerValue, breakpoint),
-	}));
-}
+	return Object.entries(value)
+		.filter(([breakpoint]) => breakpoint !== '_desktopFirst')
+		.map(([breakpoint, innerValue]) => ({
+			value: innerValue,
+			label: getLabel(innerValue, breakpoint),
+		}));
+};
 
 // Utilities
 function* extractKeys(obj, parentKey = '', isResponsive = false) {
 	isResponsive = obj['responsive'] === true ? true : isResponsive;
-	let resultKey = isResponsive ? "responsive" : "regular";
+	let resultKey = isResponsive ? 'responsive' : 'regular';
 
 	for (let key in obj) {
 		let newKey = parentKey ? `${parentKey}.${key}` : key;
+
 		if (typeof obj[key] === 'object' && obj[key] !== null) {
 			yield* extractKeys(obj[key], newKey, isResponsive);
 		} else if (newKey.includes('twClasses')) {
 			if (typeof obj[key] === 'object') {
 				for (let subKey in obj[key]) {
-					yield {key: `${newKey}.${subKey}`, value: obj[key][subKey], responsive: resultKey};
+					yield { key: `${newKey}.${subKey}`, value: obj[key][subKey], responsive: resultKey };
 				}
 			} else {
-				yield {key: newKey, value: obj[key], responsive: resultKey};
+				yield { key: newKey, value: obj[key], responsive: resultKey };
 			}
 		}
 	}
 }
 
 const combineAndRemoveDuplicates = (results) => {
-	return results.reduce((acc, {key, value, responsive}) => {
+	return results.reduce((acc, { key, value, responsive }) => {
 		acc[responsive] = acc[responsive] ? `${acc[responsive]} ${value}` : value;
+
 		return acc;
 	}, {});
-}
+};