@plitzi/sdk-style 0.37.1 → 0.37.3

package/dist/components/StyleInspector/categories/Position/PositionAdvanced.d.ts

@@ -3,5 +3,5 @@ export type PositionAdvancedProps = {
     value?: Record<StyleCategory, StyleValue | undefined>;
     onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const PositionAdvanced: ({ value, onChange }: PositionAdvancedProps) => import("react").JSX.Element;
+declare const PositionAdvanced: ({ value, onChange }: PositionAdvancedProps) => import('react').JSX.Element;
 export default PositionAdvanced;

package/dist/components/StyleInspector/categories/Position/PositionAdvancedButtons.d.ts

@@ -3,5 +3,5 @@ export type PositionAdvancedButtonsProps = {
     value?: Record<StyleCategory, StyleValue | undefined>;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const PositionAdvancedButtons: ({ value, onChange }: PositionAdvancedButtonsProps) => import("react").JSX.Element;
+declare const PositionAdvancedButtons: ({ value, onChange }: PositionAdvancedButtonsProps) => import('react').JSX.Element;
 export default PositionAdvancedButtons;

package/dist/components/StyleInspector/categories/Position/PositionClear.d.ts

@@ -3,5 +3,5 @@ export type PositionClearProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const PositionClear: ({ value, onChange }: PositionClearProps) => import("react").JSX.Element;
+declare const PositionClear: ({ value, onChange }: PositionClearProps) => import('react').JSX.Element;
 export default PositionClear;

package/dist/components/StyleInspector/categories/Position/PositionFloat.d.ts

@@ -3,5 +3,5 @@ export type PositionFloatProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const PositionFloat: ({ value, onChange }: PositionFloatProps) => import("react").JSX.Element;
+declare const PositionFloat: ({ value, onChange }: PositionFloatProps) => import('react').JSX.Element;
 export default PositionFloat;

package/dist/components/StyleInspector/categories/RawStyle/RawStyle.d.ts

@@ -4,5 +4,5 @@ export type VariablesProps = {
     isCollapsed?: boolean;
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const RawStyle: ({ selectors, isCollapsed, onCollapse }: VariablesProps) => import("react").JSX.Element;
+declare const RawStyle: ({ selectors, isCollapsed, onCollapse }: VariablesProps) => import('react').JSX.Element;
 export default RawStyle;

package/dist/components/StyleInspector/categories/Size/Size.d.ts

@@ -3,5 +3,5 @@ export type SizeProps = {
     isCollapsed?: boolean;
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: SizeProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: SizeProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/categories/Size/SizeFit.d.ts

@@ -3,5 +3,5 @@ export type SizeFitProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const SizeFit: ({ value, onChange }: SizeFitProps) => import("react").JSX.Element;
+declare const SizeFit: ({ value, onChange }: SizeFitProps) => import('react').JSX.Element;
 export default SizeFit;

package/dist/components/StyleInspector/categories/Size/SizeOverflow.d.ts

@@ -3,5 +3,5 @@ export type SizeOverflowProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const SizeOverflow: ({ value, onChange }: SizeOverflowProps) => import("react").JSX.Element;
+declare const SizeOverflow: ({ value, onChange }: SizeOverflowProps) => import('react').JSX.Element;
 export default SizeOverflow;

package/dist/components/StyleInspector/categories/Size/SizePosition.d.ts

@@ -3,5 +3,5 @@ export type SizePositionProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const SizePosition: ({ value, onChange }: SizePositionProps) => import("react").JSX.Element;
+declare const SizePosition: ({ value, onChange }: SizePositionProps) => import('react').JSX.Element;
 export default SizePosition;

package/dist/components/StyleInspector/categories/Spacing/Spacing.d.ts

@@ -3,5 +3,5 @@ export type SpacingProps = {
     isCollapsed?: boolean;
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: SpacingProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: SpacingProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/categories/Spacing/SpacingEditor.d.ts

@@ -4,5 +4,5 @@ export type SpacingEditorProps = {
     value?: StyleValue;
     onChange?: (type: StyleCategory, value: StyleValue) => void;
 };
-declare const SpacingEditor: ({ fragmentSelected, value, onChange }: SpacingEditorProps) => import("react").JSX.Element;
+declare const SpacingEditor: ({ fragmentSelected, value, onChange }: SpacingEditorProps) => import('react').JSX.Element;
 export default SpacingEditor;

package/dist/components/StyleInspector/categories/Spacing/SpacingMargin.d.ts

@@ -15,5 +15,5 @@ export type SpacingMarginProps = {
     onLinkSelected?: () => void;
     onSelectFragment?: (fragment?: StyleCategory) => void;
 };
-declare const SpacingMargin: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingMarginProps) => import("react").JSX.Element;
+declare const SpacingMargin: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingMarginProps) => import('react').JSX.Element;
 export default SpacingMargin;

package/dist/components/StyleInspector/categories/Spacing/SpacingNumber.d.ts

@@ -4,5 +4,5 @@ export type SpacingNumberProps = {
     active?: boolean;
     onClick?: () => void;
 };
-declare const SpacingNumber: ({ value, active, onClick }: SpacingNumberProps) => import("react").JSX.Element;
+declare const SpacingNumber: ({ value, active, onClick }: SpacingNumberProps) => import('react').JSX.Element;
 export default SpacingNumber;

package/dist/components/StyleInspector/categories/Spacing/SpacingPadding.d.ts

@@ -11,5 +11,5 @@ export type SpacingPaddingProps = {
     onLinkSelected?: () => void;
     onSelectFragment?: (fragment?: StyleCategory) => void;
 };
-declare const SpacingPadding: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingPaddingProps) => import("react").JSX.Element;
+declare const SpacingPadding: ({ fragmentSelected, values, isLinked, onLinkSelected, onSelectFragment }: SpacingPaddingProps) => import('react').JSX.Element;
 export default SpacingPadding;

package/dist/components/StyleInspector/categories/Typography/Typography.d.ts

@@ -3,5 +3,5 @@ export type TypographyProps = {
     isCollapsed?: boolean;
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: TypographyProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ replaceTokens, isCollapsed, onCollapse }: TypographyProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/categories/Typography/TypographyAlign.d.ts

@@ -3,5 +3,5 @@ export type TypographyAlignProps = {
     partialValue?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyAlign: ({ partialValue, onChange }: TypographyAlignProps) => import("react").JSX.Element;
+declare const TypographyAlign: ({ partialValue, onChange }: TypographyAlignProps) => import('react').JSX.Element;
 export default TypographyAlign;

package/dist/components/StyleInspector/categories/Typography/TypographyBreaking.d.ts

@@ -8,5 +8,5 @@ export type TypographyBreakingProps = {
     verticalAlign?: StyleValue;
     onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyBreaking: ({ whiteSpace, textWrap, wordBreak, overflowWrap, hyphens, verticalAlign, onChange }: TypographyBreakingProps) => import("react").JSX.Element;
+declare const TypographyBreaking: ({ whiteSpace, textWrap, wordBreak, overflowWrap, hyphens, verticalAlign, onChange }: TypographyBreakingProps) => import('react').JSX.Element;
 export default TypographyBreaking;

package/dist/components/StyleInspector/categories/Typography/TypographyClamp.d.ts

@@ -3,5 +3,5 @@ export type TypographyClampProps = {
     value?: StyleValue;
     onChange?: (values: StyleObject) => void;
 };
-declare const TypographyClamp: ({ value, onChange }: TypographyClampProps) => import("react").JSX.Element;
+declare const TypographyClamp: ({ value, onChange }: TypographyClampProps) => import('react').JSX.Element;
 export default TypographyClamp;

package/dist/components/StyleInspector/categories/Typography/TypographyFigures.d.ts

@@ -9,5 +9,5 @@ export type TypographyFiguresProps = {
  * How figures and glyphs are drawn: numbers that line up in a column, the font's own optional features, and the fill
  * that text painted with its background (`background-clip: text`) needs made transparent.
  */
-declare const TypographyFigures: ({ fontVariantNumeric, fontFeatureSettings, textFillColor, onChange }: TypographyFiguresProps) => import("react").JSX.Element;
+declare const TypographyFigures: ({ fontVariantNumeric, fontFeatureSettings, textFillColor, onChange }: TypographyFiguresProps) => import('react').JSX.Element;
 export default TypographyFigures;

package/dist/components/StyleInspector/categories/Typography/TypographyFont.d.ts

@@ -3,5 +3,5 @@ export type TypographyFontProps = {
     partialValue?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyFont: ({ partialValue, onChange }: TypographyFontProps) => import("react").JSX.Element;
+declare const TypographyFont: ({ partialValue, onChange }: TypographyFontProps) => import('react').JSX.Element;
 export default TypographyFont;

package/dist/components/StyleInspector/categories/Typography/TypographyStyle.d.ts

@@ -6,5 +6,5 @@ export type TypographyStyleProps = {
     textUnderlineOffset?: StyleValue;
     onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyStyle: ({ fontStyle, textDecoration, textDecorationThickness, textUnderlineOffset, onChange }: TypographyStyleProps) => import("react").JSX.Element;
+declare const TypographyStyle: ({ fontStyle, textDecoration, textDecorationThickness, textUnderlineOffset, onChange }: TypographyStyleProps) => import('react').JSX.Element;
 export default TypographyStyle;

package/dist/components/StyleInspector/categories/Typography/TypographyTextShadow.d.ts

@@ -3,5 +3,5 @@ export type TypographyTextShadowProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyTextShadow: ({ value, onChange }: TypographyTextShadowProps) => import("react").JSX.Element;
+declare const TypographyTextShadow: ({ value, onChange }: TypographyTextShadowProps) => import('react').JSX.Element;
 export default TypographyTextShadow;

package/dist/components/StyleInspector/categories/Typography/TypographyTextShadowItem.d.ts

@@ -4,5 +4,5 @@ export type TypographyTextShadowItemProps = {
     onChange?: (value: string) => void;
     onRemove?: (e: MouseEvent) => void;
 };
-declare const TypographyTextShadowItem: ({ value, onRemove, onChange }: TypographyTextShadowItemProps) => import("react").JSX.Element;
+declare const TypographyTextShadowItem: ({ value, onRemove, onChange }: TypographyTextShadowItemProps) => import('react').JSX.Element;
 export default TypographyTextShadowItem;

package/dist/components/StyleInspector/categories/Typography/TypographyTransform.d.ts

@@ -4,5 +4,5 @@ export type TypographyTransformProps = {
     direction?: StyleValue;
     onChange?: (category: StyleCategory) => (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const TypographyTransform: ({ textTransform, direction, onChange }: TypographyTransformProps) => import("react").JSX.Element;
+declare const TypographyTransform: ({ textTransform, direction, onChange }: TypographyTransformProps) => import('react').JSX.Element;
 export default TypographyTransform;

package/dist/components/StyleInspector/categories/Variables/Variables.d.ts

@@ -3,5 +3,5 @@ export type VariablesProps = {
     isCollapsed?: boolean;
     onCollapse?: (category: string, isCollapsed: boolean) => void;
 };
-declare const Variables: ({ isCollapsed, onCollapse }: VariablesProps) => import("react").JSX.Element | undefined;
+declare const Variables: ({ isCollapsed, onCollapse }: VariablesProps) => import('react').JSX.Element | undefined;
 export default Variables;

package/dist/components/StyleInspector/components/AncestorRules/AncestorRuleChip.d.ts

@@ -6,5 +6,5 @@ export type AncestorRuleChipProps = {
     onSelect?: (condition: AncestorCondition) => void;
     onRemove?: (condition: AncestorCondition) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ condition, active, unused, onSelect, onRemove }: AncestorRuleChipProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ condition, active, unused, onSelect, onRemove }: AncestorRuleChipProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/components/AncestorRules/AncestorRules.d.ts

@@ -10,5 +10,5 @@ export type AncestorRulesProps = {
     onRemove?: (condition: AncestorCondition) => void;
     onRemoveUnused?: () => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ conditions, unused, activeAncestor, activeState, activeVariant, onSelect, onRemove, onRemoveUnused }: AncestorRulesProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ conditions, unused, activeAncestor, activeState, activeVariant, onSelect, onRemove, onRemoveUnused }: AncestorRulesProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleInspector/components/CategoryContainer/CategoryContainer.d.ts

@@ -10,5 +10,5 @@ export type CategoryContainerProps = {
     isCollapsed?: boolean;
     onCollapse: (collapsed: boolean) => void;
 };
-declare const CategoryContainer: ({ className, classNameContent, children, title, dotKeys, advancedKeys, isCollapsed, onCollapse }: CategoryContainerProps) => import("react").JSX.Element;
+declare const CategoryContainer: ({ className, classNameContent, children, title, dotKeys, advancedKeys, isCollapsed, onCollapse }: CategoryContainerProps) => import('react').JSX.Element;
 export default CategoryContainer;

package/dist/components/StyleInspector/components/CategoryOption/CategoryOption.d.ts

@@ -35,5 +35,5 @@ export type CategoryOptionProps = (CategoryOptionPropsBase & {
     type?: 'input' | 'select';
     value?: StyleValue;
 });
-declare const CategoryOption: (props: CategoryOptionProps) => import("react").JSX.Element;
+declare const CategoryOption: (props: CategoryOptionProps) => import('react').JSX.Element;
 export default CategoryOption;

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionColor.d.ts

@@ -4,5 +4,5 @@ export type OptionColorProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
 };
-declare const OptionColor: ({ className, value, onChange }: OptionColorProps) => import("react").JSX.Element;
+declare const OptionColor: ({ className, value, onChange }: OptionColorProps) => import('react').JSX.Element;
 export default OptionColor;

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionIconGroup.d.ts

@@ -11,5 +11,5 @@ export type OptionIconGroupProps = {
     }[];
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue> | boolean) => void;
 };
-declare const OptionIconGroup: ({ items, onChange }: OptionIconGroupProps) => import("react").JSX.Element;
+declare const OptionIconGroup: ({ items, onChange }: OptionIconGroupProps) => import('react').JSX.Element;
 export default OptionIconGroup;

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionInput.d.ts

@@ -4,5 +4,5 @@ export type OptionInputProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
 };
-declare const OptionInput: ({ value, className, onChange }: OptionInputProps) => import("react").JSX.Element;
+declare const OptionInput: ({ value, className, onChange }: OptionInputProps) => import('react').JSX.Element;
 export default OptionInput;

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionMetricInput.d.ts

@@ -14,5 +14,5 @@ export type OptionMetricInputProps = {
     allowVariables?: boolean;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
 };
-declare const OptionMetricInput: ({ value, className, preffix, min, max, step, units, allowedWords, allowVariables, onChange }: OptionMetricInputProps) => import("react").JSX.Element;
+declare const OptionMetricInput: ({ value, className, preffix, min, max, step, units, allowedWords, allowVariables, onChange }: OptionMetricInputProps) => import('react').JSX.Element;
 export default OptionMetricInput;

package/dist/components/StyleInspector/components/CategoryOption/categoryTypes/OptionSelect.d.ts

@@ -6,5 +6,5 @@ export type OptionSelectProps = {
     value?: StyleValue;
     onChange?: (value: StyleValue | Record<StyleCategory, StyleValue>) => void;
 };
-declare const OptionSelect: ({ children, className, value, onChange }: OptionSelectProps) => import("react").JSX.Element;
+declare const OptionSelect: ({ children, className, value, onChange }: OptionSelectProps) => import('react').JSX.Element;
 export default OptionSelect;

package/dist/components/StyleInspector/components/CategorySection/CategorySection.d.ts

@@ -8,5 +8,5 @@ export type CategoryOptionProps = {
     direction?: 'column' | 'row';
     keys?: StyleCategory[];
 };
-declare const CategorySection: ({ children, className, direction, label, keys }: CategoryOptionProps) => import("react").JSX.Element;
+declare const CategorySection: ({ children, className, direction, label, keys }: CategoryOptionProps) => import('react').JSX.Element;
 export default CategorySection;

package/dist/components/StyleInspector/components/InspectorDots/InspectorDots.d.ts

@@ -2,5 +2,5 @@ import { StyleCategory } from '@plitzi/sdk-shared';
 export type InspectorDotsProps = {
     styleKeys?: StyleCategory[];
 };
-declare const InspectorDots: ({ styleKeys }: InspectorDotsProps) => import("react").JSX.Element;
+declare const InspectorDots: ({ styleKeys }: InspectorDotsProps) => import('react').JSX.Element;
 export default InspectorDots;

package/dist/components/StyleInspector/components/InspectorLabel/InspectorLabel.d.ts

@@ -7,5 +7,5 @@ export type InspectorLabelProps = {
     size?: 'small' | 'medium' | 'normal' | 'custom';
     sectionTitle?: boolean;
 };
-declare const _default: import('react').MemoExoticComponent<({ keyValue, children, className, size, sectionTitle }: InspectorLabelProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ keyValue, children, className, size, sectionTitle }: InspectorLabelProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleManager/ManagerSelector.d.ts

@@ -8,5 +8,5 @@ export type ManagerSelectorProps = {
     onSelect?: Dispatch<SetStateAction<StyleItem | undefined>>;
     selectors?: Record<string, StyleItem>;
 };
-declare const _default: import('react').MemoExoticComponent<({ displayMode, flat, flatList, selectors, selected, onSelect }: ManagerSelectorProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ displayMode, flat, flatList, selectors, selected, onSelect }: ManagerSelectorProps) => import('react').JSX.Element>;
 export default _default;

package/dist/components/StyleManager/StyleManager.d.ts

@@ -1,2 +1,2 @@
-declare const StyleManager: () => import("react").JSX.Element;
+declare const StyleManager: () => import('react').JSX.Element;
 export default StyleManager;

package/dist/components/StyleManager/StyleSelectorTag.d.ts

@@ -13,5 +13,5 @@ export type StyleSelectorTagProps = {
     onDelete?: (id: string) => void;
     onToggleCheck?: (id: string) => void;
 };
-declare const _default: import('react').MemoExoticComponent<({ id, label, active, checked, elementsCount, ancestorsCount, unusedAncestorsCount, type, onSelect, onDelete, onToggleCheck }: StyleSelectorTagProps) => import("react").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ id, label, active, checked, elementsCount, ancestorsCount, unusedAncestorsCount, type, onSelect, onDelete, onToggleCheck }: StyleSelectorTagProps) => import('react').JSX.Element>;
 export default _default;

package/dist/helpers/processSelector.mjs

@@ -1,64 +1,70 @@
 import e from "./processSelectorAttributes.mjs";
 import t from "./processSelectorName.mjs";
 import n from "./processSelectorVariables.mjs";
-import { inCascadeOrder as r } from "@plitzi/sdk-shared/style/styleStates";
+import { inCascadeOrder as r, isStartingState as i, stateSuffix as a } from "@plitzi/sdk-shared/style/styleStates";
 //#region src/helpers/processSelector.ts
-var i = 2, a = (e = i) => " ".repeat(e), o = (e, t, n) => `${n || !t.length ? e : `${e}\n`}${t.join(n ? "" : "\n")}`, s = (e, t, n = !0, r = i) => {
-	let o = [], s = a(r), c = a(r + i);
+var o = 2, s = (e = o) => " ".repeat(e), c = (e, t, n) => `${n || !t.length ? e : `${e}\n`}${t.join(n ? "" : "\n")}`, l = (e, t, n = !0, r = o) => {
+	let i = [], a = s(r), c = s(r + o);
 	for (let r of ["light", "dark"]) if (t[r].length) {
-		if (n) o.push(`@media(prefers-color-scheme:${r}){${e}{${t[r].join("")}}}`);
+		if (n) i.push(`@media(prefers-color-scheme:${r}){${e}{${t[r].join("")}}}`);
 		else {
 			let n = t[r].map((e) => `${c}${e}`).join("\n").replaceAll(":", ": ");
-			o.push(`\n@media(prefers-color-scheme: ${r}) {\n${s}${e} {\n${n}\n${s}}\n}`);
+			i.push(`\n@media(prefers-color-scheme: ${r}) {\n${a}${e} {\n${n}\n${a}}\n}`);
 		}
 	}
-	return o;
-}, c = (e, t, n = "") => [`${e}[data-variant="${t}"]${n}`, `${e}--${t}${n}`], l = (e, t, n) => {
-	let i = t ? "," : ", ", a = [];
-	for (let [o, { default: s, states: l, variants: u }] of Object.entries(e)) {
-		s?.length && a.push(d(`:where(.${o}) &`, s, {}, t, n));
-		for (let [e, i] of r(l ?? {})) a.push(d(`:where(.${o}:${e}) &`, i, {}, t, n));
-		for (let [e, s] of Object.entries(u ?? {})) {
-			if (s.default.length) {
-				let r = c(`.${o}`, e).join(i);
-				a.push(d(`:where(${r}) &`, s.default, {}, t, n));
+	return i;
+}, u = (e, t, n = "") => [`${e}[data-variant="${t}"]${n}`, `${e}--${t}${n}`], d = (e, t, n) => {
+	let o = t ? "," : ", ", s = [];
+	for (let [c, { default: l, states: d, variants: f }] of Object.entries(e)) {
+		l?.length && s.push(m(`:where(.${c}) &`, l, {}, t, n));
+		for (let [e, o] of r(d ?? {})) s.push(m(`:where(.${c}${a(e)}) &`, o, {}, t, n)), i(e) && s.push(p(`:where(.${c}) &`, o, t, n));
+		for (let [e, l] of Object.entries(f ?? {})) {
+			if (l.default.length) {
+				let r = u(`.${c}`, e).join(o);
+				s.push(m(`:where(${r}) &`, l.default, {}, t, n));
 			}
-			for (let [l, u] of r(s.states ?? {})) {
-				let r = c(`.${o}`, e, `:${l}`).join(i);
-				a.push(d(`:where(${r}) &`, u, {}, t, n));
+			for (let [d, f] of r(l.states ?? {})) {
+				let r = u(`.${c}`, e, a(d)).join(o);
+				if (s.push(m(`:where(${r}) &`, f, {}, t, n)), i(d)) {
+					let r = u(`.${c}`, e).join(o);
+					s.push(p(`:where(${r}) &`, f, t, n));
+				}
 			}
 		}
 	}
-	return a;
-}, u = (e, t, n, o = !0, s = i) => {
-	let { states: c, variants: u, ancestors: f } = n, p = o ? t.join("") : t.map((e) => `${a(s + i)}${e}`).join("\n").replaceAll(":", ": "), m = c ? r(c).map(([e, t]) => d(`&:${e}`, t, {}, o, s + i)) : [], h = e.replace("plitzi__", ""), g = u ? Object.entries(u).map(([e, t]) => d(`&[data-variant="${e}"]${o ? "," : ", "}&${h}--${e}`, t.default, { states: t.states }, o, s + i)) : [], _ = f ? l(f, o, s + i) : [];
-	if (o) return `${p}${m.join("")}${g.join("")}${_.join("")}`;
-	let v = p ? [p] : [];
+	return s;
+}, f = (e, t, n, c = !0, l = o) => {
+	let { states: u, variants: f, ancestors: h } = n, g = c ? t.join("") : t.map((e) => `${s(l + o)}${e}`).join("\n").replaceAll(":", ": "), _ = u ? r(u).flatMap(([e, t]) => {
+		let n = m(`&${a(e)}`, t, {}, c, l + o);
+		return i(e) ? [n, p("&", t, c, l + o)] : [n];
+	}) : [], v = e.replace("plitzi__", ""), y = f ? Object.entries(f).map(([e, t]) => m(`&[data-variant="${e}"]${c ? "," : ", "}&${v}--${e}`, t.default, { states: t.states }, c, l + o)) : [], b = h ? d(h, c, l + o) : [];
+	if (c) return `${g}${_.join("")}${y.join("")}${b.join("")}`;
+	let x = g ? [g] : [];
 	for (let e of [
-		m,
-		g,
-		_
-	]) e.length && v.push(e.join("\n\n"));
-	return v.join("\n\n");
-}, d = (e, t, n, r = !0, o = i) => {
-	let s = u(e, t, n, r, o);
-	return r ? `${e}{${s}}` : `${a(o)}${e} {\n${s}\n${a(o)}}`;
-}, f = (e, t, n = !0, r = i) => {
-	let a = [];
-	for (let [o, s] of Object.entries(t)) {
-		if (o === "base") {
-			let t = u(e, s.default, s, n, r);
-			t && a.push(t);
+		_,
+		y,
+		b
+	]) e.length && x.push(e.join("\n\n"));
+	return x.join("\n\n");
+}, p = (e, t, n, r) => n ? `@starting-style{${m(e, t, {}, n, r)}}` : `${s(r)}@starting-style {\n${m(e, t, {}, n, r + o)}\n${s(r)}}`, m = (e, t, n, r = !0, i = o) => {
+	let a = f(e, t, n, r, i);
+	return r ? `${e}{${a}}` : `${s(i)}${e} {\n${a}\n${s(i)}}`;
+}, h = (e, t, n = !0, r = o) => {
+	let i = [];
+	for (let [a, s] of Object.entries(t)) {
+		if (a === "base") {
+			let t = f(e, s.default, s, n, r);
+			t && i.push(t);
 			continue;
 		}
-		a.push(d(`${e}-${o}`, s.default, s, n, r + i));
+		i.push(m(`${e}-${a}`, s.default, s, n, r + o));
 	}
-	return n ? `${e}{${a.join("")}}` : `${e} {\n${a.join("\n\n")}\n}`;
-}, p = (r, i = !0) => {
-	let a = t(r), c = n(r), l = e(r), u = c ? s(a, c, i) : void 0;
-	c && l.attributes.base.default.push(...c.default);
-	let d = f(a, l.attributes, i, 0);
-	return u ? o(d, u, i) : d;
-}, m = (e, t = !1) => e.map((e) => p(e, t));
+	return n ? `${e}{${i.join("")}}` : `${e} {\n${i.join("\n\n")}\n}`;
+}, g = (r, i = !0) => {
+	let a = t(r), o = n(r), s = e(r), u = o ? l(a, o, i) : void 0;
+	o && s.attributes.base.default.push(...o.default);
+	let d = h(a, s.attributes, i, 0);
+	return u ? c(d, u, i) : d;
+}, _ = (e, t = !1) => e.map((e) => g(e, t));
 //#endregion
-export { p as default, m as processSelectors };
+export { g as default, _ as processSelectors };