@riosst100/pwa-marketplace 2.3.8 → 2.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -14,6 +14,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
     [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
+    [`@magento/peregrine/lib/talons/FilterModal/filterModal.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/filterModal.gql.js',
     [`@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js',
     [`@magento/peregrine/lib/talons/RootComponents/Product/useProduct.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/useProduct.js',
     [`@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js',
@@ -43,6 +44,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
     // [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
     [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
+    [`@magento/venia-ui/lib/components/RadioGroup/radioGroup.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radioGroup.js',
     [`@magento/venia-ui/lib/components/Button/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Button/index.js',
     [`@magento/venia-ui/lib/components/RichText/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichText/index.js',
     [`@magento/venia-ui/lib/components/Main/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Main/index.js',

package/src/components/ProductContent/productContent.js

@@ -191,7 +191,6 @@ const ProductContent = props => {
     ]);
 
     return <><span>OK</span></>;
-
     return (
         <>
             <div className='w-full mb-[30px]'>

package/src/overwrites/peregrine/lib/talons/FilterModal/filterModal.gql.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForModal {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_SUB_FILTERS = gql`
+    query GetSubFilters {
+        subFilters {
+            attribute_code
+            options {
+                option_label
+                sub_option_labels
+            }
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getSubFiltersQuery: GET_SUB_FILTERS
+};

package/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js

@@ -10,9 +10,7 @@ export const useFilterList = props => {
         () =>
             items.some((item, index) => {
                 return (
-                    filterState &&
-                    filterState.has(item) &&
-                    index >= itemCountToShow
+                    filterState && filterState.has(item) && index >= itemCountToShow
                 );
             }),
         [filterState, itemCountToShow, items]
@@ -46,7 +44,7 @@ export const useFilterList = props => {
         if (!overlay) {
             setActiveFilter(false)
         }
-    }, [overlay])
+    }, [overlay]);
 
     // const handleShowMore = useCallback(() => {
     //     handleShowAllOptions();

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -12,7 +12,7 @@ import {
     sortFiltersArray,
     stripHtml
 } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/FilterModal/filterModal.gql';
 
 const DRAWER_NAME = 'filter';
@@ -21,7 +21,7 @@ export const useFilterSidebar = props => {
     const { filters } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getFilterInputsQuery } = operations;
+    const { getFilterInputsQuery, getSubFiltersQuery } = operations;
 
     const [isApplying, setIsApplying] = useState(false);
     const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
@@ -32,8 +32,20 @@ export const useFilterSidebar = props => {
     const history = useHistory();
     const { pathname, search } = useLocation();
 
+    const allActiveFilters = getFiltersFromSearch(search);
+
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
+    const {
+        called: subFilterItemsCalled,
+        data: subFilterItems,
+        loading: subFilterItemsLoading
+    } = useQuery(getSubFiltersQuery,
+    {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
     const attributeCodes = useMemo(
         () => filters.map(({ attribute_code }) => attribute_code),
         [filters]
@@ -236,10 +248,34 @@ export const useFilterSidebar = props => {
         closeDrawer();
     }, [closeDrawer]);
 
-    const handleApply = useCallback(() => {
+    const handleApply = useCallback((...args) => {
+        const group = args[0];
+        const item = args[1]; 
+
+        // REMOVE ACTIVE FILTER
+        if (group.includes('card_release')) {
+            const subFilter = group.replace("card_release", "card_set");
+            filterApi.removeGroup({ group: subFilter });
+        }
+
+        if (group.includes('card_set')) {
+            const subFilter = group.replace("card_set", "card_release");
+            filterApi.removeGroup({ group: subFilter });
+        }
+
+        if (group.includes('card_game')) {
+            if (allActiveFilters && allActiveFilters.size > 0) {
+                allActiveFilters.forEach((value, key) => {
+                    if (key !== 'card_game') {
+                        filterApi.removeGroup({ group: key });
+                    }
+                });
+            }
+        }
+
         setIsApplying(true);
         handleClose();
-    }, [handleClose]);
+    }, [handleClose, filterApi, allActiveFilters]);
 
     const handleReset = useCallback(() => {
         filterApi.clear();
@@ -298,6 +334,7 @@ export const useFilterSidebar = props => {
         filterApi,
         filterItems,
         filterKeys,
+        subFilterItems,
         filterNames,
         filterFrontendInput,
         filterState,

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -6,7 +6,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { useIntl } from 'react-intl';
 
 const FilterItemRadio = props => {
-    const { filterApi, group, item, onApply, labels } = props;
+    const { filterApi, group, item, isSubFilter, onApply, labels } = props;
     const { removeGroup, toggleItem } = filterApi;
     const { title, value } = item;
     const classes = useStyle(defaultClasses);
@@ -44,6 +44,7 @@ const FilterItemRadio = props => {
             classes={classes}
             id={`item-${group}-${value}`}
             label={title}
+            isSubFilter={isSubFilter}
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -13,10 +13,10 @@ import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
 import FilterItemRadio from './filterItemRadio';
 import { useFieldApi } from 'informed';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import FilterBlock from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock';
 
 const FilterItemRadioGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
-
+    const { filterApi, subFilterItems, allowedSubFilters, subFilter, filterState, group, isSubFilter, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
     const radioItems = useMemo(() => {
         return items.map((item,index) => {
             if (!isListExpanded && index >= itemCountToShow) {
@@ -24,19 +24,57 @@ const FilterItemRadioGroup = props => {
             }
 
             const code = `item-${group}-${item.value}`;
+
+            if (allowedSubFilters.length && !allowedSubFilters.includes(item.title)) {
+                return '';
+            }
+
+            let newAllowedSubFilters = [];
+            
+            if (subFilter && subFilterItems) {
+                const result = subFilterItems.find(item => item.attribute_code === "card_release");
+
+                
+
+                // Ambil options jika ditemukan
+                const options = result ? result.options : [];
+                const option = options ? options.find(option => option.option_label === item.title) : [];
+                if (option) {
+                    newAllowedSubFilters = option.sub_option_labels;
+                }
+
+            }
+            
             return (
-                <FilterItemRadio
-                    key={code}
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    item={item}
-                    onApply={onApply}
-                    labels={labels}
-                />
+                <>
+                    <FilterItemRadio
+                        key={code}
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        item={item}
+                        onApply={onApply}
+                        labels={labels}
+                    />
+                    {subFilter && <FilterBlock
+                        key={subFilter.key}
+                        filterApi={subFilter.filterApi}
+                        filterState={subFilter.filterState}
+                        filterFrontendInput={subFilter.filterFrontendInput}
+                        group={subFilter.group}
+                        allowedSubFilters={newAllowedSubFilters}
+                        subFilterItems={subFilterItems}
+                        isSubFilter={true}
+                        items={subFilter.items}
+                        name={''}
+                        onApply={subFilter.onApply}
+                        initialOpen={true}
+                    />}
+                    {/* {subFilterBlock} */}
+                </>
             );
         });
-    }, [filterApi, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
+    }, [filterApi, allowedSubFilters, subFilter, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
 
     const fieldValue = useMemo(() => {
         if (filterState) {
@@ -61,7 +99,7 @@ const FilterItemRadioGroup = props => {
     }, [field, fieldApi, fieldState.value, fieldValue]);
 
     return (
-        <RadioGroup field={field} data-cy="FilterDefault-radioGroup">
+        <RadioGroup isSubFilter={isSubFilter} field={field} data-cy="FilterDefault-radioGroup">
             {radioItems}
         </RadioGroup>
     );

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -8,6 +8,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import SubFilterItemRadioGroup from './subFilterItemRadioGroup';
 
 const labels = new WeakMap();
 const labels2 = new WeakMap();
@@ -19,6 +20,11 @@ const FilterList = props => {
         filterApi,
         filterState,
         filterFrontendInput,
+        isSubFilter,
+        filterItems,
+        subFilterItems,
+        allowedSubFilters,
+        subFilter,
         name,
         group,
         itemCountToShow,
@@ -99,12 +105,58 @@ const FilterList = props => {
         onApply
     ]);
 
+    // const subFilter = useMemo(
+    //     () =>
+    //         Array.from(filterItems, ([group, items], iteration) => {
+    //             // const blockState = filterState.get(group);
+    //             // const groupName = filterNames.get(group);
+    //             // const frontendInput = filterFrontendInput.get(group);
+
+    //             if (group.includes('card_set')) {
+    //                 return (
+    //                     // <FilterBlock
+    //                     //     key={group}
+    //                     //     filterApi={filterApi}
+    //                     //     filterState={blockState}
+    //                     //     filterFrontendInput={frontendInput}
+    //                     //     group={group}
+    //                     //     filterItems={filterItems}
+    //                     //     items={items}
+    //                     //     name={groupName}
+    //                     //     onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+    //                     //     initialOpen={true}
+    //                     // />
+    //                     <SubFilterItemRadioGroup
+    //                         filterApi={filterApi}
+    //                         filterState={filterState}
+    //                         group={group}
+    //                         name={'Set Name'}
+    //                         items={items}
+    //                         onApply={onApply}
+    //                         labels={labels}
+    //                         isListExpanded={isListExpanded}
+    //                         itemCountToShow={itemCountToShow}
+    //                     />
+    //                 );
+    //             }
+    //         }),
+    //     [
+    //         filterApi,
+    //         filterItems
+    //     ]
+    // );
+
     // memoize item creation
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
         // if (filterFrontendInput === 'boolean') {
             
             const key = `item-${group}`;
+
+            const cardSetGroup = group.replace('card_release', 'card_set');
+
+            // const mewSubFilterBlock = subFilterBlock;
+            
             return (
                 <li
                     key={key}
@@ -116,6 +168,10 @@ const FilterList = props => {
                         filterState={filterState}
                         group={group}
                         name={name}
+                        subFilterItems={subFilterItems}
+                        subFilter={subFilter}
+                        allowedSubFilters={allowedSubFilters}
+                        isSubFilter={isSubFilter}
                         items={items}
                         onApply={onApply}
                         labels={labels}
@@ -235,7 +291,7 @@ const FilterList = props => {
 
     return (
         <Fragment>
-            <ul className={classes.items}>
+            <ul className={isSubFilter ? classes.sub_items : classes.items}>
                 {itemElements}
                 {showMoreItem}
             </ul>

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css

@@ -8,6 +8,15 @@
     composes: border-gray-100 from global;
 }
 
+.sub_items {
+    composes: gap-[15px] from global;
+    composes: grid from global;
+    /* composes: -ml-1.5 from global; */
+    composes: py-2.5 from global;
+    grid-template-columns: 100%;
+    composes: border-gray-100 from global;
+}
+
 .showMoreLessItem {
     composes: pl-1 from global;
 }

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/subFilterItemRadioGroup.js

@@ -0,0 +1,91 @@
+import React, { useMemo, useEffect } from 'react';
+import {
+    arrayOf,
+    func,
+    number,
+    oneOfType,
+    shape,
+    string,
+    instanceOf
+} from 'prop-types';
+import setValidator from '@magento/peregrine/lib/validators/set';
+import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
+import FilterItemRadio from './filterItemRadio';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+const SubFilterItemRadioGroup = props => {
+    const { filterApi, filterState, group, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
+
+    const radioItems = useMemo(() => {
+        return items.map((item,index) => {
+            if (!isListExpanded && index >= itemCountToShow) {
+                return null;
+            }
+
+            const code = `item-${group}-${item.value}`;
+            return (
+                <FilterItemRadio
+                    key={code}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    item={item}
+                    onApply={onApply}
+                    labels={labels}
+                />
+            );
+        });
+    }, [filterApi, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
+
+    const fieldValue = useMemo(() => {
+        if (filterState) {
+            for (const item of items) {
+                if (filterState.has(item)) {
+                    return item.value;
+                }
+            }
+        }
+
+        return null;
+    }, [filterState, items]);
+    const field = `item-${group}`;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    useEffect(() => {
+        if (field && fieldValue === null) {
+            fieldApi.reset();
+        } else if (field && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [field, fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <RadioGroup isSubFilter={true} field={field} data-cy="FilterDefault-radioGroup">
+            {radioItems}
+        </RadioGroup>
+    );
+};
+
+SubFilterItemRadioGroup.defaultProps = {
+    onApply: null
+};
+
+SubFilterItemRadioGroup.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired
+    }).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    items: arrayOf(
+        shape({
+            title: string.isRequired,
+            value: oneOfType([number, string]).isRequired,
+            path: string
+        })
+    ).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default SubFilterItemRadioGroup;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.js

@@ -19,6 +19,11 @@ const FilterBlock = props => {
         filterApi,
         filterState,
         filterFrontendInput,
+        filterItems,
+        subFilter,
+        subFilterItems,
+        allowedSubFilters,
+        isSubFilter,
         group,
         items,
         name,
@@ -72,6 +77,11 @@ const FilterBlock = props => {
                 filterApi={filterApi}
                 filterState={filterState}
                 name={name}
+                isSubFilter={isSubFilter}
+                subFilter={subFilter}
+                allowedSubFilters={allowedSubFilters}
+                filterItems={filterItems}
+                subFilterItems={subFilterItems}
                 filterFrontendInput={filterFrontendInput}
                 group={group}
                 items={items}
@@ -86,7 +96,7 @@ const FilterBlock = props => {
             aria-label={itemAriaLabel}
             data-cy="FilterBlock-root"
         >
-            <button
+            {name && <button
                 className={classes.trigger}
                 onClick={handleClick}
                 data-cy="FilterBlock-triggerButton"
@@ -103,7 +113,7 @@ const FilterBlock = props => {
                         variant="Outline"
                     />
                 </span>
-            </button>
+            </button>}
             {list}
         </li>
     );

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.js

@@ -49,6 +49,7 @@ const FilterModal = props => {
                     <FilterBlock
                         key={group}
                         filterApi={filterApi}
+                        allowedSubFilters={[]}
                         filterState={blockState}
                         filterFrontendInput={frontendInput}
                         group={group}

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -28,6 +28,7 @@ const FilterSidebar = props => {
         filterItems,
         filterNames,
         filterFrontendInput,
+        subFilterItems,
         filterState,
         handleApply,
         handleReset
@@ -102,15 +103,39 @@ const FilterSidebar = props => {
                     if (!hideFilters.includes(group) && groupName) {
                     
                     // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-
+                        let subFilter = null;
+                        if (group.includes('card_release')) {
+                            const subGroup = group.replace('card_release', 'card_set');
+                            const subBlockState = filterState.get(subGroup);
+                            const subFrontendInput = filterFrontendInput.get(subGroup);
+                            const subFilterItems = filterItems.get(subGroup);
+
+                            subFilter = {
+                                key: subGroup,
+                                filterApi: filterApi,
+                                filterState: subBlockState,
+                                filterFrontendInput: subFrontendInput,
+                                group: subGroup,
+                                isSubFilter: true,
+                                items: subFilterItems,
+                                name: '',
+                                onApply: handleApplyFilter,
+                                initialOpen: true
+                            };
+
+                        }
 
                         return (
                             <FilterBlock
                                 key={group}
                                 filterApi={filterApi}
                                 filterState={blockState}
+                                allowedSubFilters={[]}
                                 filterFrontendInput={frontendInput}
                                 group={group}
+                                subFilterItems={subFilterItems?.subFilters}
+                                filterItems={filterItems}
+                                subFilter={subFilter}
                                 items={items}
                                 name={groupName}
                                 onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
@@ -126,6 +151,7 @@ const FilterSidebar = props => {
             filterNames,
             filterFrontendInput,
             filterState,
+            subFilterItems,
             filterCountToOpen,
             handleApplyFilter
         ]

package/src/overwrites/venia-ui/lib/components/RadioGroup/radioGroup.js

@@ -0,0 +1,77 @@
+import React, { Fragment } from 'react';
+import { arrayOf, number, node, oneOfType, shape, string } from 'prop-types';
+import { RadioGroup as InformedRadioGroup } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+import Radio from './radio';
+import defaultClasses from './radioGroup.module.css';
+
+const RadioGroup = props => {
+    const {
+        children,
+        classes: propClasses,
+        disabled,
+        field,
+        id,
+        items,
+        message,
+        isSubFilter,
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const options =
+        children ||
+        items.map(({ value, ...item }) => (
+            <Radio
+                data-cy=""
+                key={value}
+                disabled={disabled}
+                {...item}
+                classes={{
+                    label: classes.radioLabel,
+                    root: classes.radioContainer
+                }}
+                id={`${field}--${value}`}
+                value={value}
+            />
+        ));
+
+    return (
+        <Fragment>
+            <div data-cy="RadioGroup-root" className={isSubFilter ? classes.sub_root : classes.root}>
+                <InformedRadioGroup {...rest} field={field} id={id}>
+                    {options}
+                </InformedRadioGroup>
+            </div>
+            <Message className={classes.message} fieldState={fieldState}>
+                {message}
+            </Message>
+        </Fragment>
+    );
+};
+
+export default RadioGroup;
+
+RadioGroup.propTypes = {
+    children: node,
+    classes: shape({
+        message: string,
+        radioContainer: string,
+        radioLabel: string,
+        root: string
+    }),
+    field: string.isRequired,
+    id: string,
+    items: arrayOf(
+        shape({
+            key: oneOfType([number, string]),
+            label: node,
+            value: oneOfType([number, string])
+        })
+    ),
+    message: node
+};

package/src/overwrites/venia-ui/lib/components/RadioGroup/radioGroup.module.css

@@ -0,0 +1,30 @@
+.root {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+.sub_root {
+    composes: gap-2xs from global;
+    composes: grid from global;
+    composes: pl-5 from global;
+}
+
+.radioContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: leading-normal from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.message {
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    display: none;
+}