Feat added unavailable class name (#1101)

#### What problem is this solving?

PDP Sku selector shows unavailable items crossed out. Some clients
require to hide these items via CSS with a CSS HANDLE

#### How to test it?

Go to the workspace and use css to hide class unavailable


[Workspace](https://jorge--esikaperu.myvtex.com/labial-liquido-hidracolor-mate/p?skuId=200103718)

#### Screenshots or example usage:


![image](https://github.com/vtex-apps/store-components/assets/94565086/56ec8d85-ee45-4855-b66d-259f834090ad)


![image](https://github.com/vtex-apps/store-components/assets/94565086/12c07b5e-af76-4468-b537-fcc16396afb1)


#### Describe alternatives you've considered, if any.

<!--- Optional -->

#### Related to / Depends on

<!--- Optional -->

#### How does this PR make you feel? [:link:](http://giphy.com/)

<!-- Go to http://giphy.com/ and pick a gif that represents how this PR
makes you feel -->

![](put .gif link here - can be found under "advanced" on giphy)

---------

Co-authored-by: Jorge Acosta <jorge.acosta@vtex.com>

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- CSS Handle for unavailable products update. 
+
+
 ## [3.171.0] - 2024-01-09
 
 ## [3.170.0] - 2023-11-28

react/components/SKUSelector/components/SelectorItem.tsx

@@ -38,6 +38,7 @@ export const CSS_HANDLES = [
   'frameAround',
   'valueWrapper',
   'diagonalCross',
+  'unavailable',
   'skuSelectorItem',
   'skuSelectorBadge',
   'skuSelectorItemImage',
@@ -81,15 +82,19 @@ function SelectorItem({
         {
           [`${handles.skuSelectorItemImage}`]: isImage,
           'o-20': isImpossible,
-        }
+        },
+        'valueWrapper',
+        !isAvailable ? `${handles.unavailable}` : ''
       ),
     [
       isImage,
+      isAvailable,
       isSelected,
       isImpossible,
       variationValueOriginalName,
       withModifiers,
       handles.skuSelectorItemImage,
+      handles.unavailable,
     ]
   )