diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 6c5c914f8b..c44d81dc15 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -19,7 +19,7 @@
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';
-import { getResponsiveValue } from '../../utils/getResponsiveValue';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
 import type { ButtonProps } from './types';
 
@@ -39,8 +39,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     } = props;
 
     // Get the responsive value for the variant
-    const responsiveSize = getResponsiveValue(size);
-    const responsiveVariant = getResponsiveValue(variant);
+    const responsiveSize = useResponsiveValue(size);
+    const responsiveVariant = useResponsiveValue(variant);
 
     return (
       <button
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 2c74c4bd6a..fd1158f3e3 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -18,7 +18,7 @@
 
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { getResponsiveValue } from '../../utils/getResponsiveValue';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
 import type { HeadingProps } from './types';
 
@@ -34,7 +34,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     } = props;
 
     // Get the responsive value for the variant
-    const responsiveVariant = getResponsiveValue(variant);
+    const responsiveVariant = useResponsiveValue(variant);
 
     // Determine the component to render based on the variant
     let Component = as;
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 9321fbe83c..0606b2cd4c 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -17,7 +17,7 @@
 'use client';
 
 import React, { forwardRef } from 'react';
-import { getResponsiveValue } from '../../utils/getResponsiveValue';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
 
 import type { TextProps } from './types';
@@ -35,8 +35,8 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     } = props;
 
     // Get the responsive values for the variant and weight
-    const responsiveVariant = getResponsiveValue(variant);
-    const responsiveWeight = getResponsiveValue(weight);
+    const responsiveVariant = useResponsiveValue(variant);
+    const responsiveWeight = useResponsiveValue(weight);
 
     return (
       <p
diff --git a/packages/canon/src/utils/getBreakpoint.ts b/packages/canon/src/hooks/useBreakpoint.ts
similarity index 92%
rename from packages/canon/src/utils/getBreakpoint.ts
rename to packages/canon/src/hooks/useBreakpoint.ts
index 3fc279a2c4..35dd9d9270 100644
--- a/packages/canon/src/utils/getBreakpoint.ts
+++ b/packages/canon/src/hooks/useBreakpoint.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useMediaQuery } from '../hooks/useMediaQuery';
+import { useMediaQuery } from './useMediaQuery';
 import type { Breakpoint } from '../types';
 
 export const breakpoints: { name: string; id: Breakpoint; value: number }[] = [
@@ -25,7 +25,7 @@ export const breakpoints: { name: string; id: Breakpoint; value: number }[] = [
   { name: 'Extra Large', id: 'xl', value: 1536 },
 ];
 
-export const getBreakpoint = (): Breakpoint => {
+export const useBreakpoint = (): Breakpoint => {
   const matches = breakpoints.map(breakpoint => {
     const match = useMediaQuery(`(min-width: ${breakpoint.value}px)`);
     return match;
diff --git a/packages/canon/src/utils/getResponsiveValue.ts b/packages/canon/src/hooks/useResponsiveValue.ts
similarity index 83%
rename from packages/canon/src/utils/getResponsiveValue.ts
rename to packages/canon/src/hooks/useResponsiveValue.ts
index f9c542a372..3ef5b99d47 100644
--- a/packages/canon/src/utils/getResponsiveValue.ts
+++ b/packages/canon/src/hooks/useResponsiveValue.ts
@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { Breakpoint } from '../types';
-import { getBreakpoint, breakpoints } from './getBreakpoint';
 
-export const getResponsiveValue = (
-  value: string | Partial<Record<Breakpoint, string>>,
-) => {
-  const currentBreakpoint = getBreakpoint();
+import type { Breakpoint } from '../types';
+import { useBreakpoint, breakpoints } from './useBreakpoint';
+
+type ResponsiveValue = string | Partial<Record<Breakpoint, string>>;
+
+export const useResponsiveValue = (value: ResponsiveValue) => {
+  const currentBreakpoint = useBreakpoint();
 
   if (typeof value === 'object') {
     const index = breakpoints.findIndex(