@symbo.ls/input 2.11.247 → 2.11.261

package/Checkbox.js

@@ -23,7 +23,9 @@ export const Checkbox = {
         opacity: '1'
       }
     },
-    attr: { checked: ({ parent }) => parent.props.checked }
+    attr: {
+      checked: ({ parent }) => parent.props.checked
+    }
   },
 
   Flex: {

package/Textarea.js

@@ -11,12 +11,14 @@ export const Textarea = {
     variant: 'outlined',
     fontfamily: 'Avenir',
     round: 'Z1',
-    maxWidth: 'H',
-    minHeight: 'E',
     placeholder: 'Leave us a message...',
     padding: 'A',
     theme: 'transparent',
     border: 'none',
+    maxWidth: 'G1_default',
+    minHeight: 'E_default',
+    width: '100%',
+    height: 'E1_default',
     style: { resize: 'none' }
   },
 
@@ -24,8 +26,6 @@ export const Textarea = {
     props: {
       theme: 'field',
       round: 'Z2',
-      width: 'G1_default',
-      height: 'E1',
       lineHeight: 1.4
     }
   },
@@ -33,8 +33,6 @@ export const Textarea = {
   '.outlined': {
     props: {
       background: 'transparent',
-      width: 'G1_default',
-      height: 'D2+W',
       lineHeight: 1.4,
       placeholder: 'Leave us a message...',
       outline: 'none !important',
@@ -52,8 +50,7 @@ export const TextareaWithButton = {
     padding: 'A',
     fontSize: 'Z1',
     round: 'Z2',
-    minHeight: 'dit-content'
-
+    minHeight: 'fit-content'
   },
   IconCommonButton: {
     props: {

package/Toggle.js

@@ -2,44 +2,15 @@
 
 import { Checkbox, CheckboxTitleParagraph } from './Checkbox'
 
-/**
- * A Toggle component
- * The `Toggle` component represents a customizable checkbox input with a switch-like appearance.
- * It extends the Checkbox component and allows for various style and property configurations.
- *
- * @typedef {Object} Toggle
- * @property {Object} Input - Style configurations for the input element.
- * @property {Object} Flex - Style and property configurations for the surrounding container.
- * @property {Object} Flex.props - Additional properties for the Flex container.
- * @property {string} Flex.props.boxSize - The size of the container (e.g., 'A+X B+Z').
- * @property {string} Flex.props.padding - The padding of the container (e.g., '- W').
- * @property {string} Flex.props.round - The roundness of the container (e.g., 'D').
- * @property {string} Flex.props.align - The alignment of the container (e.g., 'center flex-start').
- * @property {string} Flex.props.background - The background color of the container (e.g., 'gray .8 +68').
- * @property {string} Flex.props.border - The border style of the container (e.g., 'none').
- * @property {string} Flex.props.transition - The transition effect of the container (e.g., 'opacity .15s ease').
- * @property {Object} Flex.props.:after - Additional styles for the pseudo-element ":after".
- * @property {string} Flex.props.:after.content - Content to be displayed in the pseudo-element.
- * @property {string} Flex.props.:after.boxSize - The size of the pseudo-element (e.g., 'A A').
- * @property {string} Flex.props.:after.round - The roundness of the pseudo-element (e.g., '100%').
- * @property {string} Flex.props.:after.background - The background color of the pseudo-element (e.g., 'white').
- * @property {string} Flex.props.:after.boxShadow - The box shadow of the pseudo-element (e.g., '1px, 1px, Z, gray .2').
- * @property {null|object} Flex.Icon - An optional icon for the Toggle component.
- *
- * @example
- * // Example usage of the Toggle component:
- * const myToggle = {
- *   extend: Toggle,
- * };
- */
-
 export const Toggle = {
   extend: Checkbox,
 
   Input: {
-    ':checked + div': {
-      background: 'green2 +8',
-      justifyContent: 'flex-end'
+    props: {
+      ':checked + div': {
+        background: 'green2 +8',
+        justifyContent: 'flex-end'
+      }
     }
   },
 
@@ -49,7 +20,7 @@ export const Toggle = {
       padding: '- W',
       round: 'D',
       align: 'center flex-start',
-      background: 'gray',
+      theme: 'field',
       border: 'none',
       transition: 'opacity .15s ease',
       ':after': {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@symbo.ls/input",
-  "version": "2.11.247",
+  "version": "2.11.261",
   "main": "index.js",
   "source": "index.js",
   "license": "MIT",
-  "gitHead": "8d02fd2978b0ae207eab84fcb3f5e2be11351e61",
+  "gitHead": "53e63702105d8c7baf0f136c5756383533bf3b30",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/atoms": "latest"