@embeddables/cli 0.9.6 → 0.11.0

package/dist/constants/defaultTagStylesV4.js

@@ -0,0 +1,659 @@
+export const DEFAULT_TAGS_STYLES_V4 = {
+    standard_container: {
+        '.Flow-Component.ComponentTag-standard_container': {
+            padding: '16px',
+            display: 'flex',
+            'flex-direction': 'column',
+            'justify-content': 'flex-start',
+            'align-items': 'center',
+            gap: '16px',
+        },
+    },
+    standard_image: {
+        '.Flow-Element.ElementType-Image.ComponentTag-standard_image': {
+            'max-width': '100%',
+        },
+    },
+    standard_button: {
+        '.Flow-Component.ComponentTag-standard_button': {
+            display: 'block',
+            padding: '8px 32px',
+            color: 'inherit',
+            'background-color': '#FFFFFF',
+            'border-color': '#DDDDDD',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-radius': 'var(--border-radius)',
+            transition: 'background-color 0.3s, color 0.3s',
+            cursor: 'pointer',
+            'text-decoration': 'none',
+            'font-size': 'inherit',
+            'font-family': 'inherit',
+            'font-weight': 'inherit',
+        },
+        '.Flow-Component.ComponentTag-standard_button[disabled=disabled]': {
+            color: '#AAAAAA',
+            background: '#EEEEEE',
+            cursor: 'default',
+            'pointer-events': 'none',
+        },
+        '.Flow-Component.ComponentTag-standard_button:focus': {
+            'outline-color': 'var(--color-primary)',
+        },
+        '.Flow-Component.ComponentType-CustomButton.ComponentTag-standard_button .ElementType-ButtonIcon': {
+            'font-size': '40px',
+            color: '#999999',
+        },
+        '.Flow-Component.ComponentType-CustomButton.ComponentTag-standard_button .ElementType-ButtonIconImage': {
+            'max-width': '100%',
+            'max-height': '50px',
+        },
+    },
+    standard_media_embed: {
+        '.Flow-Component.ComponentTag-standard_media_embed': {
+            position: 'relative',
+            width: '100%',
+        },
+    },
+    standard_slider: {
+        '.Flow-Component.ComponentTag-standard_slider': {
+            width: '300px',
+            'max-width': '100%',
+            position: 'relative',
+            display: 'flex',
+            'flex-direction': 'column',
+        },
+        '.ComponentTag-standard_slider .Flow-Element.ElementType-Label': {
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'flex-end',
+        },
+        '.Flow-Component.ComponentTag-standard_slider div.slider': {
+            display: 'flex',
+            'flex-direction': 'row',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider": {
+            width: '100%',
+            margin: '12px 0',
+            padding: '8px 16px',
+            background: 'transparent',
+            'border-radius': 'var(--border-radius)',
+            '-webkit-appearance': 'none',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:focus": {
+            outline: '0',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='number'].ComponentTag-standard_slider": {
+            width: '100%',
+            padding: '8px 16px',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            'border-radius': 'var(--border-radius)',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-webkit-slider-thumb": {
+            height: '24px',
+            width: '24px',
+            'margin-top': '-10px',
+            background: '#607D8B',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#ECEFF1',
+            'border-radius': '12px',
+            cursor: 'default',
+            'box-shadow': '4px 4px 4px #00000033, 0 0 4px #00000033',
+            '-webkit-appearance': 'none',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-webkit-slider-thumb": {
+            cursor: 'not-allowed',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-webkit-slider-runnable-track": {
+            width: '100%',
+            height: '8px',
+            background: '#ECEFF1',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#CFD8DC',
+            'border-radius': '5px',
+            transition: 'all 0.2s ease',
+            'box-shadow': '1px 1px 1px #00000033, 0 0 1px #00000033',
+            cursor: 'default',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-webkit-slider-runnable-track": {
+            cursor: 'not-allowed',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-moz-range-track": {
+            'box-shadow': '1px 1px 1px #00000033, 0 0 1px #00000033',
+            cursor: 'default',
+            transition: 'all 0.2s ease',
+            width: '100%',
+            background: '#ECEFF1',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#CFD8DC',
+            'border-radius': '5px',
+            height: '4px',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-moz-range-thumb": {
+            'box-shadow': '4px 4px 4px #00000033, 0 0 4px #00000033',
+            background: '#607D8B',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#ECEFF1',
+            'border-radius': '12px',
+            'box-sizing': 'border-box',
+            cursor: 'default',
+            height: '24px',
+            width: '24px',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-ms-track": {
+            cursor: 'default',
+            height: '8px',
+            transition: 'all 0.2s ease',
+            width: '100%',
+            background: 'transparent',
+            'border-color': 'transparent',
+            'border-width': '12px 0',
+            color: 'transparent',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-ms-fill-lower": {
+            'box-shadow': '1px 1px 1px #00000033, 0 0 1px #00000033',
+            background: '#ECEFF1',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#CFD8DC',
+            'border-radius': '10px',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-ms-fill-upper": {
+            'box-shadow': '1px 1px 1px #00000033, 0 0 1px #00000033',
+            background: '#ECEFF1',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#CFD8DC',
+            'border-radius': '10px',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-ms-thumb": {
+            'box-shadow': '4px 4px 4px #00000033, 0 0 4px #00000033',
+            background: '#607D8B',
+            'border-width': '2px',
+            'border-style': 'solid',
+            'border-color': '#ECEFF1',
+            'border-radius': '12px',
+            'box-sizing': 'border-box',
+            cursor: 'default',
+            height: '24px',
+            width: '24px',
+            'margin-top': '1px',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-moz-range-thumb, .Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-ms-thumb, .Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-ms-fill-lower, .Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:disabled::-ms-fill-upper": {
+            cursor: 'not-allowed',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider::-moz-focus-outer": {
+            border: '0',
+        },
+        ".Flow-Component.ComponentType-InputBox div.slider input[type='range'].ComponentTag-standard_slider:focus::-ms-fill-lower": {
+            background: 'var(--track-color, #eceff1)',
+        },
+    },
+    standard_input: {
+        '.Flow-Component.ComponentTag-standard_input': {
+            width: '300px',
+            'max-width': '100%',
+            display: 'flex',
+            'flex-direction': 'column',
+            position: 'relative',
+        },
+        '.ComponentTag-standard_input .Flow-Element.ElementType-Label': {
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'flex-end',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_input': {
+            padding: '8px 16px',
+            'border-radius': 'var(--border-radius)',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            width: '100%',
+            'font-size': 'inherit',
+            'font-family': 'inherit',
+            'font-weight': 'inherit',
+            'text-decoration': 'inherit',
+            color: 'inherit',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_input:focus': {
+            'outline-color': 'var(--color-primary)',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_input[disabled]': {
+            cursor: 'default',
+            background: '#EEEEEE',
+            'pointer-events': 'none',
+            color: '#AAAAAA',
+        },
+        '.Flow-Element.ElementType-TextareaElement.ComponentTag-standard_input': {
+            width: '100%',
+            padding: '8px 16px',
+            color: 'inherit',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            'border-radius': 'var(--border-radius)',
+            'font-size': 'inherit',
+            'font-family': 'inherit',
+            'font-weight': 'inherit',
+            'text-decoration': 'inherit',
+        },
+        '.Flow-Element.ElementType-TextareaElement.ComponentTag-standard_input:focus': {
+            'outline-color': 'var(--color-primary)',
+        },
+        '.Flow-Element.ElementType-TextareaElement.ComponentTag-standard_input[disabled]': {
+            cursor: 'default',
+            background: '#EEEEEE',
+            'pointer-events': 'none',
+            color: '#AAAAAA',
+        },
+        '.InputBox.ComponentTag-standard_input .validation-failed': {
+            padding: '10px',
+            'margin-top': '-1px',
+            color: '#141516',
+            background: '#FD8BA0',
+            'font-weight': '400',
+            'line-height': '1.1',
+            'border-bottom-left-radius': '4px',
+            'border-bottom-right-radius': '4px',
+        },
+    },
+    standard_checkbox: {
+        '.Flow-Component.ComponentTag-standard_checkbox': {
+            display: 'flex',
+            'flex-direction': 'column',
+            'align-items': 'center',
+        },
+        '.ComponentTag-standard_checkbox .Flow-Element.ElementType-Label': {
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'flex-end',
+        },
+    },
+    standard_option_buttons: {
+        '.Flow-Component.ComponentTag-standard_option_buttons': {
+            position: 'relative',
+            display: 'flex',
+            'flex-direction': 'column',
+        },
+        '.ComponentTag-standard_option_buttons .Flow-Element.ElementType-Label': {
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'flex-end',
+        },
+        '.Flow-Element.ElementType-OptionButtonList.ComponentTag-standard_option_buttons': {
+            display: 'flex',
+            'align-items': 'stretch',
+            'justify-content': 'center',
+            'flex-wrap': 'wrap',
+        },
+        '.Flow-Element.ElementType-OptionButtonCard.ComponentTag-standard_option_buttons': {
+            padding: '8px 32px',
+            margin: '8px',
+            flex: '0 0 auto',
+            display: 'flex',
+            'flex-direction': 'column',
+            'align-items': 'center',
+            'justify-content': 'space-between',
+            'text-align': 'center',
+            'background-color': 'white',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            'border-radius': 'var(--border-radius)',
+            cursor: 'pointer',
+            'line-height': '1.3',
+            transition: 'transform 0.1s, border-color 0.5s, background-color 0.2s',
+        },
+        '.Flow-Element.ElementType-OptionButtonCard.ComponentTag-standard_option_buttons .ElementType-OptionButtonCardCheckbox': {
+            width: '16px',
+            height: '16px',
+            'border-style': 'solid',
+            'border-width': '1px',
+            'border-color': '#000000',
+        },
+        '.Flow-Component.ComponentTag-standard_option_buttons .validation-failed': {
+            padding: '10px',
+            'margin-top': '-1px',
+            color: '#141516',
+            background: '#FD8BA0',
+            'font-weight': '400',
+            'line-height': '1.1',
+            'border-bottom-left-radius': '4px',
+            'border-bottom-right-radius': '4px',
+        },
+    },
+    standard_dropdown: {
+        '.Flow-Component.ComponentTag-standard_dropdown': {
+            width: '250px',
+            position: 'relative',
+            display: 'flex',
+            'flex-direction': 'column',
+        },
+        '.ComponentTag-standard_dropdown .Flow-Element.ElementType-Label': {
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'flex-end',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown': {
+            width: 'auto',
+            position: 'relative',
+            padding: '4px 8px',
+            display: 'inline-block',
+            'border-style': 'solid',
+            'border-width': '2px',
+            'border-color': 'gray',
+            'border-radius': 'var(--border-radius)',
+            'user-select': 'none',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown:focus': {
+            'border-color': '#0000FF',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown[data-open]': {
+            'border-bottom-left-radius': '0px',
+            'border-bottom-right-radius': '0px',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown .Flow-Element.ElementType-DropdownMain': {
+            width: 'auto',
+            padding: '0px',
+            position: 'relative',
+            flex: '1',
+            display: 'flex',
+            'align-items': 'center',
+            'line-height': '1',
+            cursor: 'pointer',
+            transition: 'all .3s',
+            '-webkit-box-align': 'center',
+            '-ms-flex-align': 'center',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown .Flow-Element.ElementType-DropdownMain span': {
+            flex: '1',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown .Flow-Element.ElementType-DropdownMain::after': {
+            width: '10px',
+            height: '10px',
+            'margin-left': '8px',
+            color: '#BBBBBB',
+            'line-height': '0',
+            content: "'⌄'",
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown:hover .Flow-Element.ElementType-DropdownMain::after': {
+            color: '#999999',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown .Flow-Element.ElementType-DropdownList': {
+            'max-height': '250px',
+            position: 'absolute',
+            display: 'none',
+            left: '0px',
+            right: '0px',
+            top: '100%',
+            'background-color': '#FFFFFF',
+            'border-style': 'solid',
+            'border-width': '1px',
+            'border-color': '#E8EBF0',
+            'border-bottom-left-radius': 'var(--border-radius)',
+            'border-bottom-right-radius': 'var(--border-radius)',
+            'line-height': '1',
+            'z-index': '2',
+            '-webkit-appearance': 'none',
+            '-moz-appearance': 'none',
+            appearance: 'none',
+        },
+        '.Flow-Element.ElementType-OptionDropdown.ComponentTag-standard_dropdown[data-open] .Flow-Element.ElementType-DropdownList': {
+            display: 'initial',
+        },
+        '.Flow-Element.ElementType-DropdownListOption.ComponentTag-standard_dropdown': {
+            padding: '4px 8px',
+            cursor: 'pointer',
+        },
+        '.Flow-Element.ElementType-DropdownListOption.ComponentTag-standard_dropdown:hover': {
+            'background-color': '#FAFAFA',
+        },
+        '.Flow-Element.ElementType-DropdownListOption.ComponentTag-standard_dropdown:focus': {
+            'background-color': '#FAFAFA',
+        },
+        '.Flow-Element.ElementType-DropdownListOption.ComponentTag-standard_dropdown.selected': {
+            'background-color': '#F5F5F5',
+        },
+    },
+    standard_switch: {
+        '.Flow-Component.ComponentTag-standard_switch': {
+            width: 'fit-content',
+            position: 'relative',
+            display: 'flex',
+            'flex-direction': 'row',
+            'align-items': 'center',
+            gap: '12px',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_switch': {
+            display: 'flex',
+            'align-items': 'center',
+            padding: '8px',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            'border-radius': 'var(--border-radius)',
+            cursor: 'pointer',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_switch .switch': {
+            width: '30px',
+            height: '16px',
+            background: '#EDF0F5',
+            'border-radius': '8px',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#CCCCCC',
+            transition: 'background-color 0.3s',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_switch.isOn .switch': {
+            background: 'var(--color-primary)',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_switch .switch .knob': {
+            height: '14px',
+            width: '14px',
+            background: 'white',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#CCCCCC',
+            'border-radius': '8px',
+            transition: 'margin 0.3s, background-color 0.3s',
+        },
+        '.Flow-Element.ElementType-InputElement.ComponentTag-standard_switch.isOn .switch .knob': {
+            'margin-left': '14px',
+            background: '#EDF0F5',
+        },
+    },
+    standard_file_upload: {
+        '.Flow-Element.ElementType-Uploader.ComponentTag-standard_file_upload>label': {
+            width: '100%',
+            height: '100%',
+            padding: '16px',
+            position: 'relative',
+            display: 'flex',
+            'flex-direction': 'column',
+            'text-align': 'center',
+            gap: '16px',
+            background: '#FAFAFA',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+            'border-radius': 'var(--border-radius)',
+            cursor: 'pointer',
+            transition: 'border-color 0.3s',
+        },
+        '.Flow-Element.ElementType-Uploader.ComponentTag-standard_file_upload>label>.ant-upload-drag-icon': {
+            margin: '0',
+            'font-size': '40px',
+        },
+        '.Flow-Element.ElementType-Uploader.ComponentTag-standard_file_upload>label>.file-upload-text': {
+            margin: '0',
+        },
+        '.Flow-Element.ElementType-Uploader.ComponentTag-standard_file_upload>label>.file-upload-hint': {
+            margin: '0',
+        },
+        '.Flow-Element.ElementType-Uploader.ComponentTag-standard_file_upload .validation-failed': {
+            padding: '10px',
+            'margin-top': '-1px',
+            color: '#141516',
+            background: '#FD8BA0',
+            'font-weight': '400',
+            'line-height': '1.1',
+            'border-bottom-left-radius': '4px',
+            'border-bottom-right-radius': '4px',
+        },
+    },
+    standard_stripe_checkout: {
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form': {
+            display: 'flex',
+            'flex-direction': 'column',
+            'align-items': 'stretch',
+            gap: '24px',
+        },
+        '.Flow-Element.ElementType-StripeCheckout2Button.ComponentTag-standard_stripe_checkout': {
+            padding: '12px 20px',
+            background: 'var(--color-primary)',
+            color: '#FFFFFF',
+            'border-radius': 'var(--border-radius)',
+            border: 'none',
+            cursor: 'pointer',
+            transition: 'opacity 0.3s',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form > button:hover:not([disabled])': {
+            opacity: '0.8',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form > button[disabled]': {
+            cursor: 'default',
+            'pointer-events': 'none',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form > button .Icon': {
+            'font-size': '12px',
+            margin: '0 0 0 6px',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form .payment-messages .Icon': {
+            margin: '0 4px -2px 0',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form .payment-messages .error-message': {
+            color: '#DF1B41',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form .payment-messages .success-message': {
+            color: '#008000',
+        },
+        '.StripeCheckout2.ComponentTag-standard_stripe_checkout div#payment-form .payment-messages .message': {
+            display: 'inline',
+        },
+    },
+    standard_calendly: {
+        '.Flow-Component.ComponentTag-standard_calendly': {
+            position: 'relative',
+            overflow: 'hidden',
+        },
+        '.ComponentType-BookMeeting.ComponentTag-standard_calendly .calendly-container': {
+            width: '800px',
+            'max-width': '100%',
+            height: '680px',
+        },
+    },
+    standard_hubspot: {
+        '.Flow-Component.ComponentTag-standard_hubspot': {
+            position: 'relative',
+            overflow: 'hidden',
+            width: '800px',
+            'max-width': '100%',
+            height: '680px',
+        },
+    },
+    standard_progress_bar: {
+        '.Flow-Component.ComponentTag-standard_progress_bar': {
+            width: '100%',
+            height: '26px',
+            position: 'relative',
+            'border-radius': 'var(--border-radius)',
+            overflow: 'hidden',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': '#DDDDDD',
+        },
+        '.FormProgress .bar.ComponentTag-standard_progress_bar': {
+            height: '100%',
+            background: 'var(--color-primary)',
+            transition: 'width 0.3s',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar .progress': {
+            position: 'absolute',
+            top: '4px',
+            left: '16px',
+            'font-size': '16px',
+            'line-height': '1',
+            color: '#DDDDDD',
+            transition: 'color 0.3s',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar .progress.altColor': {
+            color: '#FFFFFF',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar:hover .progress': {
+            color: 'var(--color-primary)',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar .reset': {
+            position: 'absolute',
+            top: '4px',
+            right: '16px',
+            'font-size': '16px',
+            'line-height': '1',
+            color: '#DDDDDD',
+            transition: 'color 0.3s',
+            cursor: 'pointer',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar .reset:hover': {
+            color: 'var(--color-primary)',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_bar .reset.percent-100:hover': {
+            color: '#FFFFFF',
+        },
+    },
+    standard_progress_circle: {
+        '.Flow-Component.ComponentTag-standard_progress_circle': {
+            position: 'relative',
+            cursor: 'pointer',
+            margin: '8px',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_circle g.ep-circle--container': {
+            transition: 'inherit',
+            'transform-origin': '50% 50%',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_circle .ep-circle': {
+            'transform-origin': '50% 50%',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_circle .ep-circle .ElementType-ProgressBarBackground': {
+            stroke: '#DDDDDD',
+        },
+        '.Flow-Component.ComponentType-ProgressBar.ComponentTag-standard_progress_circle .ep-circle .ElementType-ProgressBarFilled': {
+            stroke: 'var(--color-primary)',
+        },
+    },
+};
+export const STANDARD_TAGS_WITH_DEFAULT_STYLES = Object.keys(DEFAULT_TAGS_STYLES_V4);
+export function renderDefaultTagStylesCss(stylesMap = DEFAULT_TAGS_STYLES_V4) {
+    const lines = [
+        '/* Embeddables standard tag defaults (DEFAULT_TAGS_STYLES_V4). */',
+        '/* This file is scaffolded by `embeddables init` and should be kept in sync when adding standard-tagged components. */',
+        '',
+    ];
+    for (const [tag, selectors] of Object.entries(stylesMap)) {
+        lines.push(`/* ${tag} */`);
+        for (const [selector, styles] of Object.entries(selectors)) {
+            lines.push(`${selector} {`);
+            for (const [property, value] of Object.entries(styles)) {
+                lines.push(`  ${property}: ${value};`);
+            }
+            lines.push('}');
+            lines.push('');
+        }
+    }
+    return `${lines.join('\n').trimEnd()}\n`;
+}
+//# sourceMappingURL=defaultTagStylesV4.js.map