build: release v1.27.0

packages/camp/CHANGELOG.md

@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.26.0](https://github.com/opengovsg/design-system/compare/v1.24.0...v1.26.0)
+#### [v1.27.0](https://github.com/opengovsg/design-system/compare/v1.26.0...v1.27.0)
+
+- chore: merge v1.27.0 back to main [`#824`](https://github.com/opengovsg/design-system/pull/824)
+- Chore/add field styles for number input [`#823`](https://github.com/opengovsg/design-system/pull/823)
+- build: release v1.26.0 [`#818`](https://github.com/opengovsg/design-system/pull/818)
+
+#### [v1.26.0](https://github.com/opengovsg/design-system/compare/v1.25.0...v1.26.0)
+
+> 12 December 2024
 
 - fix(MultiSelectProvider.tsx): double addition on mobile [`#817`](https://github.com/opengovsg/design-system/pull/817)
 - fix(deps): bump @chakra-ui/utils from 2.0.15 to 2.2.2 [`#800`](https://github.com/opengovsg/design-system/pull/800)
@@ -24,13 +32,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: merge release v1.25.0 back to main [`#773`](https://github.com/opengovsg/design-system/pull/773)
 - feat: update design tokens (postman colors) [`#778`](https://github.com/opengovsg/design-system/pull/778)
 - build: release v1.25.0 [`#772`](https://github.com/opengovsg/design-system/pull/772)
+- build: release v1.26.0 [`c4ca7ab`](https://github.com/opengovsg/design-system/commit/c4ca7abfe303b87fdd9be2bec7505c83f559a2d2)
+
+#### [v1.25.0](https://github.com/opengovsg/design-system/compare/v1.24.0...v1.25.0)
+
+> 10 October 2024
+
 - feat: use @chakra-ui/react imports over specialised imports [`#770`](https://github.com/opengovsg/design-system/pull/770)
 - feat: add script to copy generated themes to storybook theme folder [`#769`](https://github.com/opengovsg/design-system/pull/769)
 - feat: add Armoury theme [`#768`](https://github.com/opengovsg/design-system/pull/768)
 - chore: merge release v1.24.0 back to main [`#756`](https://github.com/opengovsg/design-system/pull/756)
 - fix(deps): bump rollup from 3.29.4 to 3.29.5 in /react [`#764`](https://github.com/opengovsg/design-system/pull/764)
 - chore(deps-dev): bump vite from 4.5.3 to 4.5.5 in /react [`#759`](https://github.com/opengovsg/design-system/pull/759)
 - build: release v1.24.0 [`#755`](https://github.com/opengovsg/design-system/pull/755)
+- build: release v1.25.0 [`6161c9d`](https://github.com/opengovsg/design-system/commit/6161c9d4bf3f850f2b4032fb8dbb4eecf88aad9f)
 
 #### [v1.24.0](https://github.com/opengovsg/design-system/compare/v1.23.0...v1.24.0)
 

packages/camp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",

packages/camp/src/NumberInput/NumberInput.stories.tsx

@@ -100,3 +100,9 @@ export const FormInput: StoryFn<NumberInputProps> = (args) => {
     </FormControl>
   )
 }
+
+export const InputStyles = Template.bind({})
+InputStyles.args = {
+  placeholder: 'Pass in input styles',
+  inputStyles: { bgColor: 'gray.100' },
+}

packages/camp/src/NumberInput/NumberInput.tsx

@@ -3,10 +3,10 @@ import { useRef } from 'react'
 import {
   Box,
   chakra,
-  ComponentWithAs as _,
   Divider,
   forwardRef,
   NumberInputProps as ChakraNumberInputProps,
+  SystemStyleObject,
   useFormControlProps,
   useMergeRefs,
   useMultiStyleConfig,
@@ -29,6 +29,11 @@ export interface NumberInputProps extends ChakraNumberInputProps {
    * Whether to show the increment and decrement steppers. Defaults to true.
    */
   showSteppers?: boolean
+
+  /**
+   * Merge styles for inner input field
+   */
+  inputStyles?: SystemStyleObject
 }
 
 export const NumberInput = forwardRef<NumberInputProps, 'input'>(
@@ -38,6 +43,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
       clampValueOnBlur = false,
       isSuccess,
       isPrefilled,
+      inputStyles,
       ...props
     },
     ref,
@@ -90,6 +96,7 @@ export const NumberInput = forwardRef<NumberInputProps, 'input'>(
           // is this input.
           ref={inputRef}
           __css={styles.field}
+          sx={inputStyles}
         />
         {showSteppers && (
           <Box __css={styles.stepperWrapper} ref={stepperWrapperRef}>