@wistia/ui 0.20.18 → 0.20.19

package/dist/index.d.ts

@@ -3620,6 +3620,10 @@ type RadioCardDefaultLayoutProps = {
      * Whether to show the indicator
      */
     showIndicator?: boolean | undefined;
+    /**
+     * Whether to show the sparkle icon and gated styles
+     */
+    isGated?: boolean | undefined;
 };
 
 type BaseRadioCardProps = Omit<ComponentPropsWithoutRef<'input'>, 'checked' | 'disabled' | 'id' | 'name' | 'onChange' | 'value'> & {
@@ -3657,6 +3661,7 @@ type RadioCardWithChildren = BaseRadioCardProps & {
     label?: never;
     description?: never;
     showIndicator?: never;
+    isGated?: never;
 };
 type RadioCardWithDefaultLayout = BaseRadioCardProps & RadioCardDefaultLayoutProps & {
     children?: never;

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.18
+ * @license @wistia/ui v0.20.19
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -17672,7 +17672,7 @@ var StyledCard2 = styled90.label`
   }
 
   &:has(input:checked) {
-    ${checkedStyles}
+    ${({ $isGated }) => $isGated ? getColorScheme("purple") : checkedStyles}
   }
 
   &:has(input:disabled) {
@@ -17703,6 +17703,7 @@ var RadioCardRoot = forwardRef28(
     children,
     disabled = false,
     id,
+    isGated = false,
     name,
     onChange,
     value,
@@ -17724,6 +17725,7 @@ var RadioCardRoot = forwardRef28(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
+        $isGated: isGated,
         $padding: padding,
         htmlFor: computedId,
         children: [
@@ -17813,6 +17815,12 @@ var StyledCardContent = styled92.div`
 var StyledCardIcon = styled92.div`
   display: contents;
 `;
+var StyledGatedIcon = styled92.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
 var StyledIndicatorContainer = styled92.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
@@ -17822,10 +17830,19 @@ var RadioCardDefaultLayout = ({
   icon,
   label,
   description,
-  showIndicator = true
+  showIndicator = true,
+  isGated = false
 }) => {
   return /* @__PURE__ */ jsxs60(StyledCardContent, { children: [
     showIndicator ? /* @__PURE__ */ jsx328(StyledIndicatorContainer, { $hasIcon: isNotNil37(icon), children: /* @__PURE__ */ jsx328(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    isGated ? /* @__PURE__ */ jsx328(StyledGatedIcon, { "data-testid": "wui-radio-gated-icon", children: /* @__PURE__ */ jsx328(
+      Icon,
+      {
+        colorScheme: "purple",
+        "data-testid": "wui-icon-sparkle",
+        type: "sparkle"
+      }
+    ) }) : null,
     /* @__PURE__ */ jsxs60(Stack, { gap: "space-02", children: [
       isNotNil37(icon) && /* @__PURE__ */ jsx328(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs60(
@@ -17860,11 +17877,12 @@ var RadioCardChildrenContainer = styled93.div`
 // src/components/RadioCard/RadioCard.tsx
 import { jsx as jsx329 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
-  ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
+  ({ icon, label, description, showIndicator, isGated, children, ...rootProps }, ref) => {
     return /* @__PURE__ */ jsx329(
       RadioCardRoot,
       {
         ref,
+        isGated,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
         children: children != null ? /* @__PURE__ */ jsx329(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx329(
@@ -17872,6 +17890,7 @@ var RadioCard = forwardRef29(
           {
             description,
             icon,
+            isGated,
             label,
             showIndicator
           }