@seed-design/css 2.8.3 → 3.0.0

package/recipes/wheel-picker.layered.mjs

@@ -22,17 +22,28 @@ const wheelPickerSlotNames = [
     "item",
     "seed-wheel-picker__item"
   ],
+  [
+    "itemLabel",
+    "seed-wheel-picker__itemLabel"
+  ],
   [
     "selectionIndicator",
     "seed-wheel-picker__selectionIndicator"
   ]
 ];
 
-const defaultVariant = {};
+const defaultVariant = {
+  "size": "medium"
+};
 
 const compoundVariants = [];
 
-export const wheelPickerVariantMap = {};
+export const wheelPickerVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ]
+};
 
 export const wheelPickerVariantKeys = Object.keys(wheelPickerVariantMap);
 

package/recipes/wheel-picker.mjs

@@ -22,17 +22,28 @@ const wheelPickerSlotNames = [
     "item",
     "seed-wheel-picker__item"
   ],
+  [
+    "itemLabel",
+    "seed-wheel-picker__itemLabel"
+  ],
   [
     "selectionIndicator",
     "seed-wheel-picker__selectionIndicator"
   ]
 ];
 
-const defaultVariant = {};
+const defaultVariant = {
+  "size": "medium"
+};
 
 const compoundVariants = [];
 
-export const wheelPickerVariantMap = {};
+export const wheelPickerVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ]
+};
 
 export const wheelPickerVariantKeys = Object.keys(wheelPickerVariantMap);
 

package/vars/color/bg.d.ts

@@ -29,23 +29,27 @@ export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
 /** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-/** @deprecated @seed-design/css@3.0.0에서 새 이름 토큰으로 대체·제거될 예정입니다. */
-export declare const layerFill = "var(--seed-color-bg-layer-fill)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
 export declare const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export declare const magicWeak = "var(--seed-color-bg-magic-weak)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+/** @deprecated `$color.bg.neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 배경색입니다. */
 export declare const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) */
+/** @deprecated `$color.bg.neutral-solid-pressed`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) */
 export declare const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+/** `$color.bg.layer-default` 위에서 영역이나 섹션을 구분하는 표면 색상입니다. (muted) */
+export declare const neutralMuted = "var(--seed-color-bg-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) */
 export declare const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-pressed) */
+export declare const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
 export declare const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
 export declare const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+/** 표면과 같은 색상입니다. 회색 표면 위에서 주변과 구분되는 영역에 사용됩니다. (subtle) */
+export declare const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) */
 export declare const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. */

package/vars/color/bg.mjs

@@ -14,15 +14,17 @@ export const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pres
 export const layerBasement = "var(--seed-color-bg-layer-basement)";
 export const layerDefault = "var(--seed-color-bg-layer-default)";
 export const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-export const layerFill = "var(--seed-color-bg-layer-fill)";
 export const layerFloating = "var(--seed-color-bg-layer-floating)";
 export const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export const magicWeak = "var(--seed-color-bg-magic-weak)";
 export const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
 export const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+export const neutralMuted = "var(--seed-color-bg-neutral-muted)";
 export const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+export const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
 export const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
 export const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+export const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";
 export const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 export const neutralWeakAlpha = "var(--seed-color-bg-neutral-weak-alpha)";
 export const neutralWeakAlphaPressed = "var(--seed-color-bg-neutral-weak-alpha-pressed)";

package/vars/color/fg.d.ts

@@ -13,12 +13,24 @@ export declare const informative = "var(--seed-color-fg-informative)";
 export declare const informativeContrast = "var(--seed-color-fg-informative-contrast)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. */
 export declare const neutral = "var(--seed-color-fg-neutral)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+/** @deprecated `$color.fg.on-neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 전경색입니다. */
 export declare const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) */
 export declare const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) */
 export declare const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+/** 브랜드 Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onBrandSolid = "var(--seed-color-fg-on-brand-solid)";
+/** Critical Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onCriticalSolid = "var(--seed-color-fg-on-critical-solid)";
+/** Informative Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onInformativeSolid = "var(--seed-color-fg-on-informative-solid)";
+/** Neutral Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onNeutralSolid = "var(--seed-color-fg-on-neutral-solid)";
+/** Positive Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onPositiveSolid = "var(--seed-color-fg-on-positive-solid)";
+/** Warning Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onWarningSolid = "var(--seed-color-fg-on-warning-solid)";
 export declare const placeholder = "var(--seed-color-fg-placeholder)";
 /** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. */
 export declare const positive = "var(--seed-color-fg-positive)";

package/vars/color/fg.mjs

@@ -9,6 +9,12 @@ export const neutral = "var(--seed-color-fg-neutral)";
 export const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 export const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export const onBrandSolid = "var(--seed-color-fg-on-brand-solid)";
+export const onCriticalSolid = "var(--seed-color-fg-on-critical-solid)";
+export const onInformativeSolid = "var(--seed-color-fg-on-informative-solid)";
+export const onNeutralSolid = "var(--seed-color-fg-on-neutral-solid)";
+export const onPositiveSolid = "var(--seed-color-fg-on-positive-solid)";
+export const onWarningSolid = "var(--seed-color-fg-on-warning-solid)";
 export const placeholder = "var(--seed-color-fg-placeholder)";
 export const positive = "var(--seed-color-fg-positive)";
 export const positiveContrast = "var(--seed-color-fg-positive-contrast)";

package/vars/component/index.d.ts

@@ -1,104 +1 @@
-export { vars as accordionItem } from "./accordion-item";
-export { vars as accordion } from "./accordion";
-export { vars as actionButton } from "./action-button";
-export { vars as actionChip } from "./action-chip";
-export { vars as actionSheetCloseButton } from "./action-sheet-close-button";
-export { vars as actionSheetItem } from "./action-sheet-item";
-export { vars as actionSheet } from "./action-sheet";
-export { vars as alertDialog } from "./alert-dialog";
-export { vars as attachmentInputDropzone } from "./attachment-input-dropzone";
-export { vars as attachmentInputItemActionButton } from "./attachment-input-item-action-button";
-export { vars as attachmentInputItemRemoveButton } from "./attachment-input-item-remove-button";
-export { vars as attachmentInputItem } from "./attachment-input-item";
-export { vars as attachmentInputTrigger } from "./attachment-input-trigger";
-export { vars as attachmentInput } from "./attachment-input";
-export { vars as avatarStack } from "./avatar-stack";
-export { vars as avatar } from "./avatar";
-export { vars as badge } from "./badge";
-export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button";
-export { vars as bottomSheetHandle } from "./bottom-sheet-handle";
-export { vars as bottomSheet } from "./bottom-sheet";
-export { vars as calloutCloseButton } from "./callout-close-button";
-export { vars as callout } from "./callout";
-export { vars as checkboxGroup } from "./checkbox-group";
-export { vars as checkbox } from "./checkbox";
-export { vars as checkmark } from "./checkmark";
-export { vars as chipTablist } from "./chip-tablist";
-export { vars as chip } from "./chip";
-export { vars as contentPlaceholder } from "./content-placeholder";
-export { vars as contextualFloatingButton } from "./contextual-floating-button";
-export { vars as controlChip } from "./control-chip";
-export { vars as datePicker } from "./date-picker";
-export { vars as dialogCloseButton } from "./dialog-close-button";
-export { vars as dialog } from "./dialog";
-export { vars as divider } from "./divider";
-export { vars as extendedActionSheetCloseButton } from "./extended-action-sheet-close-button";
-export { vars as extendedActionSheetItem } from "./extended-action-sheet-item";
-export { vars as extendedActionSheet } from "./extended-action-sheet";
-export { vars as extendedFab } from "./extended-fab";
-export { vars as fab } from "./fab";
-export { vars as fieldLabel } from "./field-label";
-export { vars as field } from "./field";
-export { vars as floatingActionButton } from "./floating-action-button";
-export { vars as helpBubble } from "./help-bubble";
-export { vars as identityPlaceholder } from "./identity-placeholder";
-export { vars as imageFrameFloater } from "./image-frame-floater";
-export { vars as imageFrameIndicator } from "./image-frame-indicator";
-export { vars as imageFrameReactionButton } from "./image-frame-reaction-button";
-export { vars as imageFrame } from "./image-frame";
-export { vars as inlineBanner } from "./inline-banner";
-export { vars as inputButton } from "./input-button";
-export { vars as linkContent } from "./link-content";
-export { vars as listHeader } from "./list-header";
-export { vars as listItem } from "./list-item";
-export { vars as mannerTempBadge } from "./manner-temp-badge";
-export { vars as mannerTemp } from "./manner-temp";
-export { vars as menuItem } from "./menu-item";
-export { vars as menuSheetCloseButton } from "./menu-sheet-close-button";
-export { vars as menuSheetItem } from "./menu-sheet-item";
-export { vars as menuSheet } from "./menu-sheet";
-export { vars as menu } from "./menu";
-export { vars as notificationBadge } from "./notification-badge";
-export { vars as pageBannerCloseButton } from "./page-banner-close-button";
-export { vars as pageBanner } from "./page-banner";
-export { vars as paginationButton } from "./pagination-button";
-export { vars as paginationPageItem } from "./pagination-page-item";
-export { vars as progressCircle } from "./progress-circle";
-export { vars as quantityPickerButton } from "./quantity-picker-button";
-export { vars as quantityPicker } from "./quantity-picker";
-export { vars as radioGroup } from "./radio-group";
-export { vars as radio } from "./radio";
-export { vars as radiomark } from "./radiomark";
-export { vars as reactionButton } from "./reaction-button";
-export { vars as scrollFog } from "./scroll-fog";
-export { vars as segmentedControlIndicator } from "./segmented-control-indicator";
-export { vars as segmentedControlItem } from "./segmented-control-item";
-export { vars as segmentedControl } from "./segmented-control";
-export { vars as selectBoxCheckmark } from "./select-box-checkmark";
-export { vars as selectBoxGroup } from "./select-box-group";
-export { vars as selectBox } from "./select-box";
-export { vars as selectItem } from "./select-item";
-export { vars as selectTrigger } from "./select-trigger";
-export { vars as select } from "./select";
-export { vars as sidePanelCloseButton } from "./side-panel-close-button";
-export { vars as sidePanel } from "./side-panel";
-export { vars as skeleton } from "./skeleton";
-export { vars as sliderThumb } from "./slider-thumb";
-export { vars as sliderTick } from "./slider-tick";
-export { vars as slider } from "./slider";
-export { vars as snackbar } from "./snackbar";
-export { vars as switch } from "./switch";
-export { vars as switchmark } from "./switchmark";
-export { vars as tab } from "./tab";
-export { vars as tablist } from "./tablist";
-export { vars as tagGroupItem } from "./tag-group-item";
-export { vars as tagGroup } from "./tag-group";
-export { vars as textButton } from "./text-button";
-export { vars as textInput } from "./text-input";
-export { vars as timePicker } from "./time-picker";
-export { vars as toggleButton } from "./toggle-button";
-export { vars as topNavigationIconButton } from "./top-navigation-icon-button";
-export { vars as topNavigationTextButton } from "./top-navigation-text-button";
-export { vars as topNavigation } from "./top-navigation";
-export { vars as typography } from "./typography";
-export { vars as wheelPicker } from "./wheel-picker";
+export { vars as typography } from "./typography";

package/vars/component/index.mjs

@@ -1,104 +1 @@
-export { vars as accordionItem } from "./accordion-item.mjs";
-export { vars as accordion } from "./accordion.mjs";
-export { vars as actionButton } from "./action-button.mjs";
-export { vars as actionChip } from "./action-chip.mjs";
-export { vars as actionSheetCloseButton } from "./action-sheet-close-button.mjs";
-export { vars as actionSheetItem } from "./action-sheet-item.mjs";
-export { vars as actionSheet } from "./action-sheet.mjs";
-export { vars as alertDialog } from "./alert-dialog.mjs";
-export { vars as attachmentInputDropzone } from "./attachment-input-dropzone.mjs";
-export { vars as attachmentInputItemActionButton } from "./attachment-input-item-action-button.mjs";
-export { vars as attachmentInputItemRemoveButton } from "./attachment-input-item-remove-button.mjs";
-export { vars as attachmentInputItem } from "./attachment-input-item.mjs";
-export { vars as attachmentInputTrigger } from "./attachment-input-trigger.mjs";
-export { vars as attachmentInput } from "./attachment-input.mjs";
-export { vars as avatarStack } from "./avatar-stack.mjs";
-export { vars as avatar } from "./avatar.mjs";
-export { vars as badge } from "./badge.mjs";
-export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button.mjs";
-export { vars as bottomSheetHandle } from "./bottom-sheet-handle.mjs";
-export { vars as bottomSheet } from "./bottom-sheet.mjs";
-export { vars as calloutCloseButton } from "./callout-close-button.mjs";
-export { vars as callout } from "./callout.mjs";
-export { vars as checkboxGroup } from "./checkbox-group.mjs";
-export { vars as checkbox } from "./checkbox.mjs";
-export { vars as checkmark } from "./checkmark.mjs";
-export { vars as chipTablist } from "./chip-tablist.mjs";
-export { vars as chip } from "./chip.mjs";
-export { vars as contentPlaceholder } from "./content-placeholder.mjs";
-export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
-export { vars as controlChip } from "./control-chip.mjs";
-export { vars as datePicker } from "./date-picker.mjs";
-export { vars as dialogCloseButton } from "./dialog-close-button.mjs";
-export { vars as dialog } from "./dialog.mjs";
-export { vars as divider } from "./divider.mjs";
-export { vars as extendedActionSheetCloseButton } from "./extended-action-sheet-close-button.mjs";
-export { vars as extendedActionSheetItem } from "./extended-action-sheet-item.mjs";
-export { vars as extendedActionSheet } from "./extended-action-sheet.mjs";
-export { vars as extendedFab } from "./extended-fab.mjs";
-export { vars as fab } from "./fab.mjs";
-export { vars as fieldLabel } from "./field-label.mjs";
-export { vars as field } from "./field.mjs";
-export { vars as floatingActionButton } from "./floating-action-button.mjs";
-export { vars as helpBubble } from "./help-bubble.mjs";
-export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
-export { vars as imageFrameFloater } from "./image-frame-floater.mjs";
-export { vars as imageFrameIndicator } from "./image-frame-indicator.mjs";
-export { vars as imageFrameReactionButton } from "./image-frame-reaction-button.mjs";
-export { vars as imageFrame } from "./image-frame.mjs";
-export { vars as inlineBanner } from "./inline-banner.mjs";
-export { vars as inputButton } from "./input-button.mjs";
-export { vars as linkContent } from "./link-content.mjs";
-export { vars as listHeader } from "./list-header.mjs";
-export { vars as listItem } from "./list-item.mjs";
-export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
-export { vars as mannerTemp } from "./manner-temp.mjs";
-export { vars as menuItem } from "./menu-item.mjs";
-export { vars as menuSheetCloseButton } from "./menu-sheet-close-button.mjs";
-export { vars as menuSheetItem } from "./menu-sheet-item.mjs";
-export { vars as menuSheet } from "./menu-sheet.mjs";
-export { vars as menu } from "./menu.mjs";
-export { vars as notificationBadge } from "./notification-badge.mjs";
-export { vars as pageBannerCloseButton } from "./page-banner-close-button.mjs";
-export { vars as pageBanner } from "./page-banner.mjs";
-export { vars as paginationButton } from "./pagination-button.mjs";
-export { vars as paginationPageItem } from "./pagination-page-item.mjs";
-export { vars as progressCircle } from "./progress-circle.mjs";
-export { vars as quantityPickerButton } from "./quantity-picker-button.mjs";
-export { vars as quantityPicker } from "./quantity-picker.mjs";
-export { vars as radioGroup } from "./radio-group.mjs";
-export { vars as radio } from "./radio.mjs";
-export { vars as radiomark } from "./radiomark.mjs";
-export { vars as reactionButton } from "./reaction-button.mjs";
-export { vars as scrollFog } from "./scroll-fog.mjs";
-export { vars as segmentedControlIndicator } from "./segmented-control-indicator.mjs";
-export { vars as segmentedControlItem } from "./segmented-control-item.mjs";
-export { vars as segmentedControl } from "./segmented-control.mjs";
-export { vars as selectBoxCheckmark } from "./select-box-checkmark.mjs";
-export { vars as selectBoxGroup } from "./select-box-group.mjs";
-export { vars as selectBox } from "./select-box.mjs";
-export { vars as selectItem } from "./select-item.mjs";
-export { vars as selectTrigger } from "./select-trigger.mjs";
-export { vars as select } from "./select.mjs";
-export { vars as sidePanelCloseButton } from "./side-panel-close-button.mjs";
-export { vars as sidePanel } from "./side-panel.mjs";
-export { vars as skeleton } from "./skeleton.mjs";
-export { vars as sliderThumb } from "./slider-thumb.mjs";
-export { vars as sliderTick } from "./slider-tick.mjs";
-export { vars as slider } from "./slider.mjs";
-export { vars as snackbar } from "./snackbar.mjs";
-export { vars as switch } from "./switch.mjs";
-export { vars as switchmark } from "./switchmark.mjs";
-export { vars as tab } from "./tab.mjs";
-export { vars as tablist } from "./tablist.mjs";
-export { vars as tagGroupItem } from "./tag-group-item.mjs";
-export { vars as tagGroup } from "./tag-group.mjs";
-export { vars as textButton } from "./text-button.mjs";
-export { vars as textInput } from "./text-input.mjs";
-export { vars as timePicker } from "./time-picker.mjs";
-export { vars as toggleButton } from "./toggle-button.mjs";
-export { vars as topNavigationIconButton } from "./top-navigation-icon-button.mjs";
-export { vars as topNavigationTextButton } from "./top-navigation-text-button.mjs";
-export { vars as topNavigation } from "./top-navigation.mjs";
-export { vars as typography } from "./typography.mjs";
-export { vars as wheelPicker } from "./wheel-picker.mjs";
+export { vars as typography } from "./typography.mjs";

package/recipes/action-chip.css

@@ -1,75 +0,0 @@
-.seed-action-chip {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    border: none;
-    text-transform: none;
-    text-align: start;
-    white-space: nowrap;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
-    font-family: inherit;
-    line-height: 1;
-    font-weight: var(--seed-font-weight-medium);
-    border-radius: var(--seed-radius-full);
-    background: var(--seed-color-bg-neutral-weak);
-    color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-medium);
-    --seed-count-color: var(--seed-color-fg-neutral-muted);
-}
-.seed-action-chip:is(:active, [data-active]) {
-    background: var(--seed-color-bg-neutral-weak-pressed);
-}
-.seed-action-chip:is(:focus, [data-focus]) {
-    outline: none;
-}
-.seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
-    background: var(--seed-color-bg-disabled);
-    color: var(--seed-color-fg-disabled);
-    cursor: not-allowed;
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-}
-.seed-action-chip--size_medium {
-    min-height: var(--seed-dimension-x9);
-    padding-block: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    --seed-count-font-size: var(--seed-font-size-t4);
-    --seed-prefix-icon-size: var(--seed-dimension-x4);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x4);
-}
-.seed-action-chip--size_small {
-    min-height: var(--seed-dimension-x8);
-    padding-block: var(--seed-dimension-x1_5);
-    gap: var(--seed-dimension-x1);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    --seed-count-font-size: var(--seed-font-size-t4);
-    --seed-prefix-icon-size: var(--seed-dimension-x4);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x4);
-}
-.seed-action-chip--layout_withText {}
-.seed-action-chip--layout_iconOnly {}
-.seed-action-chip--size_medium-layout_withText {
-    padding-inline: var(--seed-dimension-x3_5);
-}
-.seed-action-chip--size_medium-layout_iconOnly {
-    min-width: var(--seed-dimension-x9);
-}
-.seed-action-chip--size_small-layout_withText {
-    padding-inline: var(--seed-dimension-x3);
-}
-.seed-action-chip--size_small-layout_iconOnly {
-    min-width: var(--seed-dimension-x8);
-}

package/recipes/action-chip.d.ts

@@ -1,26 +0,0 @@
-declare interface ActionChipVariant {
-  /**
-  * @default "medium"
-  */
-  size: "medium" | "small";
-/**
-  * @default "withText"
-  */
-  layout: "withText" | "iconOnly";
-}
-
-declare type ActionChipVariantMap = {
-  [key in keyof ActionChipVariant]: Array<ActionChipVariant[key]>;
-};
-
-export declare type ActionChipVariantProps = Partial<ActionChipVariant>;
-
-export declare const actionChipVariantMap: ActionChipVariantMap;
-
-export declare const actionChip: ((
-  props?: ActionChipVariantProps,
-) => string) & {
-  splitVariantProps: <T extends ActionChipVariantProps>(
-    props: T,
-  ) => [ActionChipVariantProps, Omit<T, keyof ActionChipVariantProps>];
-}

package/recipes/action-chip.layered.css

@@ -1,84 +0,0 @@
-@layer seed-components {
-  .seed-action-chip {
-    box-sizing: border-box;
-    cursor: pointer;
-    text-transform: none;
-    text-align: start;
-    white-space: nowrap;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: inherit;
-    line-height: 1;
-    font-weight: var(--seed-font-weight-medium);
-    border-radius: var(--seed-radius-full);
-    background: var(--seed-color-bg-neutral-weak);
-    color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-count-font-weight: var(--seed-font-weight-medium);
-    --seed-count-color: var(--seed-color-fg-neutral-muted);
-    border: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .seed-action-chip:is(:active, [data-active]) {
-    background: var(--seed-color-bg-neutral-weak-pressed);
-  }
-
-  .seed-action-chip:is(:focus, [data-focus]) {
-    outline: none;
-  }
-
-  .seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
-    background: var(--seed-color-bg-disabled);
-    color: var(--seed-color-fg-disabled);
-    cursor: not-allowed;
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-suffix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-action-chip--size_medium {
-    min-height: var(--seed-dimension-x9);
-    padding-block: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    --seed-count-font-size: var(--seed-font-size-t4);
-    --seed-prefix-icon-size: var(--seed-dimension-x4);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x4);
-  }
-
-  .seed-action-chip--size_small {
-    min-height: var(--seed-dimension-x8);
-    padding-block: var(--seed-dimension-x1_5);
-    gap: var(--seed-dimension-x1);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    --seed-count-font-size: var(--seed-font-size-t4);
-    --seed-prefix-icon-size: var(--seed-dimension-x4);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x4);
-  }
-
-  .seed-action-chip--size_medium-layout_withText {
-    padding-inline: var(--seed-dimension-x3_5);
-  }
-
-  .seed-action-chip--size_medium-layout_iconOnly {
-    min-width: var(--seed-dimension-x9);
-  }
-
-  .seed-action-chip--size_small-layout_withText {
-    padding-inline: var(--seed-dimension-x3);
-  }
-
-  .seed-action-chip--size_small-layout_iconOnly {
-    min-width: var(--seed-dimension-x8);
-  }
-}

package/recipes/action-chip.layered.mjs

@@ -1,51 +0,0 @@
-import './action-chip.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const defaultVariant = {
-  "size": "medium",
-  "layout": "withText"
-};
-
-const compoundVariants = [
-  {
-    "size": "medium",
-    "layout": "withText"
-  },
-  {
-    "size": "medium",
-    "layout": "iconOnly"
-  },
-  {
-    "size": "small",
-    "layout": "withText"
-  },
-  {
-    "size": "small",
-    "layout": "iconOnly"
-  }
-];
-
-export const actionChipVariantMap = {
-  "size": [
-    "medium",
-    "small"
-  ],
-  "layout": [
-    "withText",
-    "iconOnly"
-  ]
-};
-
-export const actionChipVariantKeys = Object.keys(actionChipVariantMap);
-
-export function actionChip(props) {
-  return createClassName(
-    "seed-action-chip",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
-  );
-}
-
-Object.assign(actionChip, { splitVariantProps: (props) => splitVariantProps(props, actionChipVariantMap) });
-
-// @recipe(seed): action-chip

package/recipes/action-chip.mjs

@@ -1,51 +0,0 @@
-import './action-chip.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const defaultVariant = {
-  "size": "medium",
-  "layout": "withText"
-};
-
-const compoundVariants = [
-  {
-    "size": "medium",
-    "layout": "withText"
-  },
-  {
-    "size": "medium",
-    "layout": "iconOnly"
-  },
-  {
-    "size": "small",
-    "layout": "withText"
-  },
-  {
-    "size": "small",
-    "layout": "iconOnly"
-  }
-];
-
-export const actionChipVariantMap = {
-  "size": [
-    "medium",
-    "small"
-  ],
-  "layout": [
-    "withText",
-    "iconOnly"
-  ]
-};
-
-export const actionChipVariantKeys = Object.keys(actionChipVariantMap);
-
-export function actionChip(props) {
-  return createClassName(
-    "seed-action-chip",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
-  );
-}
-
-Object.assign(actionChip, { splitVariantProps: (props) => splitVariantProps(props, actionChipVariantMap) });
-
-// @recipe(seed): action-chip