@ltht-react/input 2.0.192 → 2.0.194

package/README.md

@@ -1,15 +1,15 @@
-# Input
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Input from '@ltht-react/input'
-```
-
-### Usage
-
-```jsx
-<Input />
-```
+# Input
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Input from '@ltht-react/input'
+```
+
+### Usage
+
+```jsx
+<Input />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/input",
-  "version": "2.0.192",
+  "version": "2.0.194",
   "description": "ltht-react styled Input component.",
   "author": "LTHT",
   "homepage": "",
@@ -28,11 +28,11 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/button": "^2.0.192",
-    "@ltht-react/icon": "^2.0.192",
-    "@ltht-react/styles": "^2.0.192",
-    "@ltht-react/types": "^2.0.192",
-    "@ltht-react/utils": "^2.0.192",
+    "@ltht-react/button": "^2.0.194",
+    "@ltht-react/icon": "^2.0.194",
+    "@ltht-react/styles": "^2.0.194",
+    "@ltht-react/types": "^2.0.194",
+    "@ltht-react/utils": "^2.0.194",
     "@popperjs/core": "^2.11.5",
     "date-fns": "^3.6.0",
     "focus-trap-react": "^9.0.2",
@@ -41,5 +41,5 @@
     "react-day-picker": "^8.9.1",
     "react-popper": "^2.3.0"
   },
-  "gitHead": "d97c241ba79c5e28edb4dec124e156cda6e9af66"
+  "gitHead": "2eb4b88fa2bc19baa1be9433dbe29fe1a947dc62"
 }

package/src/atoms/checkbox.tsx

@@ -1,92 +1,92 @@
-import { FC, HTMLAttributes, InputHTMLAttributes } from 'react'
-import styled from '@emotion/styled'
-import { BADGE_COLOURS, INPUT_COLOURS } from '@ltht-react/styles'
-import { css } from '@emotion/react'
-
-const StyledCheckbox = styled.div<ConditionalStyles>`
-  display: flex;
-  align-items: center;
-  ${(props) =>
-    props.checked &&
-    css`
-      background-color: ${INPUT_COLOURS.RADIO_SELECTED};
-    `}
-`
-
-const StyledInput = styled.input`
-  appearance: none;
-  height: 1.2em;
-  margin: 0;
-  margin-right: 0.5em;
-  position: relative;
-  width: 1em;
-
-  &:before {
-    border: solid 1px grey;
-    border-radius: 3px;
-    content: '';
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-  }
-
-  &:checked:before {
-    background-color: ${BADGE_COLOURS.PRIMARY};
-    content: '';
-    color: white;
-  }
-
-  &:checked:after {
-    color: white;
-    content: '\\2714';
-    font-size: 0.8em;
-    height: 1em;
-    left: 0.25em;
-    position: absolute;
-    top: 0;
-    width: 1em;
-  }
-`
-
-const StyledLabel = styled.label`
-  display: inline-block;
-  margin-bottom: 0;
-`
-
-const Checkbox: FC<Props> = ({
-  id,
-  checked = false,
-  onChange,
-  children,
-  name,
-  parentDivAttributes = {},
-  labelAttributes = {},
-  ...rest
-}) => (
-  <StyledCheckbox checked={checked} {...parentDivAttributes}>
-    <StyledInput
-      id={id}
-      onChange={onChange}
-      type="checkbox"
-      checked={checked}
-      aria-checked={checked}
-      role="checkbox"
-      name={name}
-      {...rest}
-    />
-    <StyledLabel htmlFor={id} {...labelAttributes}>
-      {children}
-    </StyledLabel>
-  </StyledCheckbox>
-)
-
-interface ConditionalStyles extends InputHTMLAttributes<HTMLInputElement> {
-  checked: boolean
-}
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
-  children: React.ReactNode
-  parentDivAttributes?: HTMLAttributes<HTMLDivElement>
-  labelAttributes?: HTMLAttributes<HTMLLabelElement>
-}
-
-export default Checkbox
+import { FC, HTMLAttributes, InputHTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+import { BADGE_COLOURS, INPUT_COLOURS } from '@ltht-react/styles'
+import { css } from '@emotion/react'
+
+const StyledCheckbox = styled.div<ConditionalStyles>`
+  display: flex;
+  align-items: center;
+  ${(props) =>
+    props.checked &&
+    css`
+      background-color: ${INPUT_COLOURS.RADIO_SELECTED};
+    `}
+`
+
+const StyledInput = styled.input`
+  appearance: none;
+  height: 1.2em;
+  margin: 0;
+  margin-right: 0.5em;
+  position: relative;
+  width: 1em;
+
+  &:before {
+    border: solid 1px grey;
+    border-radius: 3px;
+    content: '';
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+  }
+
+  &:checked:before {
+    background-color: ${BADGE_COLOURS.PRIMARY};
+    content: '';
+    color: white;
+  }
+
+  &:checked:after {
+    color: white;
+    content: '\\2714';
+    font-size: 0.8em;
+    height: 1em;
+    left: 0.25em;
+    position: absolute;
+    top: 0;
+    width: 1em;
+  }
+`
+
+const StyledLabel = styled.label`
+  display: inline-block;
+  margin-bottom: 0;
+`
+
+const Checkbox: FC<Props> = ({
+  id,
+  checked = false,
+  onChange,
+  children,
+  name,
+  parentDivAttributes = {},
+  labelAttributes = {},
+  ...rest
+}) => (
+  <StyledCheckbox checked={checked} {...parentDivAttributes}>
+    <StyledInput
+      id={id}
+      onChange={onChange}
+      type="checkbox"
+      checked={checked}
+      aria-checked={checked}
+      role="checkbox"
+      name={name}
+      {...rest}
+    />
+    <StyledLabel htmlFor={id} {...labelAttributes}>
+      {children}
+    </StyledLabel>
+  </StyledCheckbox>
+)
+
+interface ConditionalStyles extends InputHTMLAttributes<HTMLInputElement> {
+  checked: boolean
+}
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  children: React.ReactNode
+  parentDivAttributes?: HTMLAttributes<HTMLDivElement>
+  labelAttributes?: HTMLAttributes<HTMLLabelElement>
+}
+
+export default Checkbox