@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/input-blocks/phonenumberinput.md

@@ -168,27 +168,27 @@ Phone number input with international country code selector.
   type: PhoneNumberInput
   properties:
     title: Prefix Phone Icon
-    prefixIcon: phone
+    prefixIcon: AiOutlinePhone
     placeholder: Enter phone number
 - id: icon_suffix_check
   type: PhoneNumberInput
   properties:
     title: Suffix Check Icon
-    suffixIcon: check-circle
+    suffixIcon: AiOutlineCheckCircle
     placeholder: Verified number
 - id: icon_both
   type: PhoneNumberInput
   properties:
     title: Both Icons
-    prefixIcon: phone
-    suffixIcon: info
+    prefixIcon: AiOutlinePhone
+    suffixIcon: AiOutlineInfoCircle
     placeholder: Enter number
 - id: icon_custom_color
   type: PhoneNumberInput
   properties:
     title: Custom Icon Color
     prefixIcon:
-      name: phone
+      name: AiOutlinePhone
       color: "#1677ff"
     placeholder: Blue phone icon
 ```
@@ -387,7 +387,7 @@ Phone number input with international country code selector.
     placeholder: (555) 123-4567
     allowClear: true
     size: large
-    prefixIcon: phone
+    prefixIcon: AiOutlinePhone
     replaceInput:
       pattern: "[^0-9()\\-\\s]"
       flags: g
@@ -403,7 +403,7 @@ Phone number input with international country code selector.
     placeholder: Enter international number
     allowClear: true
     maxLength: 15
-    suffixIcon: globe
+    suffixIcon: AiOutlineGlobal
     label:
       inline: true
       span: 8
@@ -427,7 +427,7 @@ Phone number input with international country code selector.
     allowClear: true
     maxLength: 10
     placeholder: Enter mobile number
-    prefixIcon: Smartphone
+    prefixIcon: AiOutlineMobile
     replaceInput:
       pattern: "[^0-9]"
       flags: g
@@ -449,7 +449,7 @@ Phone number input with international country code selector.
     allowClear: true
     size: large
     prefixIcon:
-      name: phone
+      name: AiOutlinePhone
       color: "#52c41a"
     theme:
       colorPrimary: "#52c41a"
@@ -472,7 +472,7 @@ Phone number input with international country code selector.
       required: true
       properties:
         title: Full Name
-        prefixIcon: user
+        prefixIcon: AiOutlineUser
         placeholder: John Doe
         label:
           colon: false
@@ -482,7 +482,7 @@ Phone number input with international country code selector.
       properties:
         title: Email Address
         type: email
-        prefixIcon: mail
+        prefixIcon: AiOutlineMail
         placeholder: john@example.com
         label:
           colon: false
@@ -493,7 +493,7 @@ Phone number input with international country code selector.
         title: Phone Number
         defaultRegion: US
         allowClear: true
-        prefixIcon: phone
+        prefixIcon: AiOutlinePhone
         placeholder: (555) 123-4567
         label:
           colon: false
@@ -519,7 +519,7 @@ Phone number input with international country code selector.
             title: Send Message
             color: primary
             variant: solid
-            icon: send
+            icon: AiOutlineSend
           events:
             onClick:
               - id: contact_validate
@@ -548,7 +548,7 @@ Phone number input with international country code selector.
         title: Mobile Number
         defaultRegion: US
         allowClear: true
-        prefixIcon: Smartphone
+        prefixIcon: AiOutlineMobile
         placeholder: Enter mobile number
         label:
           colon: false
@@ -565,7 +565,7 @@ Phone number input with international country code selector.
       required: true
       properties:
         title: Password
-        prefixIcon: lock
+        prefixIcon: AiOutlineLock
         placeholder: At least 8 characters
         label:
           colon: false
@@ -590,7 +590,7 @@ Phone number input with international country code selector.
             title: Create Account
             color: primary
             variant: solid
-            icon: arrow-right
+            icon: AiOutlineArrowRight
           events:
             onClick:
               - id: register_validate
@@ -608,7 +608,6 @@ Phone number input with international country code selector.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `showFlags` | boolean | `true` | Show country flags in the country selector and input. |
 | `allowClear` | boolean | `false` | Allow the user to clear their input. |
 | `allowedRegions` | array | - | List of allowed ISO 3166-1 alpha-2 region codes. If allowedRegions is [] or null, the default list of all regions is used. |
 | `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
@@ -617,65 +616,35 @@ Phone number input with international country code selector.
 | `disabled` | boolean | `false` | Disable the block if true. |
 | `maxLength` | integer | - | The max number of input characters. |
 | `placeholder` | string | - | Placeholder text inside the block before user types input. |
-| `prefix` | string | - | Prefix text for the block, priority over prefixIcon. |
-| `prefixIcon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon to prefix the text input. |
-| `prefixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `prefixIcon.color` | string | - | Icon color. |
-| `prefixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `prefixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `prefixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `prefixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `prefixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `prefixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `prefixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `prefix` | string | - | Prefix text for the block, priority over $prefix_con. |
+| `prefixIcon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon to prefix the text input. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `replaceInput` | object | - | Regex used to sanitize input. |
 | `replaceInput.pattern` | string | - | The regular expression pattern to use to sanitize input. |
 | `replaceInput.flags` | string | - | The regex flags to use. The default value is 'gm'. |
 | `replaceInput.replacement` | string | - | The string used to replace the input that matches the pattern. The default value is ''. |
-| `showArrow` | boolean | `true` | Show the suffix icon at the drop-down position of the selector. antd shows the arrow by default; `false` hides it by clearing the suffix icon. |
+| `showArrow` | boolean | `true` | Show the suffix icon at the drop-down position of the selector. |
 | `size` | string | `"middle"` | Size of the block. Enum: `small`, `middle`, `large`. |
-| `suffix` | string | - | Suffix text for the block, shown before suffixIcon. |
-| `suffixIcon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon to suffix the text input. |
-| `suffixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `suffixIcon.color` | string | - | Icon color. |
-| `suffixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `suffixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `suffixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `suffixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `suffixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `suffixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `suffixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `suffix` | string | - | Suffix text for the block, priority over suffixIcon. |
+| `suffixIcon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon to suffix the text input. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
-| `variant` | string | - | Input visual variant. The deprecated bordered: false takes precedence and renders the input as 'borderless'. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
-| `theme` | object | - | Antd design token overrides for this block, applied to both the region selector (antd Select) and the phone number input (antd Input). See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design input tokens](https://ant.design/components/input#design-token). |
+| `variant` | string | - | Input visual variant. When set, takes precedence over bordered. Enum: `outlined`, `filled`, `borderless`. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design input tokens](https://ant.design/components/input#design-token). |
 | `theme.activeBorderColor` | string | - | Border color when the input is focused. |
 | `theme.activeShadow` | string | - | Box shadow when the input is focused. |
+| `theme.addonBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of addon elements. |
 | `theme.colorBgContainer` | string | - | Background color of the input. |
 | `theme.colorBorder` | string | - | Border color of the input. |
 | `theme.colorError` | string | - | Color used for error status. |
@@ -692,7 +661,6 @@ Phone number input with international country code selector.
 | `theme.hoverBorderColor` | string | - | Border color when the input is hovered. |
 | `theme.paddingBlock` | number | `4` | Vertical padding. |
 | `theme.paddingInline` | number | `11` | Horizontal padding. |
-| `theme.selectorBg` | string | `"#ffffff"` | Background color of the region selector. |
 | `theme.warningActiveShadow` | string | `"0 0 0 2px rgba(255, 215, 5, 0.1)"` | Box shadow when the input has warning status and is focused. |
 
 | Event | Event Data | Description |
@@ -701,7 +669,6 @@ Phone number input with international country code selector.
 | `onCodeChange` | \- | Trigger action when the selector is changed. |
 | `onChange` | `{ value }` | Trigger action when the number is changed. |
 | `onBlur` | \- | Trigger action event occurs when input loses focus. |
-| `onClear` | \- | Trigger action when the clear button is clicked. |
 | `onFocus` | \- | Trigger action when input gets focus. |
 | `onPressEnter` | \- | Trigger action when enter is pressed while text input is focused. |
 | `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |

package/content/input-blocks/radioselector.md

@@ -492,7 +492,7 @@ Radio group for selecting a single option.
   type: RadioSelector
   style:
     .element:
-      border: "1px solid #d9d9d9"
+      border: 1px solid
       borderRadius: 8
       padding: 16
   properties:
@@ -752,104 +752,29 @@ Radio group for selecting a single option.
     valueKey: id
 ```
 
-```yaml
-- id: radio_columns_two
-  type: RadioSelector
-  properties:
-    title: Two columns
-    columns: 2
-    options:
-      - Weekday mornings
-      - Weekday afternoons
-      - Weekday evenings
-      - Weekend mornings
-      - Weekend afternoons
-      - Weekend evenings
-- id: radio_columns_responsive
-  type: RadioSelector
-  properties:
-    title: One column below md, three from md up
-    columns:
-      xs: 1
-      md: 3
-    options:
-      - Email
-      - SMS
-      - Push notification
-      - Webhook
-      - In-app message
-      - Weekly digest
-- id: radio_columns_gutter
-  type: RadioSelector
-  properties:
-    title: Wider gutter
-    columns: 2
-    gutter:
-      - 24
-      - 12
-    options:
-      - Read only
-      - Read and write
-      - Administer
-      - No access
-- id: radio_columns_per_option_color
-  type: RadioSelector
-  properties:
-    title: Coloured options in a grid
-    columns: 2
-    options:
-      - label: Low
-        value: low
-        color: "#16a34a"
-      - label: Medium
-        value: medium
-        color: "#d97706"
-      - label: High
-        value: high
-        color: "#dc2626"
-      - label: Critical
-        value: critical
-        color: "#7e22ce"
-```
-
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `align` | string | `"start"` | Align options. Ignored when 'columns' is set. Enum: `start`, `end`, `center`, `baseline`. |
+| `align` | string | `"start"` | Align options. Enum: `start`, `end`, `center`, `baseline`. |
 | `color` | string | - | Selected radio color. |
-| `columns` | integer \| object | - | Number of columns to lay the options out in, or a responsive breakpoint object. Use a count that divides 24 evenly. |
 | `disabled` | boolean | `false` | Disable the block if true. |
-| `direction` | string | `"horizontal"` | List options horizontally or vertical. Ignored when 'columns' is set. Enum: `horizontal`, `vertical`. |
-| `gutter` | number \| array | - | Gap between options in the grid. Number or [horizontal, vertical] array. Applies when 'columns' is set. |
-| `wrap` | boolean | `true` | Specifies wrapping of options. Applies when 'direction' is 'horizontal'. Ignored when 'columns' is set. |
+| `direction` | string | `"horizontal"` | List options horizontally or vertical. Enum: `horizontal`, `vertical`. |
+| `wrap` | boolean | `true` | Specifies wrapping of options. Applies when 'direction' is 'horizontal'. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `options` | array | `[]` | Options can either be an array of primitive values, on an array of label, value pairs - supports html. |
 | `options.$.label` | string | - | Value label shown to user - supports html. |
-| `options.$.value` | - | - | Option value. Can be of any type. |
+| `options.$.value` | string \| number \| boolean | - | Option value. |
 | `options.$.disabled` | boolean | `false` | Disable the option if true. |
 | `options.$.style` | object | - | Css style to apply to the option. |
 | `options.$.color` | string | - | Color applied to this option when it is selected. Falls back to the block-level color when not set. |
@@ -891,6 +816,5 @@ Radio group for selecting a single option.
 | `/label` | The RadioSelector label. |
 | `/extra` | The RadioSelector extra content. |
 | `/feedback` | The RadioSelector validation feedback. |
-| `/options` | Each RadioSelector option. |
 
 No slots defined.

package/content/input-blocks/ratingslider.md

@@ -164,24 +164,24 @@ Rating slider with customizable range, icons, and N/A option.
   type: RatingSlider
   properties:
     title: Custom Icons (Dislike / Like)
-    minIcon: ThumbsDown
-    maxIcon: ThumbsUp
+    minIcon: AiOutlineDislike
+    maxIcon: AiOutlineLike
     min: 0
     max: 10
 - id: icons_star
   type: RatingSlider
   properties:
     title: Star Icons
-    minIcon: star
-    maxIcon: star
+    minIcon: AiOutlineStar
+    maxIcon: AiFillStar
     min: 1
     max: 5
 - id: icons_heart
   type: RatingSlider
   properties:
     title: Heart Icons
-    minIcon: heart
-    maxIcon: heart
+    minIcon: AiOutlineHeart
+    maxIcon: AiFillHeart
     min: 0
     max: 10
 - id: icons_object_config
@@ -189,10 +189,10 @@ Rating slider with customizable range, icons, and N/A option.
   properties:
     title: Icon Object Config (colored)
     minIcon:
-      name: arrow-down
+      name: AiOutlineArrowDown
       color: "#ff4d4f"
     maxIcon:
-      name: arrow-up
+      name: AiOutlineArrowUp
       color: "#52c41a"
     min: 0
     max: 10
@@ -352,8 +352,8 @@ Rating slider with customizable range, icons, and N/A option.
     max: 5
     step: 1
     color: "#52c41a"
-    minIcon: FaceSlightlyFrowning
-    maxIcon: FaceSlightlySmiling
+    minIcon: AiOutlineFrown
+    maxIcon: AiOutlineSmile
     tooltipVisible: always
     showMarks: true
     showDots: true
@@ -367,8 +367,8 @@ Rating slider with customizable range, icons, and N/A option.
     max: 10
     step: 1
     color: "#1677ff"
-    minIcon: ThumbsDown
-    maxIcon: ThumbsUp
+    minIcon: AiOutlineDislike
+    maxIcon: AiOutlineLike
     tooltipVisible: onClick
     showMarks: true
     showDots: true
@@ -399,10 +399,10 @@ Rating slider with customizable range, icons, and N/A option.
     step: 1
     color: "#ff4d4f"
     minIcon:
-      name: FaceSlightlySmiling
+      name: AiOutlineSmile
       color: "#52c41a"
     maxIcon:
-      name: warning
+      name: AiOutlineWarning
       color: "#ff4d4f"
     disableNotApplicable: true
     showMarks: true
@@ -520,8 +520,8 @@ Rating slider with customizable range, icons, and N/A option.
         max: 5
         step: 1
         color: "#fa8c16"
-        minIcon: star
-        maxIcon: star
+        minIcon: AiOutlineStar
+        maxIcon: AiFillStar
         showMarks: true
         showDots: true
         disableNotApplicable: true
@@ -545,7 +545,7 @@ Rating slider with customizable range, icons, and N/A option.
       type: Button
       properties:
         title: Submit Review
-        icon: send
+        icon: AiOutlineSend
         type: primary
         block: true
       events:
@@ -573,8 +573,8 @@ Rating slider with customizable range, icons, and N/A option.
         min: 1
         max: 10
         color: "#1677ff"
-        minIcon: FaceSlightlyFrowning
-        maxIcon: FaceSlightlySmiling
+        minIcon: AiOutlineFrown
+        maxIcon: AiOutlineSmile
         showMarks: true
         label:
           extra: How would you rate the service you received?
@@ -585,8 +585,8 @@ Rating slider with customizable range, icons, and N/A option.
         min: 1
         max: 10
         color: "#52c41a"
-        minIcon: ThumbsDown
-        maxIcon: ThumbsUp
+        minIcon: AiOutlineDislike
+        maxIcon: AiOutlineLike
         showMarks: true
         label:
           extra: How would you rate the quality of our products?
@@ -604,7 +604,7 @@ Rating slider with customizable range, icons, and N/A option.
       type: Button
       properties:
         title: Submit Survey
-        icon: check
+        icon: AiOutlineCheck
         type: primary
         block: true
       events:
@@ -623,52 +623,21 @@ Rating slider with customizable range, icons, and N/A option.
 | `disabled` | boolean | `false` | Disable the block if true. |
 | `disableIcons` | boolean | `false` | Hides minimum and maximum icons. |
 | `disableNotApplicable` | boolean | `false` | Disables the N/A option left of slider. |
-| `minIcon` | string \| object | `"rating-low"` | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize the icon to the left of the minimum side of the slider. |
-| `minIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `minIcon.color` | string | - | Icon color. |
-| `minIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `minIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `minIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `minIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `minIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `minIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `minIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
-| `maxIcon` | string \| object | `"rating-high"` | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize the icon to the right of the maximum side of the slider. |
-| `maxIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `maxIcon.color` | string | - | Icon color. |
-| `maxIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `maxIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `maxIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `maxIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `maxIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `maxIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `maxIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `minIcon` | string \| object | `"AiOutlineFrown"` | Name of an React-Icon (See all icons) or properties of an Icon block to customize the icon to the left of the minimum side of the slider. |
+| `maxIcon` | string \| object | `"AiOutlineSmile"` | Name of an React-Icon (See all icons) or properties of an Icon block to customize the icon to the right of the maximum side of the slider. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `min` | number | `0` | The minimum value of the slider. |
 | `max` | number | `10` | The maximum value of the slider. |
 | `notApplicableLabel` | string | `"N/A"` | Label shown at the null value of the slider. |