diff --git a/packages/theming/.size-snapshot.json b/packages/theming/.size-snapshot.json
index 70d92168c32..f5ac3f80aea 100644
--- a/packages/theming/.size-snapshot.json
+++ b/packages/theming/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "index.cjs.js": {
-    "bundled": 22843,
-    "minified": 14373,
-    "gzipped": 5280
+    "bundled": 22854,
+    "minified": 14411,
+    "gzipped": 5292
   },
   "index.esm.js": {
-    "bundled": 21984,
-    "minified": 13592,
-    "gzipped": 5159,
+    "bundled": 21995,
+    "minified": 13630,
+    "gzipped": 5171,
     "treeshaked": {
       "rollup": {
         "code": 3408,
diff --git a/packages/theming/src/utils/arrowStyles.spec.tsx b/packages/theming/src/utils/arrowStyles.spec.tsx
index e87ef6d9cdc..5d6b067bcd4 100644
--- a/packages/theming/src/utils/arrowStyles.spec.tsx
+++ b/packages/theming/src/utils/arrowStyles.spec.tsx
@@ -9,8 +9,7 @@ import React from 'react';
 import { render } from 'garden-test-utils';
 import styled, { ThemeProps, DefaultTheme } from 'styled-components';
 import { math } from 'polished';
-import exponentialSymbols from 'polished/lib/math/presets/exponentialSymbols';
-import arrowStyles, { ARROW_POSITION } from './arrowStyles';
+import arrowStyles, { ARROW_POSITION, exponentialSymbols } from './arrowStyles';
 
 interface IStyledDivProps extends ThemeProps<DefaultTheme> {
   arrowPosition: ARROW_POSITION;
diff --git a/packages/theming/src/utils/arrowStyles.ts b/packages/theming/src/utils/arrowStyles.ts
index be42848d30c..039c06c0c3c 100644
--- a/packages/theming/src/utils/arrowStyles.ts
+++ b/packages/theming/src/utils/arrowStyles.ts
@@ -28,6 +28,24 @@ export type ARROW_OPTIONS = {
   animationModifier?: string;
 };
 
+// Workaround for https://github.com/styled-components/polished/issues/550
+export const exponentialSymbols = {
+  symbols: {
+    sqrt: {
+      func: {
+        symbol: 'sqrt',
+        f: (a: number) => Math.sqrt(a),
+        notation: 'func',
+        precedence: 0,
+        rightToLeft: 0,
+        argCount: 1
+      },
+      symbol: 'sqrt',
+      regSymbol: 'sqrt\\b'
+    }
+  }
+};
+
 const animationStyles = (position: ARROW_POSITION, modifier: string) => {
   const property = position.split('-')[0];
   /**
@@ -147,22 +165,7 @@ const positionStyles = (position: ARROW_POSITION, size: string, inset: string) =
 export default function arrowStyles(position: ARROW_POSITION, options: ARROW_OPTIONS = {}) {
   const size = options.size || '6px';
   const inset = options.inset || '0';
-  const squareSize = math(`${size} * 2 / sqrt(2)`, {
-    symbols: {
-      sqrt: {
-        func: {
-          symbol: 'sqrt',
-          f: (a: number) => Math.sqrt(a),
-          notation: 'func',
-          precedence: 0,
-          rightToLeft: 0,
-          argCount: 1
-        },
-        symbol: 'sqrt',
-        regSymbol: 'sqrt\\b'
-      }
-    }
-  });
+  const squareSize = math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
 
   /**
    * 1. Set base positioning for an element with an arrow.