@stigg/react-sdk 7.7.1-beta.0 → 7.7.1-beta.1

package/src/components/checkout/hooks/usePlanStepModel.ts

@@ -1,184 +0,0 @@
-import keyBy from 'lodash/keyBy';
-import compact from 'lodash/compact';
-import { BillableFeatureInput, BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
-import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg/js-client-sdk';
-import { useCheckoutContext } from '../CheckoutProvider';
-import { getTierByQuantity, hasTierWithUnitPrice } from '../../utils/priceTierUtils';
-import { getValidPriceQuantity } from '../../utils/priceUtils';
-import { hasAnnualPrices, hasMonthlyPrices } from '../../utils/planPrices';
-
-export type PlanStepState = {
-  billingPeriod: BillingPeriod;
-  billableFeatures: BillableFeatureInput[];
-  billingCountryCode?: string;
-};
-
-type GetPlanStepInitialStateProps = {
-  preferredBillingPeriod?: BillingPeriod;
-  plan?: Plan;
-  activeSubscription?: Subscription | null;
-  billingCountryCode?: string;
-  preconfiguredBillableFeatures: BillableFeature[];
-};
-
-const getBillingPeriod = (billingPeriod: BillingPeriod, hasMonthlyPrices?: boolean, hasAnnualPrices?: boolean) => {
-  if (billingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
-    return billingPeriod;
-  }
-  if (billingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
-    return billingPeriod;
-  }
-  return null;
-};
-
-const isInAdvanceCommitmentCharge = ({ pricingModel }: Price) => {
-  return pricingModel === BillingModel.PerUnit;
-};
-
-function getBillableFeatures(
-  preconfiguredBillableFeatures: BillableFeature[],
-  planPrices?: Price[],
-  activeSubscription?: Subscription | null,
-): BillableFeature[] {
-  if (!planPrices) return [];
-
-  const preconfBillableFeaturesByFeatureId = keyBy(preconfiguredBillableFeatures, 'featureId');
-
-  const quantityByFeatureId = keyBy(
-    compact(
-      activeSubscription?.prices?.map((charge) => {
-        const { feature } = charge;
-        if (!feature || !isInAdvanceCommitmentCharge(charge)) {
-          return null;
-        }
-
-        return {
-          featureId: feature.featureId,
-          quantity: feature.unitQuantity || null,
-        };
-      }),
-    ),
-    'featureId',
-  );
-
-  return compact(
-    planPrices?.map((price) => {
-      const featureId = price.feature?.featureId;
-      if (!featureId || !isInAdvanceCommitmentCharge(price)) {
-        return null;
-      }
-
-      let quantity;
-      const preconfiguredQuantity =
-        preconfBillableFeaturesByFeatureId[featureId]?.quantity || quantityByFeatureId[featureId]?.quantity;
-
-      quantity = getValidPriceQuantity(price, preconfiguredQuantity || 1);
-
-      if (price.isTieredPrice && !hasTierWithUnitPrice(price.tiers)) {
-        const tier = getTierByQuantity(price.tiers!, quantity);
-        quantity = tier.upTo!;
-      }
-
-      return {
-        featureId,
-        quantity,
-      };
-    }),
-  );
-}
-
-function resolveBillingPeriod({
-  plan,
-  activeSubscription,
-  preferredBillingPeriod,
-}: {
-  plan?: Plan;
-  activeSubscription?: Subscription | null;
-  preferredBillingPeriod?: BillingPeriod;
-}) {
-  const hasMonthlyPlan = hasMonthlyPrices(plan);
-  const hasAnnualPlan = hasAnnualPrices(plan);
-
-  if (preferredBillingPeriod) {
-    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPlan, hasAnnualPlan);
-    if (billingPeriod) {
-      return billingPeriod;
-    }
-  }
-
-  const isUpdate = activeSubscription?.plan?.id === plan?.id;
-  if (isUpdate) {
-    return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
-  }
-
-  if (activeSubscription?.prices && activeSubscription?.prices.length > 0) {
-    const billingPeriod = getBillingPeriod(activeSubscription?.prices[0].billingPeriod, hasMonthlyPlan, hasAnnualPlan);
-    if (billingPeriod) {
-      return billingPeriod;
-    }
-  }
-
-  return hasAnnualPlan ? BillingPeriod.Annually : BillingPeriod.Monthly;
-}
-
-export function getPlanStepInitialState({
-  preferredBillingPeriod,
-  plan,
-  activeSubscription,
-  billingCountryCode,
-  preconfiguredBillableFeatures,
-}: GetPlanStepInitialStateProps): PlanStepState {
-  const billingPeriod = resolveBillingPeriod({ plan, activeSubscription, preferredBillingPeriod });
-  const planPrices = plan?.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
-  const billableFeatures = getBillableFeatures(preconfiguredBillableFeatures, planPrices, activeSubscription);
-
-  return {
-    billingPeriod,
-    billableFeatures,
-    billingCountryCode,
-  };
-}
-
-function usePlanState() {
-  const [{ planStep }] = useCheckoutContext();
-  return planStep;
-}
-
-function useSetBillableFeature() {
-  const [, setState] = useCheckoutContext();
-
-  return (featureId: string, quantity: number) =>
-    setState((draft) => {
-      const billableFeature = draft.planStep.billableFeatures.find(
-        (billableFeature) => billableFeature.featureId === featureId,
-      );
-
-      if (billableFeature) {
-        billableFeature.quantity = quantity;
-      } else {
-        draft.planStep.billableFeatures.push({ featureId, quantity });
-      }
-    });
-}
-
-function useSetBillingPeriod() {
-  const [, setState] = useCheckoutContext();
-
-  return (billingPeriod: BillingPeriod) =>
-    setState((draft) => {
-      draft.planStep.billingPeriod = billingPeriod;
-      draft.addonsStep.addons = draft.addonsStep.addons.filter((addon) =>
-        addon.addon.pricePoints.some((pricePoint) => pricePoint.billingPeriod === billingPeriod),
-      );
-    });
-}
-
-export function usePlanStepModel() {
-  const state = usePlanState();
-
-  return {
-    ...state,
-    setBillingPeriod: useSetBillingPeriod(),
-    setBillableFeature: useSetBillableFeature(),
-  };
-}

package/src/components/checkout/hooks/usePreviewSubscription.ts

@@ -1,165 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import isEmpty from 'lodash/isEmpty';
-import { BillingAddress, PreviewSubscription, StiggClient, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
-import { useCheckoutContext } from '../CheckoutProvider';
-import { useCheckoutModel } from './useCheckoutModel';
-import { SubscriptionState, useSubscriptionModel } from './useSubscriptionModel';
-import { MockCheckoutPreviewCallback } from '../types';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-
-function mapBillingInformation({
-  billingAddress,
-  taxPercentage,
-}: {
-  billingAddress?: BillingAddress;
-  taxPercentage?: number;
-}): Pick<PreviewSubscription, 'billingInformation'> {
-  if (!billingAddress && !taxPercentage) {
-    return {};
-  }
-
-  return {
-    billingInformation: {
-      ...(billingAddress ? { billingAddress } : {}),
-      ...(taxPercentage ? { taxPercentage } : {}),
-    },
-  };
-}
-
-type UsePreviewSubscriptionProps = {
-  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
-};
-
-export type PreviewSubscriptionProps = {
-  customerId?: string;
-  planId?: string;
-  resourceId?: string;
-  stigg: StiggClient;
-} & SubscriptionState &
-  UsePreviewSubscriptionProps;
-
-const previewSubscription = async ({
-  stigg,
-  customerId,
-  planId,
-  resourceId,
-  promotionCode,
-  addons,
-  billableFeatures,
-  billingCountryCode,
-  billingPeriod,
-  billingAddress,
-  taxPercentage,
-  onMockCheckoutPreview,
-}: PreviewSubscriptionProps) => {
-  const estimateAddons = addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
-  let subscriptionPreview: SubscriptionPreviewV2 | null = null;
-  let errorMessage: string | null = null;
-
-  try {
-    if (customerId && planId) {
-      const previewSubscriptionProps: PreviewSubscription = {
-        customerId,
-        planId,
-        resourceId,
-        billingCountryCode,
-        addons: estimateAddons,
-        billingPeriod,
-        promotionCode,
-        billableFeatures: isEmpty(billableFeatures) ? undefined : billableFeatures,
-        ...mapBillingInformation({ billingAddress, taxPercentage }),
-      };
-
-      subscriptionPreview = onMockCheckoutPreview
-        ? onMockCheckoutPreview(previewSubscriptionProps)
-        : await stigg.previewSubscription(previewSubscriptionProps);
-    }
-  } catch (error) {
-    const [, errorMsg] = (error as Error)?.message?.split('Error:') || [];
-
-    errorMessage = errorMsg?.trim();
-  }
-
-  return { subscriptionPreview, errorMessage };
-};
-
-export const usePreviewSubscriptionAction = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
-  const { stigg } = useStiggContext();
-  const subscription = useSubscriptionModel();
-  const [{ resourceId }] = useCheckoutContext();
-  const { checkoutState, widgetState } = useCheckoutModel();
-  const { plan, customer } = checkoutState || {};
-
-  const previewSubscriptionAction = useCallback(
-    async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
-      if (!widgetState.isValid) {
-        return { subscriptionPreview: null, errorMessage: null };
-      }
-
-      return previewSubscription({
-        stigg,
-        customerId: customer?.id,
-        planId: plan?.id,
-        resourceId,
-        addons: subscription.addons,
-        billableFeatures: subscription.billableFeatures,
-        billingCountryCode: subscription.billingCountryCode,
-        billingPeriod: subscription.billingPeriod,
-        billingAddress: subscription.billingAddress,
-        taxPercentage: subscription.taxPercentage,
-        promotionCode: promotionCode ?? subscription.promotionCode,
-        onMockCheckoutPreview,
-      });
-    },
-    [
-      stigg,
-      customer?.id,
-      plan?.id,
-      resourceId,
-      subscription.addons,
-      subscription.billableFeatures,
-      subscription.billingCountryCode,
-      subscription.billingPeriod,
-      subscription.billingAddress,
-      subscription.taxPercentage,
-      subscription.promotionCode,
-      widgetState.isValid,
-      onMockCheckoutPreview,
-    ],
-  );
-
-  return { previewSubscriptionAction };
-};
-
-const SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME = 500;
-
-export const usePreviewSubscription = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
-  const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreviewV2 | null>(null);
-  const [isFetchingSubscriptionPreview, setIsFetchingSubscriptionPreview] = useState(false);
-
-  const { previewSubscriptionAction } = usePreviewSubscriptionAction({ onMockCheckoutPreview });
-
-  useEffect(() => {
-    const estimateSubscription = async () => {
-      const { subscriptionPreview } = await previewSubscriptionAction();
-      if (subscriptionPreview) {
-        setSubscriptionPreview(subscriptionPreview);
-      }
-
-      setIsFetchingSubscriptionPreview(false);
-    };
-
-    setIsFetchingSubscriptionPreview(true);
-
-    const timer = setTimeout(() => {
-      setIsFetchingSubscriptionPreview(true);
-      void estimateSubscription();
-    }, SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [previewSubscriptionAction]);
-
-  return { subscriptionPreview, isFetchingSubscriptionPreview };
-};

package/src/components/checkout/hooks/useProgressBarModel.ts

@@ -1,211 +0,0 @@
-import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
-import { Addon, BillableFeature, BillingPeriod, CheckoutStatePlan } from '@stigg/js-client-sdk';
-import { useCheckoutContext } from '../CheckoutProvider';
-import { CheckoutSteps } from '../configurations/steps';
-import { hasMultipleBillingPeriods } from '../../utils/planPrices';
-import { CheckoutStepKey } from '../types';
-
-export type CheckoutStep = {
-  key: CheckoutStepKey;
-  label: string;
-};
-
-const CHECKOUT_STEPS: CheckoutStep[] = [
-  { key: CheckoutStepKey.PLAN, label: 'Plan' },
-  { key: CheckoutStepKey.ADDONS, label: 'Add-ons' },
-  { key: CheckoutStepKey.PAYMENT, label: 'Payment details' },
-];
-
-export type ProgressBarState = {
-  activeStep: number;
-  completedSteps: number[];
-  steps: CheckoutStep[];
-  isDisabled: boolean;
-};
-
-const INITIAL_STATE: ProgressBarState = {
-  activeStep: 0,
-  completedSteps: [],
-  steps: CHECKOUT_STEPS,
-  isDisabled: false,
-};
-
-type GetProgressBarInitialStateProps = {
-  isLoading: boolean;
-  skipCheckoutSteps: CheckoutSteps[];
-  plan?: CheckoutStatePlan;
-  availableAddons?: Addon[];
-  availableCharges: BillableFeatureInput[];
-  preferredBillingPeriod?: BillingPeriod;
-  preconfiguredBillableFeatures: BillableFeature[];
-};
-
-const canSkipPlanStep = (
-  plan: CheckoutStatePlan,
-  availableCharges: BillableFeatureInput[],
-  preconfiguredBillableFeatures: BillableFeature[],
-  preferredBillingPeriod?: BillingPeriod,
-) => {
-  // if multiple billing periods are available, a preferred billing period must be selected
-  if (hasMultipleBillingPeriods(plan) && !preferredBillingPeriod) {
-    return false;
-  }
-
-  const availableChargesIds = availableCharges.map((charge) => charge.featureId);
-  const preconfiguredChargesIds = preconfiguredBillableFeatures.map((charge) => charge.featureId);
-
-  // if there are available charges, they must be preconfigured
-  if (
-    availableChargesIds.length !== preconfiguredChargesIds.length ||
-    !availableChargesIds.every((charge) => preconfiguredChargesIds.includes(charge))
-  ) {
-    return false;
-  }
-
-  return true;
-};
-
-export function getProgressBarInitialState({
-  isLoading,
-  skipCheckoutSteps,
-  plan,
-  availableAddons,
-  availableCharges,
-  preferredBillingPeriod,
-  preconfiguredBillableFeatures,
-}: GetProgressBarInitialStateProps) {
-  if (isLoading || !plan) {
-    return INITIAL_STATE;
-  }
-
-  const stepsToFilter: CheckoutStepKey[] = [];
-
-  if (
-    skipCheckoutSteps.includes('PLAN') &&
-    canSkipPlanStep(plan, availableCharges, preconfiguredBillableFeatures, preferredBillingPeriod)
-  ) {
-    stepsToFilter.push(CheckoutStepKey.PLAN);
-  }
-
-  if (availableAddons?.length === 0 || skipCheckoutSteps.includes('ADDONS')) {
-    stepsToFilter.push(CheckoutStepKey.ADDONS);
-  }
-
-  return { ...INITIAL_STATE, steps: CHECKOUT_STEPS.filter((step) => !stepsToFilter.includes(step.key)) };
-}
-
-function useProgressBarState() {
-  const [{ progressBar }] = useCheckoutContext();
-  return progressBar;
-}
-
-function useSetActiveStep() {
-  const [state, setState] = useCheckoutContext();
-  return async (stepNumber: number) => {
-    const { progressBar, planStep, addonsStep, paymentStep, onBeforeStepChange } = state;
-
-    if (stepNumber !== progressBar.activeStep && onBeforeStepChange) {
-      const currentStep = progressBar.steps[progressBar.activeStep];
-      const targetStep = progressBar.steps[stepNumber];
-
-      if (currentStep && targetStep) {
-        const currentState = {
-          planStep,
-          addonsStep,
-          paymentStep,
-        };
-
-        const canProceed = await onBeforeStepChange({
-          from: currentStep.key,
-          to: targetStep.key,
-          state: currentState,
-        });
-
-        if (!canProceed) {
-          return;
-        }
-      }
-    }
-
-    setState(({ progressBar }) => {
-      progressBar.activeStep = stepNumber;
-    });
-  };
-}
-function useMarkStepAsCompleted() {
-  const [, setState] = useCheckoutContext();
-  return (stepNumber: number) =>
-    setState(({ progressBar }) => {
-      progressBar.completedSteps.push(stepNumber);
-    });
-}
-
-function isCheckoutComplete(progressBar: ProgressBarState) {
-  return progressBar.completedSteps.length >= progressBar.steps.length - 1;
-}
-
-function useGoNext() {
-  const [state, setState] = useCheckoutContext();
-  return async () => {
-    const { progressBar, planStep, addonsStep, paymentStep, onBeforeStepChange } = state;
-
-    if (progressBar.isDisabled) {
-      return;
-    }
-
-    const currentStep = progressBar.steps[progressBar.activeStep];
-    const nextStep = progressBar.steps[progressBar.activeStep + 1];
-
-    if (nextStep && onBeforeStepChange) {
-      const currentState = {
-        planStep,
-        addonsStep,
-        paymentStep,
-      };
-
-      const canProceed = await onBeforeStepChange({
-        from: currentStep.key,
-        to: nextStep.key,
-        state: currentState,
-      });
-
-      if (!canProceed) {
-        return;
-      }
-    }
-
-    setState(({ progressBar }) => {
-      if (!progressBar.completedSteps.includes(progressBar.activeStep)) {
-        progressBar.completedSteps.push(progressBar.activeStep);
-      }
-
-      if (progressBar.activeStep < progressBar.steps.length - 1) {
-        progressBar.activeStep += 1;
-      }
-    });
-  };
-}
-
-function useSetIsDisabled() {
-  const [, setState] = useCheckoutContext();
-  return (isDisabled?: boolean) =>
-    setState(({ progressBar }) => {
-      progressBar.isDisabled = !!isDisabled;
-    });
-}
-
-export function useProgressBarModel() {
-  const progressBarState = useProgressBarState();
-  const currentStep = progressBarState.steps[progressBarState.activeStep];
-
-  return {
-    currentStep,
-    progressBarState,
-    isLastStep: progressBarState.activeStep === progressBarState.steps.length - 1,
-    isCheckoutComplete: isCheckoutComplete(progressBarState),
-    setActiveStep: useSetActiveStep(),
-    markStepAsCompleted: useMarkStepAsCompleted(),
-    goNext: useGoNext(),
-    setIsDisabled: useSetIsDisabled(),
-  };
-}

package/src/components/checkout/hooks/useSubscriptionModel.ts

@@ -1,22 +0,0 @@
-import { useCheckoutContext } from '../CheckoutProvider';
-import { AddonsStepState } from './useAddonsStepModel';
-import { PromotionCodeState } from './useCouponModel';
-import { PaymentStepState } from './usePaymentStepModel';
-import { PlanStepState } from './usePlanStepModel';
-
-export type SubscriptionState = PlanStepState &
-  PromotionCodeState &
-  Pick<AddonsStepState, 'addons'> &
-  Pick<PaymentStepState, 'billingAddress' | 'taxPercentage'>;
-
-export function useSubscriptionModel(): SubscriptionState {
-  const [{ planStep, addonsStep, promotionCode, paymentStep }] = useCheckoutContext();
-
-  return {
-    ...planStep,
-    addons: addonsStep.addons,
-    promotionCode,
-    billingAddress: paymentStep.billingAddress,
-    taxPercentage: paymentStep.taxPercentage,
-  };
-}

package/src/components/checkout/hooks/useSubscriptionState.ts

@@ -1,26 +0,0 @@
-import { ApplySubscription, PreviewSubscription } from '@stigg/js-client-sdk';
-import { useCheckoutContext } from '../CheckoutProvider';
-import { useCheckoutModel } from './useCheckoutModel';
-import { useSubscriptionModel } from './useSubscriptionModel';
-
-export function useSubscriptionState(): ApplySubscription | PreviewSubscription | undefined {
-  const subscription = useSubscriptionModel();
-  const [{ resourceId }] = useCheckoutContext();
-  const { checkoutState } = useCheckoutModel();
-  const { plan } = checkoutState || {};
-  const addons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
-
-  if (!plan?.id) {
-    return undefined;
-  }
-
-  return {
-    resourceId,
-    planId: plan.id,
-    billingPeriod: subscription.billingPeriod,
-    billableFeatures: subscription.billableFeatures,
-    addons,
-    promotionCode: subscription.promotionCode,
-    billingCountryCode: subscription.billingCountryCode,
-  };
-}

package/src/components/checkout/index.ts

@@ -1,8 +0,0 @@
-export { Checkout } from './Checkout';
-export * from './types';
-export type { CheckoutTheme } from './configurations/theme';
-export type { CheckoutContainerProps } from './CheckoutContainer';
-export type { CheckoutProviderProps } from './CheckoutProvider';
-export type { CheckoutLocalization } from './configurations/textOverrides';
-export type { CheckoutProps } from './Checkout';
-export type { CheckoutSteps } from './configurations/steps';

package/src/components/checkout/planHeader/PlanHeader.tsx

@@ -1,41 +0,0 @@
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-
-import { Typography } from '../../common/Typography';
-import { useCheckoutModel } from '../hooks/useCheckoutModel';
-import { CheckoutContainerProps } from '../CheckoutContainer';
-import { ChangePlanButton } from '../components/ChangePlanButton';
-
-type PlanHeaderProps = {
-  allowChangePlan?: boolean;
-} & Pick<CheckoutContainerProps, 'onChangePlan'>;
-
-export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeaderProps) {
-  const { checkoutState, checkoutLocalization } = useCheckoutModel();
-  const { plan } = checkoutState || {};
-
-  return (
-    <>
-      <Box sx={{ marginBottom: '16px' }}>
-        <Typography variant="body1" color="disabled" style={{ opacity: 0.6, marginBottom: '8px' }}>
-          Selected plan
-        </Typography>
-
-        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Typography variant="h1">{plan?.displayName}</Typography>
-
-          {allowChangePlan && onChangePlan && (
-            <ChangePlanButton
-              onClick={() => {
-                onChangePlan({ currentPlan: plan });
-              }}
-              checkoutLocalization={checkoutLocalization}
-              size="medium"
-            />
-          )}
-        </Box>
-      </Box>
-      <Divider className="stigg-checkout-plan-header-divider" />
-    </>
-  );
-}

package/src/components/checkout/planHeader/index.ts

@@ -1 +0,0 @@
-export * from './PlanHeader';

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -1,35 +0,0 @@
-import styled from '@utils/style';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
-import Button, { buttonClasses } from '@mui/material/Button';
-import { Icon } from '../../common/Icon';
-
-export const StyledProgress = styled(LinearProgress, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
-  $disabled?: boolean;
-}>(({ theme, $disabled }) => ({
-  [`&.${linearProgressClasses.root}`]: {
-    borderRadius: theme.stigg.border.radius,
-    backgroundColor: theme.stigg.palette.outlinedBorder,
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
-  },
-}));
-
-export const StyledStepButton = styled(Button)(() => ({
-  [`&.${buttonClasses.root}`]: {
-    textTransform: 'none',
-    lineHeight: 'inherit',
-    justifyContent: 'flex-start',
-    padding: '8px 4px',
-  },
-}));
-
-export const StyledIcon = styled(Icon, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
-  $disabled?: boolean;
-  $shouldFill?: boolean;
-}>(({ theme, $disabled, $shouldFill }) => ({
-  circle: {
-    stroke: $disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary,
-    fill: $shouldFill ? ($disabled ? theme.stigg.palette.primaryLight : theme.stigg.palette.primary) : undefined,
-  },
-}));