From 8cac87fccf6e3f984c94d5c4822d467e8ff170c0 Mon Sep 17 00:00:00 2001
From: Younes Charfaoui <mxcsyounes@gmail.com>
Date: Fri, 25 Oct 2024 08:02:10 +0100
Subject: [PATCH] Updating All the Tarka components (#256)

* Updating Formatting for the base components, adding TUIToggleRow feature to show unavailable. Adjusting padding and other measurements stuff.

* Updating Formatting for the base components, adding Not available for TUICheckRoxRow and tuiSelectionCard

* Updating Formatting for Email components.

* Updating Formatting for Radio components.

* Updating Formatting for tab components.

* Adding Shape for extra small, adding color for error55, formatting the code.

* Adding new component of TuiAppBottomBar

* Adding behaviour of barcode to TuiSearchBar, and fixing trailing Icon issue.

* Adding behaviour of barcode to TUIAppTopBar

* Updating formatting of TUIAttachmentUpload

* Updating formatting of TUIChip.

* Adding new component of TUIContentBox.

* Updating Formatting for TUIDivider.

* Updating Formatting for TUIMediaThumbnail.kt.

* Adding Custom Style Parametrizing for TUIMobileButtonBlock

* Updating Formatting in TUIMobileOverlayFooter

* Updating Formatting in TUIMobileOverlayHeader

* Updating Formatting in TUIMobileOverlayMenuItem

* Updating Formatting in TUINavigationRow

* Updating Formatting in TUIPlayPauseButton

* Updating Formatting in TUISnackBar

* Updating Formatting in TUIStatusIndicator

* Updating Formatting in TUITableCell

* Updating Formatting in TUITag.

* Updating Formatting in TUITextRow, improving the design of Stepper, and General Design.

* Updating Formatting in TUIToggleSwitch

* Updating Test for TUIBadgeTest and TUITableCellTest
---
 .idea/deploymentTargetSelector.xml            |  10 +
 .idea/inspectionProfiles/Project_Default.xml  |  33 ++
 .idea/runConfigurations.xml                   |  13 +
 .../tarkalabs/uicomponents/TUIBadgeTest.kt    |  66 +--
 .../uicomponents/TUITableCellTest.kt          |  33 +-
 .../tarkaui/components/TUIAppBottomBar.kt     | 243 ++++++++++
 .../tarkaui/components/TUIAppTopBar.kt        |  65 +--
 .../tarkaui/components/TUIAttachmentUpload.kt |  47 +-
 .../tarkalabs/tarkaui/components/TUIChip.kt   |  91 ++--
 .../tarkaui/components/TUIContentBox.kt       |  84 ++++
 .../tarkaui/components/TUIDivider.kt          |  31 +-
 .../tarkaui/components/TUIMediaThumbnail.kt   |  78 +++-
 .../components/TUIMobileButtonBlock.kt        |  40 +-
 .../components/TUIMobileOverlayFooter.kt      |  23 +-
 .../components/TUIMobileOverlayHeader.kt      |  30 +-
 .../components/TUIMobileOverlayMenuItem.kt    |  38 +-
 .../tarkaui/components/TUINavigationRows.kt   |  45 +-
 .../tarkaui/components/TUIPlayPauseButton.kt  |  47 +-
 .../tarkaui/components/TUISearchBar.kt        |  82 +++-
 .../tarkaui/components/TUISnackBar.kt         |  82 ++--
 .../tarkaui/components/TUIStatusIndicator.kt  |  14 +-
 .../tarkaui/components/TUITableCell.kt        |  21 +-
 .../tarkalabs/tarkaui/components/TUITag.kt    | 115 ++---
 .../tarkaui/components/TUITextRow.kt          | 276 +++++++-----
 .../tarkaui/components/TUIToggleSwitch.kt     |  23 +-
 .../tarkaui/components/base/TUIAvatar.kt      |  27 +-
 .../tarkaui/components/base/TUIBadge.kt       |  16 +-
 .../tarkaui/components/base/TUIButton.kt      | 177 +++++---
 .../base/TUIFloatingActionButton.kt           |  39 +-
 .../tarkaui/components/base/TUIIconButton.kt  | 179 +++++---
 .../tarkaui/components/base/TUIInputField.kt  | 414 ++++++++++--------
 .../tarkaui/components/base/TUIToggleRow.kt   |  59 ++-
 .../components/card/TUIDraggableCard.kt       |  16 +-
 .../components/card/TUISelectionCard.kt       |  42 +-
 .../components/checkbox/TUICheckBox.kt        |  32 +-
 .../components/checkbox/TUICheckBoxRow.kt     |  19 +-
 .../components/email/TUIEmailAreaField.kt     |  34 +-
 .../tarkaui/components/email/TUIEmailField.kt |  83 ++--
 .../components/email/TUIEmailSubjectField.kt  |  30 +-
 .../components/radiobutton/TUIRadioButton.kt  |  20 +-
 .../components/radiobutton/TUIRadioRow.kt     |  13 +-
 .../tarkaui/components/tab/TUITab.kt          |  32 +-
 .../tarkaui/components/tab/TUITabBar.kt       |  52 +--
 .../java/com/tarkalabs/tarkaui/theme/Color.kt |  23 +-
 .../java/com/tarkalabs/tarkaui/theme/Shape.kt |   4 +-
 45 files changed, 1868 insertions(+), 1073 deletions(-)
 create mode 100644 .idea/deploymentTargetSelector.xml
 create mode 100644 .idea/runConfigurations.xml
 create mode 100644 tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppBottomBar.kt
 create mode 100644 tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIContentBox.kt

diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
new file mode 100644
index 00000000..040567e4
--- /dev/null
+++ b/.idea/deploymentTargetSelector.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetSelector">
+    <selectionStates>
+      <SelectionState runConfigName="example">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
+    </selectionStates>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 44ca2d9b..afb1d81f 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,35 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="AndroidLintUnsafeImplicitIntentLaunch" enabled="false" level="ERROR" enabled_by_default="false" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
@@ -9,6 +38,10 @@
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
     </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
     <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
       <option name="previewFile" value="true" />
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
new file mode 100644
index 00000000..931b96c3
--- /dev/null
+++ b/.idea/runConfigurations.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RunConfigurationProducerService">
+    <option name="ignoredProducers">
+      <set>
+        <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
+        <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
+        <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+      </set>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIBadgeTest.kt b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIBadgeTest.kt
index 02a1b33d..2d28f936 100644
--- a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIBadgeTest.kt
+++ b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIBadgeTest.kt
@@ -9,44 +9,50 @@ import com.tarkalabs.tarkaui.components.base.BadgeStyle
 import com.tarkalabs.tarkaui.components.base.TUIBadge
 import com.tarkalabs.tarkaui.components.base.TUIBadgeTags
 import com.tarkalabs.tarkaui.icons.Symbols16
-import com.tarkalabs.tarkaui.icons.TarkaIcon
 import com.tarkalabs.tarkaui.icons.TarkaIcons
 import org.junit.Rule
 import org.junit.Test
 
 class TUIBadgeTest {
-  @get:Rule val composeTestRule = createComposeRule()
-
-  private val tags = TUIBadgeTags(parentTag = "testTag")
-
-  @Test fun text_badge_Displayed() {
-    composeTestRule.setContent {
-      TUIBadge(
-        badgeSize = L, tags = tags, style = BadgeStyle.Count(299)
-      )
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    private val tags = TUIBadgeTags(parentTag = "testTag")
+
+    @Test
+    fun text_badge_Displayed() {
+        composeTestRule.setContent {
+            TUIBadge(
+                badgeSize = L,
+                tags = tags,
+                style = BadgeStyle.Count(299)
+            )
+        }
+        composeTestRule.onNodeWithText("299").assertIsDisplayed()
+        composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
     }
-    composeTestRule.onNodeWithText("299").assertIsDisplayed()
-    composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
-  }
 
-
-  @Test fun icon_badge_Displayed() {
-    composeTestRule.setContent {
-      TUIBadge(
-        badgeSize = L, tags = tags, style = BadgeStyle.Icon(TarkaIcons.Regular.Symbols16)
-      )
+    @Test
+    fun icon_badge_Displayed() {
+        composeTestRule.setContent {
+            TUIBadge(
+                badgeSize = L,
+                tags = tags,
+                style = BadgeStyle.Icon(TarkaIcons.Regular.Symbols16)
+            )
+        }
+        composeTestRule.onNodeWithTag(tags.iconTag).assertIsDisplayed()
     }
-    composeTestRule.onNodeWithTag(tags.iconTag).assertIsDisplayed()
-  }
 
-  @Test fun empty_badge_Displayed() {
-    composeTestRule.setContent {
-      TUIBadge(
-        badgeSize = L, tags = tags
-      )
+    @Test
+    fun empty_badge_Displayed() {
+        composeTestRule.setContent {
+            TUIBadge(
+                badgeSize = L,
+                tags = tags
+            )
+        }
+        composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
+        composeTestRule.onNodeWithTag(tags.parentTag).assertExists()
     }
-    composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
-    composeTestRule.onNodeWithTag(tags.parentTag).assertExists()
-  }
-
 }
\ No newline at end of file
diff --git a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt
index 41997021..6153951a 100644
--- a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt
+++ b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUITableCellTest.kt
@@ -1,7 +1,6 @@
 package com.tarkalabs.uicomponents
 
 import androidx.compose.ui.test.assertIsDisplayed
-import androidx.compose.ui.test.assertTextEquals
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithTag
 import com.tarkalabs.tarkaui.components.TUITableCell
@@ -11,22 +10,24 @@ import org.junit.Rule
 import org.junit.Test
 
 class TUITableCellTest {
-  @get:Rule val composeTestRule = createComposeRule()
+    @get:Rule
+    val composeTestRule = createComposeRule()
 
-  private val testTags: TUITableCellTags = TUITableCellTags()
+    private val testTags: TUITableCellTags = TUITableCellTags()
 
-  @Test fun tuiTableCellDisplayed() {
-    val cellValue = "Label"
-    composeTestRule.setContent {
-      TUITheme {
-        TUITableCell(
-          cellValue = cellValue,
-          isHeader = true,
-          isTopBorderVisible = true,
-          isBottomBorderVisible = true
-        )
-      }
+    @Test
+    fun tuiTableCellDisplayed() {
+        val cellValue = "Label"
+        composeTestRule.setContent {
+            TUITheme {
+                TUITableCell(
+                    cellValue = cellValue,
+                    isHeader = true,
+                    isTopBorderVisible = true,
+                    isBottomBorderVisible = true
+                )
+            }
+        }
+        composeTestRule.onNodeWithTag(testTags.parentTag).assertExists().assertIsDisplayed()
     }
-    composeTestRule.onNodeWithTag(testTags.parentTag).assertExists().assertIsDisplayed()
-  }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppBottomBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppBottomBar.kt
new file mode 100644
index 00000000..ace8f3a4
--- /dev/null
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppBottomBar.kt
@@ -0,0 +1,243 @@
+package com.tarkalabs.tarkaui.components
+
+import android.util.Log
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.components.base.IconButtonSize
+import com.tarkalabs.tarkaui.components.base.IconButtonStyle
+import com.tarkalabs.tarkaui.components.base.TUIIconButton
+import com.tarkalabs.tarkaui.components.base.TUIIconButtonTags
+import com.tarkalabs.tarkaui.icons.ArrowRedo24
+import com.tarkalabs.tarkaui.icons.ArrowUndo24
+import com.tarkalabs.tarkaui.icons.Lasso24
+import com.tarkalabs.tarkaui.icons.SelectObjectSkew24
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
+import com.tarkalabs.tarkaui.theme.TUITheme
+
+/**   Displays a customized bottom app bar with listOfIcons,onClickEvent.
+ *
+ * @param modifier The modifier to customize the TUIAppBottomBar container.
+ * @param tags Tags for customizing test accessibility.
+ * @param onClickEvent The callback function to be invoked when the icon is clicked.
+ * @param icons for providing list of icons to be displayed in bottom bar.
+ *  Note : icon and tags should not exceed more 6
+ *
+ * * How to use TUIAppBottomBar()
+ *   TUIAppBottomBar(
+ *     icons = pass the list of icons
+ *     onClickEvent = { event -> Handle event click based on the icon index}
+ *       )
+ */
+
+@Composable
+fun TUIAppBottomBar(
+    modifier: Modifier = Modifier,
+    icons: List<TarkaIcon>,
+    defaultSelectedItem: Int,
+    onClickEvent: (index: Int) -> Unit,
+    tags: List<TUIIconButtonTags> = emptyList()
+) {
+    require(icons.isNotEmpty()) { "icon should not empty" }
+
+    require(defaultSelectedItem < 6 && icons.size <= 6) { "icon and tags should not exceed more 6" }
+
+    var selectedIconIndex by remember { mutableIntStateOf(defaultSelectedItem) }
+    var isFirstSelected by remember { mutableStateOf(true) }
+    Row(
+        modifier = modifier
+            .background(color = TUITheme.colors.surface)
+            .fillMaxWidth()
+            .height(64.dp)
+            .wrapContentHeight(),
+        horizontalArrangement = Arrangement.SpaceAround
+    ) {
+        icons.forEachIndexed { index, icon ->
+            val isIconSelected = index == selectedIconIndex
+            Box(
+                modifier = Modifier.padding(8.dp)
+            ) {
+                TUIIconButton(
+                    modifier = Modifier.wrapContentSize(),
+                    icon = icon,
+                    onIconClick = {
+                        if (index == selectedIconIndex) {
+                            isFirstSelected = false
+                        } else {
+                            selectedIconIndex = index
+                        }
+                        onClickEvent(if (isIconSelected) -1 else index)
+                    },
+                    tags = if (icons.size == tags.size) {
+                        tags[index]
+                    } else {
+                        TUIIconButtonTags()
+                    },
+                    iconButtonStyle = if (isIconSelected) {
+                        IconButtonStyle.Secondary
+                    } else {
+                        IconButtonStyle.Ghost
+                    },
+                    buttonSize = IconButtonSize.XL
+                )
+            }
+        }
+    }
+    TUIDivider()
+}
+
+@Preview
+@Composable
+private fun EamNormalBottomBarPreview() {
+    TUITheme {
+        Column {
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24,
+                    TarkaIcons.Regular.Lasso24,
+                    TarkaIcons.Regular.ArrowUndo24,
+                    TarkaIcons.Regular.ArrowRedo24,
+                    TarkaIcons.Regular.ArrowRedo24,
+                    TarkaIcons.Regular.ArrowRedo24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                defaultSelectedItem = 5
+            )
+            VerticalSpacer(space = 16)
+
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24,
+                    TarkaIcons.Regular.Lasso24,
+                    TarkaIcons.Regular.ArrowUndo24,
+                    TarkaIcons.Regular.ArrowRedo24,
+                    TarkaIcons.Regular.ArrowRedo24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                tags = listOf(
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconOne"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconTwo"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconThree"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconFour"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconFive")
+                ),
+                defaultSelectedItem = 3
+            )
+            VerticalSpacer(space = 16)
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24,
+                    TarkaIcons.Regular.Lasso24,
+                    TarkaIcons.Regular.ArrowUndo24,
+                    TarkaIcons.Regular.ArrowRedo24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                tags = listOf(
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconOne"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconTwo"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconThree"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconFour")
+                ),
+                defaultSelectedItem = -1
+            )
+            VerticalSpacer(space = 16)
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24,
+                    TarkaIcons.Regular.Lasso24,
+                    TarkaIcons.Regular.ArrowUndo24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                tags = listOf(
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconOne"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconTwo"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconThree")
+                ),
+                defaultSelectedItem = 3
+            )
+            VerticalSpacer(space = 16)
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24,
+                    TarkaIcons.Regular.Lasso24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                tags = listOf(
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconOne"),
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconTwo")
+                ),
+                defaultSelectedItem = 3
+            )
+            VerticalSpacer(space = 16)
+            TUIAppBottomBar(
+                icons = listOf(
+                    TarkaIcons.Regular.SelectObjectSkew24
+                ),
+                onClickEvent = { index ->
+                    when (index) {
+                        0 -> Log.d("test", "1 item clicked")
+                        1 -> Log.d("test", "2 item clicked")
+                        2 -> Log.d("test", "3 item clicked")
+                        3 -> Log.d("test", "4item clicked")
+                    }
+                },
+                tags = listOf(
+                    TUIIconButtonTags(parentTag = "TUITopBar_itemIconOne")
+                ),
+                defaultSelectedItem = 3
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt
index be4490c4..e62308f9 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt
@@ -3,7 +3,6 @@ package com.tarkalabs.tarkaui.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.wrapContentHeight
@@ -58,26 +57,29 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  * @param searchQuery the default search text that we need to show in searchbar
  * @param scrollBehavior The scroll behavior to be applied to the top app bar.
  * How to use TUIAppTopBar()
-  TUIAppTopBar(
-    title = "My App",
-    navigationIcon = TarkaIcon.Back, // Optional: Pass the navigation icon
-    searchIcon = TarkaIcon.Search, // Optional: Pass the search icon
-    menuItemIconOne = TarkaIcon.Menu, // Optional: Pass the first menu item icon
-    menuItemIconTwo = TarkaIcon.Settings, // Optional: Pass the second menu item icon
-    menuItemIconThree = TarkaIcon.Notifications, // Optional: Pass the third menu item icon
-    onNavigationIconClick = { /* Handle navigation icon click */ },
-    onFirstMenuItemClicked = { /* Handle first menu item click */ },
-    onSecondMenuItemClicked = { /* Handle second menu item click */ },
-    onThirdMenuItemClicked = { /* Handle third menu item click */ },
-    onSearchQuery = { query -> /* Handle search query */ },
-    colors = TopAppBarColors(/* Specify custom colors if needed */),
-    scrollBehavior = TopAppBarScrollBehavior.ScrollOnAppBarScroll, // Optional: Specify scroll behavior
-      )
+TUIAppTopBar(
+title = "My App",
+navigationIcon = TarkaIcon.Back, // Optional: Pass the navigation icon
+searchIcon = TarkaIcon.Search, // Optional: Pass the search icon
+menuItemIconOne = TarkaIcon.Menu, // Optional: Pass the first menu item icon
+menuItemIconTwo = TarkaIcon.Settings, // Optional: Pass the second menu item icon
+menuItemIconThree = TarkaIcon.Notifications, // Optional: Pass the third menu item icon
+onNavigationIconClick = { /* Handle navigation icon click */ },
+onFirstMenuItemClicked = { /* Handle first menu item click */ },
+onSecondMenuItemClicked = { /* Handle second menu item click */ },
+onThirdMenuItemClicked = { /* Handle third menu item click */ },
+onSearchQuery = { query -> /* Handle search query */ },
+colors = TopAppBarColors(/* Specify custom colors if needed */),
+scrollBehavior = TopAppBarScrollBehavior.ScrollOnAppBarScroll, // Optional: Specify scroll behavior
+)
  */
-@OptIn(ExperimentalMaterial3Api::class) @Composable fun TUIAppTopBar(
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TUIAppTopBar(
   modifier: Modifier = Modifier,
   title: String,
   navigationIcon: TarkaIcon? = null,
+  hasBarcode: Boolean = false,
   searchIcon: TarkaIcon? = null,
   menuItemIconOne: TarkaIcon? = null,
   menuItemIconTwo: TarkaIcon? = null,
@@ -87,6 +89,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   onSecondMenuItemClicked: () -> Unit = {},
   onThirdMenuItemClicked: () -> Unit = {},
   onSearchQuery: (String) -> Unit = {},
+  openScannerClick: () -> Unit = {},
   searchQuery: String = "",
   searchQueryHint: String = "",
   disableSearchIcon: Boolean = false,
@@ -98,9 +101,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   scrollBehavior: TopAppBarScrollBehavior? = null,
   keyboardOption: KeyboardOptions = KeyboardOptions.Default,
   keyboardAction: KeyboardActions = KeyboardActions.Default,
-  tags: TUIAppTopBarTags = TUIAppTopBarTags(),
+  tags: TUIAppTopBarTags = TUIAppTopBarTags()
 ) {
-
   var showSearchBarState by remember {
     mutableStateOf(false)
   }
@@ -118,7 +120,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       .background(color = TUITheme.colors.surface)
       .fillMaxWidth()
       .sizeIn(maxHeight = 64.dp)
-      .wrapContentHeight(), horizontalAlignment = Alignment.CenterHorizontally
+      .wrapContentHeight(),
+    horizontalAlignment = Alignment.CenterHorizontally
   ) {
     if (showSearchBarState) {
       TUISearchBar(
@@ -131,12 +134,16 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         onLeadingIconClick = {
           showSearchBarState = false
           onSearchQuery("")
+        }, onTrailingIconClick = {
+          openScannerClick()
         },
         onQueryTextChange = {
           onSearchQuery(it)
         },
         keyboardAction = keyboardAction,
-        keyboardOption = keyboardOption)
+        keyboardOption = keyboardOption,
+        hasBarcode = hasBarcode
+      )
     } else {
       TopAppBar(
         title = {
@@ -210,7 +217,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         },
         colors = colors,
         modifier = Modifier.fillMaxWidth(),
-        scrollBehavior = scrollBehavior,
+        scrollBehavior = scrollBehavior
       )
     }
     TUIDivider()
@@ -219,15 +226,19 @@ import com.tarkalabs.tarkaui.theme.TUITheme
 
 data class TUIAppTopBarTags(
   val parentTag: String = "TUITopBar",
-  val navigationIconTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITopBar_NavigationIcon"),
+  val navigationIconTags: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUITopBar_NavigationIcon"),
   val searchIconTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITopBar_SearchIcon"),
   val menuIconOneTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITopBar_MenuIconOne"),
   val menuIconTwoTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITopBar_MenuIconTwo"),
-  val menuIconThreeTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITopBar_MenuIconThree"),
+  val menuIconThreeTags: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUITopBar_MenuIconThree")
 )
 
-@OptIn(ExperimentalMaterial3Api::class) @Preview @Composable fun EamNormalTopBar(
-) {
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun EamNormalTopBarPreview() {
   TUITheme {
     Column {
       TUIAppTopBar(
@@ -255,4 +266,4 @@ data class TUIAppTopBarTags(
       )
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAttachmentUpload.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAttachmentUpload.kt
index 7ebe6fca..b60c2f66 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAttachmentUpload.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAttachmentUpload.kt
@@ -60,13 +60,13 @@ object TUIAttachmentUpload {
    * How to use TUIAttachmentUpload()
    *
    *   TUIAttachmentUpload(
-          type = Document,
-          attachmentName = "document.jpg",
-          onMenuClick = {},
-          onAttachmentClick = {  },
-          state = UpLoading(50),
-          showLeadingIcon = true,
-       )
+  type = Document,
+  attachmentName = "document.jpg",
+  onMenuClick = {},
+  onAttachmentClick = {  },
+  state = UpLoading(50),
+  showLeadingIcon = true,
+  )
    *
    */
   @Composable operator fun invoke(
@@ -78,10 +78,9 @@ object TUIAttachmentUpload {
     trailingIcon: TarkaIcon,
     state: AttachmentState? = null,
     showLeadingIcon: Boolean,
-    showDeleteButton : Boolean = true,
+    showDeleteButton: Boolean = true,
     tags: TUIAttachmentUploadTags = TUIAttachmentUploadTags()
   ) {
-
     Row(
       modifier = modifier
         .testTag(tags.parentTag)
@@ -91,7 +90,6 @@ object TUIAttachmentUpload {
         },
       verticalAlignment = Alignment.CenterVertically
     ) {
-
       if (showLeadingIcon) {
         Box(
           contentAlignment = Alignment.Center,
@@ -107,7 +105,6 @@ object TUIAttachmentUpload {
             contentDescription = TarkaIcons.Regular.ReOrder24.contentDescription,
             tint = TUITheme.colors.onSurface
           )
-
         }
       }
 
@@ -119,7 +116,10 @@ object TUIAttachmentUpload {
 
       when (state) {
         UpLoadSuccessful -> {
-          Row(modifier = attachmentModifier, verticalAlignment = Alignment.CenterVertically) {
+          Row(
+            modifier = attachmentModifier,
+            verticalAlignment = Alignment.CenterVertically
+          ) {
             Icon(
               painter = painterResource(id = TarkaIcons.Regular.Checkmark12.iconRes),
               contentDescription = TarkaIcons.Regular.Checkmark12.contentDescription,
@@ -133,7 +133,8 @@ object TUIAttachmentUpload {
 
         is UpLoading -> {
           val animatedProgress by animateFloatAsState(
-            targetValue = state.progress / 100f, animationSpec = tween(durationMillis = 5000),
+            targetValue = state.progress / 100f,
+            animationSpec = tween(durationMillis = 5000),
             label = ""
           )
           Column(modifier = attachmentModifier) {
@@ -147,7 +148,7 @@ object TUIAttachmentUpload {
                 .clip(RoundedCornerShape(4.dp))
                 .testTag(tags.progressBarTag),
               color = TUITheme.colors.primaryAltHover,
-              trackColor = TUITheme.colors.surfaceVariant,
+              trackColor = TUITheme.colors.surfaceVariant
             )
           }
         }
@@ -177,14 +178,12 @@ object TUIAttachmentUpload {
      *
      * @param progress The progress percentage.
      */
-    data class UpLoading(
-      val progress: Int
-    ) : AttachmentState()
+    data class UpLoading(val progress: Int) : AttachmentState()
 
     /**
      * Represents the successful upload state.
      */
-    object UpLoadSuccessful : AttachmentState()
+    data object UpLoadSuccessful : AttachmentState()
   }
 
   /**
@@ -192,17 +191,18 @@ object TUIAttachmentUpload {
    *
    * @param parentTag The tag for the parent container of the attachment.
    * @param menuItemTag Tags for customizing test accessibility for the menu (three-dot) icon.
-   * @param leadingIconTag The tag for customizing test accessibility for the leading icon (if [showLeadingIcon] is `true`).
+   * @param leadingIconTag The tag for customizing test accessibility for the leading icon
    * @param successIconTag The tag for customizing test accessibility for the success icon.
    * @param thumbTag Tags for customizing test accessibility for the thumbnail.
    */
   data class TUIAttachmentUploadTags(
     val parentTag: String = "TUIAttachmentUpload",
-    val menuItemTag: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUIAttachmentUpload_menuItem"),
+    val menuItemTag: TUIIconButtonTags =
+      TUIIconButtonTags(parentTag = "TUIAttachmentUpload_menuItem"),
     val leadingIconTag: String = "TUIAttachmentUpload_leadingIcon",
     val successIconTag: String = "TUIAttachmentUpload_SuccessIcon",
     val progressBarTag: String = "TUIAttachmentUpload_ProgressBar",
-    val thumbTag: TUIMediaThumbnailTags = TUIMediaThumbnailTags(),
+    val thumbTag: TUIMediaThumbnailTags = TUIMediaThumbnailTags()
   )
 
   /**
@@ -218,12 +218,13 @@ object TUIAttachmentUpload {
       color = TUITheme.colors.onSurface,
       modifier = modifier,
       maxLines = 1,
-      overflow = TextOverflow.Ellipsis,
+      overflow = TextOverflow.Ellipsis
     )
   }
 }
 
-@Preview @Composable fun PreviewTUIAttachmentUpload() {
+@Preview @Composable
+private fun PreviewTUIAttachmentUpload() {
   TUITheme {
     Box(
       modifier = Modifier
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt
index a432b370..21e4847e 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt
@@ -79,7 +79,7 @@ sealed class ChipType {
   data class Input(
     val content: ChipLeadingContent? = null,
     val trailingIcon: TarkaIcon? = null,
-    val containerColor: Color? = null,
+    val containerColor: Color? = null
   ) : ChipType()
 
   /**
@@ -104,7 +104,7 @@ sealed class ChipType {
     val showTrailingDismiss: Boolean = false,
     val showTrailingCaret: Boolean = false,
     val badgeCount: Int? = null,
-    val trailingIcon: TarkaIcon? = null,
+    val trailingIcon: TarkaIcon? = null
   ) : ChipType()
 }
 
@@ -119,7 +119,7 @@ sealed class ChipLeadingContent {
 
 enum class ChipSize(val size: Dp) {
   SMALL(32.dp),
-  BIG(40.dp),
+  BIG(40.dp)
 }
 
 /**
@@ -139,9 +139,8 @@ enum class ChipSize(val size: Dp) {
   onClick: () -> Unit,
   onDismissClick: (() -> Unit)? = null,
   chipSize: ChipSize = ChipSize.SMALL,
-  tags: TUIChipTags = TUIChipTags(),
+  tags: TUIChipTags = TUIChipTags()
 ) {
-
   val commonModifier = modifier
     .testTag(tags.parentTag)
     .height(chipSize.size)
@@ -150,15 +149,20 @@ enum class ChipSize(val size: Dp) {
 
   when (type) {
     is ChipType.Assist -> {
-      AssistChip(modifier = commonModifier,
+      AssistChip(
+        modifier = commonModifier,
         shape = RoundedCornerShape(8.dp),
         label = commonLabel,
         onClick = onClick,
-        colors = AssistChipDefaults.assistChipColors(containerColor = TUITheme.colors.surface),
-        leadingIcon = { leadingIcon(type.content) })
+        colors = AssistChipDefaults.assistChipColors(
+          containerColor = TUITheme.colors.surface
+        ),
+        leadingIcon = { leadingIcon(type.content) }
+      )
     }
 
-    is ChipType.Input -> InputChip(modifier = commonModifier,
+    is ChipType.Input -> InputChip(
+      modifier = commonModifier,
       shape = RoundedCornerShape(8.dp),
       selected = false,
       onClick = onClick,
@@ -168,12 +172,18 @@ enum class ChipSize(val size: Dp) {
       trailingIcon = if (type.trailingIcon != null) {
         {
           TUIIconButton(
-            icon = type.trailingIcon, iconButtonStyle = Ghost, onIconClick = {
+            icon = type.trailingIcon,
+            iconButtonStyle = Ghost,
+            onIconClick = {
               onDismissClick?.invoke()
-            }, buttonSize = M
+            },
+            buttonSize = M
           )
         }
-      } else null)
+      } else {
+        null
+      }
+    )
 
     is Filter -> {
       FilterChip(
@@ -186,7 +196,10 @@ enum class ChipSize(val size: Dp) {
     }
 
     is ChipType.Suggestion -> {
-      SuggestionChip(colors = SuggestionChipDefaults.suggestionChipColors(containerColor = TUITheme.colors.surface),
+      SuggestionChip(
+        colors = SuggestionChipDefaults.suggestionChipColors(
+          containerColor = TUITheme.colors.surface
+        ),
         onClick = onClick,
         label = commonLabel,
         shape = RoundedCornerShape(8.dp),
@@ -199,7 +212,10 @@ enum class ChipSize(val size: Dp) {
               tint = TUITheme.colors.onSecondary
             )
           }
-        } else null)
+        } else {
+          null
+        }
+      )
     }
   }
 }
@@ -209,7 +225,7 @@ enum class ChipSize(val size: Dp) {
   label: String,
   onClick: () -> Unit,
   modifier: Modifier = Modifier,
-  onDismissClick: (() -> Unit)? = null,
+  onDismissClick: (() -> Unit)? = null
 ) {
   Box(
     modifier = Modifier
@@ -228,7 +244,8 @@ enum class ChipSize(val size: Dp) {
       modifier = modifier
         .clickable {
           onClick()
-        }, horizontalArrangement = Arrangement.Center,
+        },
+      horizontalArrangement = Arrangement.Center,
       verticalAlignment = Alignment.CenterVertically
     ) {
       if (type.showLeadingCheck) {
@@ -236,22 +253,24 @@ enum class ChipSize(val size: Dp) {
         Icon(
           painter = painterResource(id = TarkaIcons.Filled.Checkmark16.iconRes),
           contentDescription = TarkaIcons.Filled.Checkmark16.contentDescription,
-          tint = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface,
+          tint = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface
         )
         HorizontalSpacer(space = 6)
       } else {
-        HorizontalSpacer(space = 20)
+        HorizontalSpacer(space = 12)
       }
       Text(
         text = label,
         style = TUITheme.typography.button7,
-        color = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface,
+        color = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface
       )
 
       if (type.showTrailingDismiss) {
         HorizontalSpacer(space = 6)
         TUIIconButton(
-          icon = TarkaIcons.Filled.Dismiss16.copy(tintColor = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface),
+          icon = TarkaIcons.Filled.Dismiss16.copy(
+            tintColor = if (type.selected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface
+          ),
           iconButtonStyle = Ghost,
           onIconClick = {
             onDismissClick?.invoke()
@@ -273,7 +292,6 @@ enum class ChipSize(val size: Dp) {
       } else {
         HorizontalSpacer(space = 20)
       }
-
     }
     if (type.badgeCount != null) {
       TUIBadge(
@@ -281,15 +299,18 @@ enum class ChipSize(val size: Dp) {
         modifier = Modifier.align(Alignment.TopEnd)
       )
     }
-
   }
 }
 
-@Composable private fun getCommonLabel(label: String) = (@Composable {
-  Text(
-    text = label, style = TUITheme.typography.button7, color = TUITheme.colors.onSurface
-  )
-})
+@Composable private fun getCommonLabel(label: String) = (
+        @Composable {
+          Text(
+            text = label,
+            style = TUITheme.typography.button7,
+            color = TUITheme.colors.onSurface
+          )
+        }
+        )
 
 @Composable private fun leadingIcon(): @Composable (ChipLeadingContent?) -> Unit {
   val leadingIcon: @Composable (ChipLeadingContent?) -> Unit = @Composable {
@@ -301,7 +322,8 @@ enum class ChipSize(val size: Dp) {
       )
 
       is Image -> TUIAvatar(
-        avatarType = AvatarType.Image(it.imageBitmap), avatarSize = XS
+        avatarType = AvatarType.Image(it.imageBitmap),
+        avatarSize = XS
       )
 
       null -> {}
@@ -310,11 +332,10 @@ enum class ChipSize(val size: Dp) {
   return leadingIcon
 }
 
-data class TUIChipTags(
-  val parentTag: String = "TUIChip",
-)
+data class TUIChipTags(val parentTag: String = "TUIChip")
 
-@Preview @Composable fun TUIChipPreview() {
+@Preview @Composable
+private fun TUIChipPreview() {
   TUITheme {
     Column(modifier = Modifier.padding(20.dp)) {
       var showSearchbar by remember {
@@ -331,7 +352,9 @@ data class TUIChipTags(
         VerticalSpacer(space = 20)
         TUIChip(
           type = Filter(
-            trailingIcon = Regular.ArrowSort20, showTrailingDismiss = true, selected = showSearchbar
+            trailingIcon = Regular.ArrowSort20,
+            showTrailingDismiss = true,
+            selected = showSearchbar
           ),
           label = "Something",
           onClick = {
@@ -339,7 +362,7 @@ data class TUIChipTags(
           },
           onDismissClick = {
             showSearchbar = !showSearchbar
-          },
+          }
         )
         VerticalSpacer(space = 20)
       }
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIContentBox.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIContentBox.kt
new file mode 100644
index 00000000..e30fca0f
--- /dev/null
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIContentBox.kt
@@ -0,0 +1,84 @@
+package com.tarkalabs.tarkaui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.icons.ChevronRight24
+import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
+import com.tarkalabs.tarkaui.theme.TUITheme
+
+/**
+ * This Composable function is used to Show the content box in a list to pick the particular from User.
+ *
+ * @param modifier - used to modify the properties, behaviours of composes.
+ * @param title - title of the ContentBox.
+ * @param onContentBoxClicked - lambda block which will be invoked while clicking this ContentBox.
+ *
+ * */
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun TUIContentBox(
+    modifier: Modifier = Modifier,
+    title: String,
+    tags: TUIContentBoxTags = TUIContentBoxTags(),
+    onContentBoxClicked: () -> Unit
+) {
+    Row(
+        modifier = modifier
+            .background(color = TUITheme.colors.surface)
+            .testTag(tags.title)
+            .semantics { testTagsAsResourceId = true }
+            .clickable {
+                onContentBoxClicked()
+            }
+            .padding(horizontal = 16.dp, vertical = 12.dp)
+    ) {
+        Text(
+            text = title,
+            color = TUITheme.colors.inputText,
+            style = TUITheme.typography.heading6
+        )
+        Column(
+            modifier = Modifier
+                .padding(start = 16.dp)
+                .weight(1f)
+        ) {
+            Icon(
+                modifier = Modifier
+                    .align(Alignment.End)
+                    .size(24.dp),
+                painter = painterResource(id = Regular.ChevronRight24.iconRes),
+                contentDescription = Regular.ChevronRight24.contentDescription,
+                tint = TUITheme.colors.utilityOutline
+            )
+        }
+    }
+}
+
+data class TUIContentBoxTags(
+    val title: String = "TUIContentBox_Title"
+)
+
+@Preview
+@Composable
+private fun ContentBoxPreview() {
+    TUITheme {
+        TUIContentBox(title = "text") {}
+    }
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIDivider.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIDivider.kt
index b50f9da6..d009d40a 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIDivider.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIDivider.kt
@@ -50,11 +50,11 @@ fun TUIDivider(
   color: Color = TUITheme.colors.surfaceVariantHover,
   horizontalPadding: HorizontalPaddingSize = NONE,
   verticalPadding: VerticalPaddingSize = VerticalPaddingSize.NONE,
-  tags: TUIDividerTags = TUIDividerTags(),
+  tags: TUIDividerTags = TUIDividerTags()
 ) {
   when (orientation) {
     VERTICAL -> {
-      //todo vertical divider is not yet implemented in any of the components so we don't know height
+      // todo vertical divider is not yet implemented in any of the components so we don't know height
       // .height(40.dp)
       Row {
         HorizontalSpacer(space = horizontalPadding.size)
@@ -62,7 +62,9 @@ fun TUIDivider(
           modifier = modifier
             .fillMaxHeight()
             .padding(vertical = verticalPadding.size.dp)
-            .testTag(tag = tags.parentTag), color = color, thickness = thickness.dp
+            .testTag(tag = tags.parentTag),
+          color = color,
+          thickness = thickness.dp
         )
         HorizontalSpacer(space = horizontalPadding.size)
       }
@@ -75,7 +77,9 @@ fun TUIDivider(
           modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = horizontalPadding.size.dp)
-            .testTag(tag = tags.parentTag), color = color, thickness = thickness.dp
+            .testTag(tag = tags.parentTag),
+          color = color,
+          thickness = thickness.dp
         )
         VerticalSpacer(space = verticalPadding.size)
       }
@@ -85,11 +89,12 @@ fun TUIDivider(
 
 @Preview
 @Composable
-fun TestTUIDivider() {
-  Column(modifier = Modifier
-    .background(Color.Black)
-    .fillMaxSize()) {
-
+private fun TUIDividerPreview() {
+  Column(
+    modifier = Modifier
+      .background(Color.Black)
+      .fillMaxSize()
+  ) {
     VerticalSpacer(space = 10)
     TUIDivider(color = TUITheme.colors.secondaryAlt)
     VerticalSpacer(space = 10)
@@ -97,9 +102,7 @@ fun TestTUIDivider() {
   }
 }
 
-data class TUIDividerTags(
-  val parentTag: String = "TUIDivider",
-)
+data class TUIDividerTags(val parentTag: String = "TUIDivider")
 
 enum class Orientation {
   VERTICAL,
@@ -111,10 +114,10 @@ enum class HorizontalPaddingSize(val size: Int) {
   L(24),
   M(16),
   S(8),
-  NONE(0);
+  NONE(0)
 }
 
 enum class VerticalPaddingSize(val size: Int) {
   M(8),
   NONE(0)
-}
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMediaThumbnail.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMediaThumbnail.kt
index 95c2258c..268ce649 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMediaThumbnail.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMediaThumbnail.kt
@@ -55,10 +55,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
 
 @Stable
 sealed class TUIMediaThumbnailType {
-  object Document : TUIMediaThumbnailType()
-  object Audio : TUIMediaThumbnailType()
+  data object Document : TUIMediaThumbnailType()
+  data object Audio : TUIMediaThumbnailType()
+
   @Stable
   data class Video(val image: ImageBitmap? = null) : TUIMediaThumbnailType()
+
   @Stable
   data class Image(val image: ImageBitmap? = null) : TUIMediaThumbnailType()
 }
@@ -68,14 +70,15 @@ enum class TUIMediaThumbnailSize {
   Medium
 }
 
-@Composable fun TUIMediaThumbnail(
+@Composable
+fun TUIMediaThumbnail(
   modifier: Modifier = Modifier,
   size: TUIMediaThumbnailSize = Large,
   type: TUIMediaThumbnailType?,
   showTrailingIcon: Boolean,
   onThumbnailClick: (() -> Unit)? = null,
   onTrailingIconClick: (() -> Unit)? = null,
-  tags: TUIMediaThumbnailTags = TUIMediaThumbnailTags(),
+  tags: TUIMediaThumbnailTags = TUIMediaThumbnailTags()
 ) {
   val (height, width) = when (size) {
     Large -> 60.dp to 80.dp
@@ -86,16 +89,16 @@ enum class TUIMediaThumbnailSize {
       .height(height)
       .width(width)
       .background(color = TUITheme.colors.surfaceVariant, shape = RoundedCornerShape(8.dp))
-      .testTag(tags.parentTag), contentAlignment = Alignment.Center
+      .testTag(tags.parentTag),
+    contentAlignment = Alignment.Center
   ) {
-
     val iconModifier = Modifier
       .heightIn(max = 24.dp)
       .widthIn(max = 24.dp)
       .testTag(tags.centerIconTag)
 
-    if (onThumbnailClick != null){
-      iconModifier.clickable {onThumbnailClick.invoke()}
+    if (onThumbnailClick != null) {
+      iconModifier.clickable { onThumbnailClick.invoke() }
     }
     when (type) {
       Audio -> {
@@ -118,14 +121,23 @@ enum class TUIMediaThumbnailSize {
 
       is Image -> {
         if (type.image != null) {
-          Image(bitmap = type.image,
+          Image(
+            bitmap = type.image,
             contentDescription = stringResource(id = R.string.image_thumbnail),
             modifier = Modifier
               .then(
-                if (onThumbnailClick != null) Modifier.clickable { onThumbnailClick.invoke() } else Modifier)
+                if (onThumbnailClick !=
+                  null
+                ) {
+                  Modifier.clickable { onThumbnailClick.invoke() }
+                } else {
+                  Modifier
+                }
+              )
               .fillMaxSize()
               .clip(RoundedCornerShape(8.dp)),
-            contentScale = ContentScale.Crop)
+            contentScale = ContentScale.Crop
+          )
         } else {
           Icon(
             painter = painterResource(id = Regular.Image24.iconRes),
@@ -157,6 +169,7 @@ enum class TUIMediaThumbnailSize {
           )
         }
       }
+
       else -> {}
     }
 
@@ -172,7 +185,15 @@ enum class TUIMediaThumbnailSize {
           .clip(CircleShape)
           .background(color = Color(0xFF000000).copy(alpha = 0.5f))
           .size(20.dp)
-          .then(if (onTrailingIconClick != null) Modifier.clickable { onTrailingIconClick.invoke() } else Modifier)
+          .then(
+            if (onTrailingIconClick !=
+              null
+            ) {
+              Modifier.clickable { onTrailingIconClick.invoke() }
+            } else {
+              Modifier
+            }
+          )
 
       )
     }
@@ -188,19 +209,22 @@ data class TUIMediaThumbnailTags(
 
 @Preview
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable fun PreviewTUIThumbnail() {
+@Composable
+private fun PreviewTUIThumbnail() {
   TUITheme {
     val option = BitmapFactory.Options()
     option.inPreferredConfig = Bitmap.Config.ARGB_8888
     val bitmap = BitmapFactory.decodeResource(
-      LocalContext.current.resources, R.drawable.tarka, option
+      LocalContext.current.resources,
+      R.drawable.tarka,
+      option
     ).asImageBitmap()
     Row(
       verticalAlignment = Alignment.CenterVertically,
       modifier = Modifier
         .fillMaxWidth()
         .fillMaxHeight()
-        .background(color = TUITheme.colors.surface),
+        .background(color = TUITheme.colors.surface)
     ) {
       Column(
         modifier = Modifier
@@ -220,9 +244,17 @@ data class TUIMediaThumbnailTags(
         VerticalSpacer(space = 5)
         TUIMediaThumbnail(type = Image(), showTrailingIcon = false)
         VerticalSpacer(space = 50)
-        TUIMediaThumbnail(type = Image(image = bitmap), showTrailingIcon = false, size = Medium)
+        TUIMediaThumbnail(
+          type = Image(image = bitmap),
+          showTrailingIcon = false,
+          size = Medium
+        )
         VerticalSpacer(space = 5)
-        TUIMediaThumbnail(type = Video(image = bitmap), showTrailingIcon = false, size = Medium)
+        TUIMediaThumbnail(
+          type = Video(image = bitmap),
+          showTrailingIcon = false,
+          size = Medium
+        )
         VerticalSpacer(space = 5)
         TUIMediaThumbnail(type = Audio, showTrailingIcon = false, size = Medium)
         VerticalSpacer(space = 5)
@@ -248,9 +280,17 @@ data class TUIMediaThumbnailTags(
         VerticalSpacer(space = 5)
         TUIMediaThumbnail(type = Video(), showTrailingIcon = false)
         VerticalSpacer(space = 50)
-        TUIMediaThumbnail(type = Image(image = bitmap), showTrailingIcon = true, size = Medium)
+        TUIMediaThumbnail(
+          type = Image(image = bitmap),
+          showTrailingIcon = true,
+          size = Medium
+        )
         VerticalSpacer(space = 5)
-        TUIMediaThumbnail(type = Video(image = bitmap), showTrailingIcon = true, size = Medium)
+        TUIMediaThumbnail(
+          type = Video(image = bitmap),
+          showTrailingIcon = true,
+          size = Medium
+        )
         VerticalSpacer(space = 5)
         TUIMediaThumbnail(type = Audio, showTrailingIcon = true, size = Medium)
         VerticalSpacer(space = 5)
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt
index 52206e40..19db83b7 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt
@@ -10,14 +10,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.icons.ChevronDown24
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
 import com.tarkalabs.tarkaui.components.base.ButtonSize.XL
+import com.tarkalabs.tarkaui.components.base.ButtonStyle
 import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline
 import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary
 import com.tarkalabs.tarkaui.components.base.TUIButton
 import com.tarkalabs.tarkaui.components.base.TUIButtonTags
+import com.tarkalabs.tarkaui.icons.ChevronDown24
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -47,7 +48,8 @@ fun TUIMobileButtonBlock(
   primaryTrailingIcon: TarkaIcon? = null,
   outlineLeadingIcon: TarkaIcon? = null,
   outlineTrailingIcon: TarkaIcon? = null,
-  tags: TUIMobileButtonBlockTags = TUIMobileButtonBlockTags()
+  tags: TUIMobileButtonBlockTags = TUIMobileButtonBlockTags(),
+  primaryBtnStyle: ButtonStyle = Primary
 ) {
   Column(modifier.fillMaxWidth()) {
     TUIDivider()
@@ -64,7 +66,13 @@ fun TUIMobileButtonBlock(
           buttonStyle = Outline,
           leadingIcon = outlineLeadingIcon,
           trailingIcon = outlineTrailingIcon,
-          modifier = if (primaryButtonWeight == null) Modifier.weight(1f) else Modifier.wrapContentWidth(),
+          modifier = if (primaryButtonWeight ==
+            null
+          ) {
+            Modifier.weight(1f)
+          } else {
+            Modifier.wrapContentWidth()
+          },
           tags = TUIButtonTags(parentTag = tags.outlineButtonTag)
         )
         HorizontalSpacer(space = 8)
@@ -74,7 +82,7 @@ fun TUIMobileButtonBlock(
           height = XL,
           label = it,
           onClick = { primaryButtonOnClick?.invoke() },
-          buttonStyle = Primary,
+          buttonStyle = primaryBtnStyle,
           leadingIcon = primaryLeadingIcon,
           trailingIcon = primaryTrailingIcon,
           modifier = Modifier.weight(
@@ -94,11 +102,13 @@ data class TUIMobileButtonBlockTags(
   val primaryButtonTag: String = "TUIMobileButtonBlock_Primary",
   val outlineButtonTag: String = "TUIMobileButtonBlock_Outline",
   val primaryLeadingIconTag: String = "TUIMobileButtonBlock_PrimaryLeadingIcon",
-  val primaryTrailingIconTag: String = "TUIMobileButtonBlock_PrimaryTrailingIcon",
+  val primaryTrailingIconTag: String = "TUIMobileButtonBlock_PrimaryTrailingIcon"
 
-  )
+)
 
-@Preview @Composable fun TUIMobileButtonPreview() {
+@Preview
+@Composable
+private fun TUIMobileButtonPreview() {
   TUIMobileButtonBlock(
     primaryButtonLabel = "Label",
     primaryButtonOnClick = { /*TODO*/ },
@@ -109,7 +119,7 @@ data class TUIMobileButtonBlockTags(
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview1() {
+private fun TUIMobileButtonPreview1() {
   TUIMobileButtonBlock(
     primaryButtonLabel = "Label",
     primaryButtonOnClick = { /*TODO*/ },
@@ -120,7 +130,7 @@ fun TUIMobileButtonPreview1() {
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview2() {
+private fun TUIMobileButtonPreview2() {
   TUIMobileButtonBlock(
     primaryButtonLabel = "Label",
     primaryButtonOnClick = { /*TODO*/ },
@@ -132,7 +142,7 @@ fun TUIMobileButtonPreview2() {
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview3() {
+private fun TUIMobileButtonPreview3() {
   TUIMobileButtonBlock(
     primaryButtonLabel = "Label",
     primaryButtonOnClick = { /*TODO*/ },
@@ -144,7 +154,7 @@ fun TUIMobileButtonPreview3() {
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview4() {
+private fun TUIMobileButtonPreview4() {
   TUITheme {
     Column {
       TUIMobileButtonBlock(
@@ -167,7 +177,7 @@ fun TUIMobileButtonPreview4() {
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview5() {
+private fun TUIMobileButtonPreview5() {
   TUITheme {
     Column {
       TUIMobileButtonBlock(
@@ -184,7 +194,7 @@ fun TUIMobileButtonPreview5() {
 
 @Preview
 @Composable
-fun TUIMobileButtonPreview6() {
+private fun TUIMobileButtonPreview6() {
   TUITheme {
     Column {
       TUIMobileButtonBlock(
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt
index 9add9ce3..b6fe73cd 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt
@@ -16,7 +16,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.components.base.ButtonStyle
 import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error
 import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle
@@ -41,7 +40,7 @@ fun TUIMobileOverlayFooter(
   showMiddleDismiss: Boolean = true,
   onMiddleDismissClick: (() -> Unit)? = null,
   leftContent: (@Composable RowScope.() -> Unit)? = null,
-  rightContent: (@Composable RowScope.() -> Unit)? = null,
+  rightContent: (@Composable RowScope.() -> Unit)? = null
 ) {
   Row(
     modifier
@@ -52,11 +51,13 @@ fun TUIMobileOverlayFooter(
   ) {
     leftContent?.invoke(this)
     Spacer(modifier = Modifier.weight(1f))
-    if (showMiddleDismiss) TUIIconButton(
-      icon = TarkaIcons.Regular.Dismiss24,
-      iconButtonStyle = IconButtonStyle.Ghost,
-      onIconClick = { onMiddleDismissClick?.invoke() }
-    )
+    if (showMiddleDismiss) {
+      TUIIconButton(
+        icon = TarkaIcons.Regular.Dismiss24,
+        iconButtonStyle = IconButtonStyle.Ghost,
+        onIconClick = { onMiddleDismissClick?.invoke() }
+      )
+    }
     Spacer(modifier = Modifier.weight(1f))
     rightContent?.invoke(this)
   }
@@ -65,7 +66,7 @@ fun TUIMobileOverlayFooter(
 @Preview(showBackground = true)
 @Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-fun TUIMobileOverlayFooterPreview() {
+private fun TUIMobileOverlayFooterPreview() {
   TUITheme {
     Column(
       modifier = Modifier
@@ -89,7 +90,7 @@ fun TUIMobileOverlayFooterPreview() {
       )
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
-        showMiddleDismiss = true,
+        showMiddleDismiss = true
       )
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
@@ -147,7 +148,7 @@ fun TUIMobileOverlayFooterPreview() {
         }
       )
       TUIMobileOverlayFooter(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier.fillMaxWidth()
       )
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
@@ -163,7 +164,7 @@ fun TUIMobileOverlayFooterPreview() {
           TUIButton(
             label = "Delete",
             onClick = {},
-            buttonStyle = ButtonStyle.Error
+            buttonStyle = Error
           )
         }
       )
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayHeader.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayHeader.kt
index d241cb89..27a6e6cd 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayHeader.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayHeader.kt
@@ -52,7 +52,7 @@ sealed class TUIMobileOverlayHeaderStyle {
   /**
    * No additional header content.
    */
-  object None : TUIMobileOverlayHeaderStyle()
+  data object None : TUIMobileOverlayHeaderStyle()
 
   /**
    * Header style with a title.
@@ -73,7 +73,7 @@ sealed class TUIMobileOverlayHeaderStyle {
     val trailingIcon: TarkaIcon,
     val onTrailingIconClick: () -> Unit,
     val menuItemList: List<TUIPopUpMenu>? = null,
-    val onMenuItemClick: ((TUIPopUpMenu) -> Unit)? = null,
+    val onMenuItemClick: ((TUIPopUpMenu) -> Unit)? = null
   ) : TUIMobileOverlayHeaderStyle()
 
   /**
@@ -82,9 +82,8 @@ sealed class TUIMobileOverlayHeaderStyle {
    * @property title The title text to be displayed.
    * @property onBackIconClick The click listener for the back icon.
    */
-  data class HeaderWithBackIcon(
-    val title: String, val onBackIconClick: () -> Unit
-  ) : TUIMobileOverlayHeaderStyle()
+  data class HeaderWithBackIcon(val title: String, val onBackIconClick: () -> Unit) :
+    TUIMobileOverlayHeaderStyle()
 }
 
 /**
@@ -100,7 +99,6 @@ fun TUIMobileOverlayHeader(
   style: TUIMobileOverlayHeaderStyle,
   tags: TUIMobileOverlayHeaderTags = TUIMobileOverlayHeaderTags()
 ) {
-
   val height = when (style) {
     is None -> 24.dp
     else -> 64.dp
@@ -183,7 +181,7 @@ fun TUIMobileOverlayHeader(
                 onDismissRequest = { expanded = false },
                 modifier = Modifier
                   .background(TUITheme.colors.surface)
-                  .align(Alignment.TopEnd),
+                  .align(Alignment.TopEnd)
               ) {
                 style.menuItemList?.forEach { item ->
                   TUIMobileOverlayMenuItem(
@@ -231,8 +229,10 @@ fun TUIMobileOverlayHeader(
 data class TUIMobileOverlayHeaderTags(
   val parentTag: String = "TUIMobileOverlayHeader_Parent",
   val dividerTag: String = "TUIMobileOverlayHeader_Divider",
-  val leadingIconButtonTag: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUIMobileOverlayHeader_LeadingIcon"),
-  val trailingIconButtonTag: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUIMobileOverlayHeader_TrailingIcon"),
+  val leadingIconButtonTag: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUIMobileOverlayHeader_LeadingIcon"),
+  val trailingIconButtonTag: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUIMobileOverlayHeader_TrailingIcon")
 )
 
 @Composable
@@ -248,7 +248,7 @@ private fun HeaderText(title: String, textAlign: TextAlign, modifier: Modifier)
 
 @Preview(showBackground = true)
 @Composable
-fun TUIMobileOverlayHeaderPreview() {
+private fun TUIMobileOverlayHeaderPreview() {
   TUITheme {
     Column(
       Modifier
@@ -256,16 +256,19 @@ fun TUIMobileOverlayHeaderPreview() {
         .background(TUITheme.colors.surface)
     ) {
       TUIMobileOverlayHeader(
-        modifier = Modifier.fillMaxWidth(), style = None
+        modifier = Modifier.fillMaxWidth(),
+        style = None
       )
       VerticalSpacer(space = 10)
       TUIMobileOverlayHeader(
-        modifier = Modifier.fillMaxWidth(), style = HeaderWithTitle("Select Asset")
+        modifier = Modifier.fillMaxWidth(),
+        style = HeaderWithTitle("Select Asset")
       )
       VerticalSpacer(space = 10)
       TUIMobileOverlayHeader(
         modifier = Modifier.fillMaxWidth(),
-        style = HeaderWithTrailingIcon(title = "Select Asset",
+        style = HeaderWithTrailingIcon(
+          title = "Select Asset",
           trailingIcon = TarkaIcons.Regular.MoreHorizontal24,
           onTrailingIconClick = {}
         )
@@ -277,6 +280,5 @@ fun TUIMobileOverlayHeaderPreview() {
       )
       VerticalSpacer(space = 10)
     }
-
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayMenuItem.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayMenuItem.kt
index 008f67de..4c4d5019 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayMenuItem.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayMenuItem.kt
@@ -14,7 +14,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
@@ -41,16 +40,16 @@ import com.tarkalabs.tarkaui.theme.TUITheme
 
 sealed class MobileOverlayMenuItemLeadingContentType {
   data class Icon(val icon: TarkaIcon) : MobileOverlayMenuItemLeadingContentType()
-  object StatusIndicator : MobileOverlayMenuItemLeadingContentType()
+  data object StatusIndicator : MobileOverlayMenuItemLeadingContentType()
 }
 
 sealed class MobileOverlayMenuItemTrailingContentType {
   data class Icon(val icon: TarkaIcon) : MobileOverlayMenuItemTrailingContentType()
-  object SubMobileOverlayMenu : MobileOverlayMenuItemTrailingContentType()
+  data object SubMobileOverlayMenu : MobileOverlayMenuItemTrailingContentType()
 }
 
 sealed class MobileOverlayMenuItemStyle {
-  object Title : MobileOverlayMenuItemStyle()
+  data object Title : MobileOverlayMenuItemStyle()
   data class TitleWithDescription(val description: String) : MobileOverlayMenuItemStyle()
 }
 
@@ -76,7 +75,6 @@ sealed class MobileOverlayMenuItemStyle {
   onMobileOverlayMenuItemClick: () -> Unit,
   tags: TUIMobileOverlayMenuItemTags = TUIMobileOverlayMenuItemTags()
 ) {
-
   val bgColor = if (isSelected) TUITheme.colors.success10 else Color.Transparent
   val rippleColor = if (isSelected) TUITheme.colors.success20 else TUITheme.colors.surfaceHover
 
@@ -103,7 +101,6 @@ sealed class MobileOverlayMenuItemStyle {
             .background(color = TUITheme.colors.success)
         )
       }
-
     }
   } else {
     {
@@ -111,7 +108,9 @@ sealed class MobileOverlayMenuItemStyle {
     }
   }
 
-  val trailingContentLambda: (@Composable () -> Unit)? = if (trailingContent != null && style is Title) {
+  val trailingContentLambda: (@Composable () -> Unit)? = if (trailingContent != null &&
+    style is Title
+  ) {
     {
       val trailingContentModifier = Modifier
         .padding(start = 8.dp, end = 8.dp)
@@ -136,7 +135,9 @@ sealed class MobileOverlayMenuItemStyle {
         }
       }
     }
-  } else null
+  } else {
+    null
+  }
 
   val height = when {
     leadingContent != null && trailingContent != null -> if (isSelected) 40 else 38
@@ -158,7 +159,7 @@ sealed class MobileOverlayMenuItemStyle {
       )
       .testTag(tags.parentTag),
     verticalAlignment = Alignment.CenterVertically,
-    horizontalArrangement = Arrangement.SpaceBetween,
+    horizontalArrangement = Arrangement.SpaceBetween
   ) {
     leadingIconLambda()
     Column(
@@ -169,7 +170,8 @@ sealed class MobileOverlayMenuItemStyle {
       when (style) {
         Title -> TUIMobileOverlayMenuItemTitle(title)
         is TitleWithDescription -> TUIMenuItemTitleWithDescription(
-          title = title, description = style.description
+          title = title,
+          description = style.description
         )
       }
     }
@@ -184,16 +186,20 @@ sealed class MobileOverlayMenuItemStyle {
   Text(
     text = title,
     style = TUITheme.typography.body7,
-    color = TUITheme.colors.onSurface,
+    color = TUITheme.colors.onSurface
   )
 }
 
 @Composable private fun TUIMenuItemTitleWithDescription(title: String, description: String) {
   Text(
-    text = title, style = TUITheme.typography.heading6, color = TUITheme.colors.onSurface
+    text = title,
+    style = TUITheme.typography.heading6,
+    color = TUITheme.colors.onSurface
   )
   Text(
-    text = description, style = TUITheme.typography.body7, color = TUITheme.colors.onSurface
+    text = description,
+    style = TUITheme.typography.body7,
+    color = TUITheme.colors.onSurface
   )
 }
 
@@ -203,7 +209,8 @@ data class TUIMobileOverlayMenuItemTags(
   val trailingContentTag: String = "TUIMobileOverlayMenuItem_TrailingContent"
 )
 
-@Preview @Composable fun PreviewTUIMobileOverlayMenuItem() {
+@Preview @Composable
+private fun PreviewTUIMobileOverlayMenuItem() {
   TUITheme {
     Column(
       modifier = Modifier
@@ -292,9 +299,8 @@ data class TUIMobileOverlayMenuItemTags(
         style = TitleWithDescription("Label"),
         onMobileOverlayMenuItemClick = {},
         isSelected = false,
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier.fillMaxWidth()
       )
-
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUINavigationRows.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUINavigationRows.kt
index 9821e9f2..a1f0c8db 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUINavigationRows.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUINavigationRows.kt
@@ -64,27 +64,31 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   isSelected: Boolean = false,
   tags: TUINavigationRowTags = TUINavigationRowTags(),
   onClick: () -> Unit,
-  content: (@Composable RowScope.() -> Unit)? = null,
+  content: (@Composable RowScope.() -> Unit)? = null
 ) {
-
   Surface(
     color = if (isSelected) TUITheme.colors.primaryAlt else TUITheme.colors.surface,
     modifier = Modifier.fillMaxWidth(),
     shape = if (isSelected) RoundedCornerShape(8.dp) else RectangleShape
   ) {
-    Row(modifier = modifier
-      .clickable { onClick() }
-      .defaultMinSize(minHeight = 40.dp)
-      .padding(8.dp)
-      .testTag(tags.parentTag), verticalAlignment = Alignment.CenterVertically) {
-      if (leadingIcon != null) Icon(
-        modifier = Modifier
-          .size(24.dp)
-          .testTag(tags.leadingIconTag),
-        painter = painterResource(id = leadingIcon.iconRes),
-        contentDescription = leadingIcon.contentDescription,
-        tint = if (isSelected) TUITheme.colors.onSecondaryAlt else TUITheme.colors.secondary
-      )
+    Row(
+      modifier = modifier
+        .clickable { onClick() }
+        .defaultMinSize(minHeight = 40.dp)
+        .padding(8.dp)
+        .testTag(tags.parentTag),
+      verticalAlignment = Alignment.CenterVertically
+    ) {
+      if (leadingIcon != null) {
+        Icon(
+          modifier = Modifier
+            .size(24.dp)
+            .testTag(tags.leadingIconTag),
+          painter = painterResource(id = leadingIcon.iconRes),
+          contentDescription = leadingIcon.contentDescription,
+          tint = if (isSelected) TUITheme.colors.onSecondaryAlt else TUITheme.colors.secondary
+        )
+      }
       Text(
         text = title,
         modifier = Modifier
@@ -112,26 +116,25 @@ data class TUINavigationRowTags(
   val rightArrowTag: String = "TUINavigationRow_TrailingIcon"
 )
 
-@Preview(showBackground = true) @Composable fun TUINavigationRowPreview() {
+@Preview(showBackground = true)
+@Composable
+private fun TUINavigationRowPreview() {
   Column {
     TUINavigationRow(
       title = "Label",
       leadingIcon = Regular.Call20,
       onClick = {
-
-      },
+      }
     ) {
       Text(text = "NILESH")
     }
 
-
     TUINavigationRow(
       title = "Label",
       isSelected = true,
       leadingIcon = Regular.Call20,
       onClick = {
-
-      },
+      }
     ) {
       Text(text = "NILESH")
     }
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIPlayPauseButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIPlayPauseButton.kt
index 37807cb9..14ba180f 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIPlayPauseButton.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIPlayPauseButton.kt
@@ -44,16 +44,16 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  * How to use TUIPlayPauseButtons() composable function
  *
  * TYPE 1 (LARGE):
-     TUIPlayPauseButtons(
-      modifier = Modifier.padding(top = 16.dp),
-      buttonType = NON_HOVER, buttonSize = L, state = Play
-    )
+TUIPlayPauseButtons(
+modifier = Modifier.padding(top = 16.dp),
+buttonType = NON_HOVER, buttonSize = L, state = Play
+)
  *
  * TYPE 2 (MEDIUM):
-     TUIPlayPauseButtons(
-      modifier = Modifier.padding(top = 16.dp),
-      buttonType = HOVER, buttonSize = M, state = Pause
-    )
+TUIPlayPauseButtons(
+modifier = Modifier.padding(top = 16.dp),
+buttonType = HOVER, buttonSize = M, state = Pause
+)
  *
  */
 @Composable fun TUIPlayPauseButton(
@@ -61,9 +61,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   buttonSize: PlayPauseButtonSize = M,
   state: PlayPauseButtonState = Play,
   tags: TUIPlayPauseButtonsTestTags = TUIPlayPauseButtonsTestTags(),
-  onClick: () -> Unit,
+  onClick: () -> Unit
 ) {
-
   val iconModifier = when (buttonSize) {
     L -> Modifier.sizeIn(maxHeight = 24.dp, maxWidth = 24.dp)
     M -> Modifier.sizeIn(maxHeight = 16.dp, maxWidth = 16.dp)
@@ -89,10 +88,11 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       .testTag(tags.parentId)
       .clip(RoundedCornerShape(size = 44.dp))
       .background(color = TUITheme.colors.constantDark.copy(alpha = 0.75f))
-      .clickable { onClick.invoke() }, contentAlignment = Alignment.Center
+      .clickable { onClick.invoke() },
+    contentAlignment = Alignment.Center
   ) {
     Box(
-      modifier = contentModifier,
+      modifier = contentModifier
     ) {
       Icon(
         modifier = iconModifier,
@@ -114,11 +114,10 @@ enum class PlayPauseButtonState {
   Pause
 }
 
-data class TUIPlayPauseButtonsTestTags(
-  val parentId: String = "TUIPlayPauseButtons",
-)
+data class TUIPlayPauseButtonsTestTags(val parentId: String = "TUIPlayPauseButtons")
 
-@Preview @Composable fun TUIPlayPauseButtonPreview() {
+@Preview @Composable
+private fun TUIPlayPauseButtonPreview() {
   Row(
     modifier = Modifier
       .padding(15.dp)
@@ -132,10 +131,14 @@ data class TUIPlayPauseButtonsTestTags(
       horizontalAlignment = Alignment.Start
     ) {
       TUIPlayPauseButton(
-        modifier = Modifier.padding(top = 16.dp), buttonSize = L, state = Play
+        modifier = Modifier.padding(top = 16.dp),
+        buttonSize = L,
+        state = Play
       ) {}
       TUIPlayPauseButton(
-        modifier = Modifier.padding(top = 16.dp), buttonSize = M, state = Play
+        modifier = Modifier.padding(top = 16.dp),
+        buttonSize = M,
+        state = Play
       ) {}
     }
 
@@ -145,10 +148,14 @@ data class TUIPlayPauseButtonsTestTags(
       horizontalAlignment = Alignment.Start
     ) {
       TUIPlayPauseButton(
-        modifier = Modifier.padding(top = 16.dp), buttonSize = L, state = Pause
+        modifier = Modifier.padding(top = 16.dp),
+        buttonSize = L,
+        state = Pause
       ) {}
       TUIPlayPauseButton(
-        modifier = Modifier.padding(top = 16.dp), buttonSize = M, state = Pause
+        modifier = Modifier.padding(top = 16.dp),
+        buttonSize = M,
+        state = Pause
       ) {}
     }
   }
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt
index e1629c42..a1115184 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt
@@ -35,18 +35,26 @@ import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 import kotlinx.coroutines.delay
 
-@OptIn(ExperimentalMaterial3Api::class) @Composable fun TUISearchBar(
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TUISearchBar(
   modifier: Modifier = Modifier,
   query: String,
   placeholder: String,
-  trailingIcon: TarkaIcon = TarkaIcons.Regular.Dismiss24,
+  hasBarcode: Boolean = false,
+  trailingIcon: TarkaIcon? = if (hasBarcode) {
+    TarkaIcons.Regular.BarcodeScanner24
+  } else {
+    TarkaIcons.Regular.Dismiss24
+  },
   keyboardOption: KeyboardOptions = KeyboardOptions.Default,
   keyboardAction: KeyboardActions = KeyboardActions.Default,
   onQueryTextChange: (String) -> Unit,
   leadingIcon: TarkaIcon? = null,
   onLeadingIconClick: (() -> Unit)? = null,
+  onTrailingIconClick: (() -> Unit)? = null,
   isInitialAutoFocus: Boolean = true,
-  searchBarTags: TUISearchBarTags = TUISearchBarTags(),
+  searchBarTags: TUISearchBarTags = TUISearchBarTags()
 ) {
   val focusRequester = remember { FocusRequester() }
 
@@ -60,22 +68,48 @@ import kotlinx.coroutines.delay
   val leadingIconLambda: @Composable (() -> Unit)? = if (leadingIcon != null) {
     {
       TUIIconButton(
-        icon = leadingIcon, buttonSize = L, iconButtonStyle = Ghost, onIconClick = {
+        icon = leadingIcon,
+        buttonSize = L,
+        iconButtonStyle = Ghost,
+        onIconClick = {
           onLeadingIconClick?.invoke()
-        }, tags = searchBarTags.leadingIconTags
+        },
+        tags = searchBarTags.leadingIconTags
       )
     }
-  } else null
+  } else {
+    null
+  }
 
-  val trailingIconLambda: @Composable (() -> Unit)? = if (query.isNotEmpty()) {
-    {
+  val trailingIconLambda: @Composable () -> Unit = {
+    if (query.isNotEmpty()) {
       TUIIconButton(
-        icon = trailingIcon, buttonSize = L, iconButtonStyle = Ghost, onIconClick = {
+        icon = TarkaIcons.Regular.Dismiss24,
+        buttonSize = L,
+        iconButtonStyle = Ghost,
+        onIconClick = {
           onQueryTextChange.invoke("")
-        }, tags = searchBarTags.trailingIconTags
+        },
+        tags = searchBarTags.trailingIconTags
       )
+    } else {
+      if (trailingIcon == TarkaIcons.Regular.Dismiss24) {
+        null
+      } else {
+        if (trailingIcon != null) {
+          TUIIconButton(
+            icon = trailingIcon,
+            buttonSize = L,
+            iconButtonStyle = Ghost,
+            onIconClick = {
+              onTrailingIconClick?.invoke()
+            },
+            tags = searchBarTags.trailingIconTags
+          )
+        }
+      }
     }
-  } else null
+  }
   val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 
   BasicTextField(
@@ -100,7 +134,10 @@ import kotlinx.coroutines.delay
       visualTransformation = VisualTransformation.None,
       interactionSource = interactionSource,
       contentPadding = TextFieldDefaults.contentPaddingWithoutLabel(
-        top = 0.dp, bottom = 0.dp, end = 10.dp, start = 10.dp
+        top = 0.dp,
+        bottom = 0.dp,
+        end = 10.dp,
+        start = 20.dp
       ),
       colors = TextFieldDefaults.colors(
         cursorColor = TUITheme.colors.inputText,
@@ -111,23 +148,27 @@ import kotlinx.coroutines.delay
         focusedIndicatorColor = Color.Transparent,
         unfocusedIndicatorColor = Color.Transparent,
         focusedContainerColor = TUITheme.colors.inputBackground,
-        unfocusedContainerColor = TUITheme.colors.inputBackground,
+        unfocusedContainerColor = TUITheme.colors.inputBackground
       ),
       shape = RoundedCornerShape(75.dp),
       placeholder = { Text(text = placeholder) },
       leadingIcon = leadingIconLambda,
-      trailingIcon = trailingIconLambda,
+      trailingIcon = trailingIconLambda
     )
   }
 }
 
 data class TUISearchBarTags(
   val parentTag: String = "TUISearchBar",
-  val leadingIconTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUISearchBar_LeadingIcon"),
-  val trailingIconTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUISearchBar_TrailingIcon")
+  val leadingIconTags: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUISearchBar_LeadingIcon"),
+  val trailingIconTags: TUIIconButtonTags =
+    TUIIconButtonTags(parentTag = "TUISearchBar_TrailingIcon")
 )
 
-@Preview(showBackground = true, showSystemUi = true) @Composable fun Preview() {
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+private fun TUISearchBarPreview() {
   TUITheme {
     Column(
       modifier = Modifier.padding(20.dp)
@@ -139,7 +180,7 @@ data class TUISearchBarTags(
         trailingIcon = TarkaIcons.Filled.Dismiss16,
         leadingIcon = TarkaIcons.Regular.BarcodeScanner24,
         onLeadingIconClick = {},
-        modifier = Modifier.padding(10.dp),
+        modifier = Modifier.padding(10.dp)
       )
 
       TUISearchBar(
@@ -149,9 +190,8 @@ data class TUISearchBarTags(
         trailingIcon = TarkaIcons.Filled.Dismiss16,
         leadingIcon = TarkaIcons.Regular.BarcodeScanner24,
         onLeadingIconClick = {},
-        modifier = Modifier.padding(10.dp),
+        modifier = Modifier.padding(10.dp)
       )
     }
   }
-}
-
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISnackBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISnackBar.kt
index 2325f4e4..b4576d61 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISnackBar.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISnackBar.kt
@@ -45,11 +45,9 @@ fun rememberTUISnackBarState(
   key: String? = null,
   hostState: SnackbarHostState = SnackbarHostState(),
   type: TUISnackBarType = Information,
-  leadingIcon: TarkaIcon? = null,
-): TUISnackBarState {
-  return rememberSaveable(key = key, saver = TUISnackBarState.Saver) {
-    TUISnackBarState(hostState, type, leadingIcon)
-  }
+  leadingIcon: TarkaIcon? = null
+): TUISnackBarState = rememberSaveable(key = key, saver = TUISnackBarState.Saver) {
+  TUISnackBarState(hostState, type, leadingIcon)
 }
 
 /**
@@ -62,18 +60,22 @@ fun rememberTUISnackBarState(
 class TUISnackBarState(
   hostState: SnackbarHostState = SnackbarHostState(),
   type: TUISnackBarType = Information,
-  leadingIcon: TarkaIcon? = null,
+  leadingIcon: TarkaIcon? = null
 ) {
 
   companion object {
     val Saver = listSaver(save = {
       listOf(it.type, it.leadingIcon)
     }, restore = {
-      TUISnackBarState(it[0] as SnackbarHostState, it[1] as TUISnackBarType, it[2] as TarkaIcon?)
+      TUISnackBarState(
+        it[0] as SnackbarHostState,
+        it[1] as TUISnackBarType,
+        it[2] as TarkaIcon?
+      )
     })
   }
 
-  internal val hostState: SnackbarHostState by mutableStateOf(hostState)
+  val hostState: SnackbarHostState by mutableStateOf(hostState)
   var type: TUISnackBarType by mutableStateOf(type)
   var leadingIcon: TarkaIcon? by mutableStateOf(leadingIcon)
 
@@ -101,7 +103,13 @@ class TUISnackBarState(
     message: String,
     actionLabel: String? = null,
     withDismissAction: Boolean = false,
-    duration: SnackbarDuration = if (actionLabel == null) SnackbarDuration.Short else SnackbarDuration.Indefinite
+    duration: SnackbarDuration = if (actionLabel ==
+      null
+    ) {
+      SnackbarDuration.Short
+    } else {
+      SnackbarDuration.Indefinite
+    }
   ): SnackbarResult {
     hostState.currentSnackbarData?.dismiss()
     return hostState.showSnackbar(message, actionLabel, withDismissAction, duration)
@@ -119,11 +127,11 @@ class TUISnackBarState(
 fun TUISnackBarHost(
   state: TUISnackBarState,
   modifier: Modifier = Modifier,
-  tags: TUISnackBarTags = TUISnackBarTags(),
+  tags: TUISnackBarTags = TUISnackBarTags()
 ) {
   SnackbarHost(
     modifier = modifier,
-    hostState = state.hostState,
+    hostState = state.hostState
   ) { snackbarData: SnackbarData ->
     TUISnackBar(
       modifier = Modifier.padding(5.dp),
@@ -151,13 +159,13 @@ fun TUISnackBarHost(
  *  How to use TUISnackBar() composable function
  *
  *   TUISnackBar(
-      message = "Task completed successfully!",
-      type = Success,
-      leadingIcon = TarkaIcon.Success,
-      actionLabel = "Dismiss",
-      tags = TUISnackBarTags(parentTag = "example_snackbar"),
-      action = { /* Perform action on dismiss */ }
-    )
+message = "Task completed successfully!",
+type = Success,
+leadingIcon = TarkaIcon.Success,
+actionLabel = "Dismiss",
+tags = TUISnackBarTags(parentTag = "example_snackbar"),
+action = { /* Perform action on dismiss */ }
+)
  */
 @Composable
 internal fun TUISnackBar(
@@ -167,7 +175,7 @@ internal fun TUISnackBar(
   leadingIcon: TarkaIcon? = null,
   actionLabel: String? = null,
   tags: TUISnackBarTags = TUISnackBarTags(),
-  action: () -> Unit = {},
+  action: () -> Unit = {}
 ) {
   var containerColor = TUITheme.colors.secondary
   var textColor = TUITheme.colors.onSecondary
@@ -192,7 +200,6 @@ internal fun TUISnackBar(
       textColor = TUITheme.colors.onError
       containerColor = TUITheme.colors.error
     }
-
   }
 
   Box(
@@ -205,7 +212,7 @@ internal fun TUISnackBar(
       modifier = Modifier
         .testTag(tags.parentTag),
       verticalAlignment = Alignment.CenterVertically,
-      horizontalArrangement = Arrangement.Center,
+      horizontalArrangement = Arrangement.Center
     ) {
       if (leadingIcon != null) {
         Icon(
@@ -232,36 +239,38 @@ internal fun TUISnackBar(
             .padding(start = 24.dp),
           onClick = action,
           colors = ButtonDefaults.buttonColors(
-            contentColor = containerColor, containerColor = textColor
+            contentColor = containerColor,
+            containerColor = textColor
           ),
           contentPadding = PaddingValues(1.dp)
         ) {
           Text(
             modifier = Modifier.padding(horizontal = 17.dp),
-            text = actionLabel, style = TUITheme.typography.body7)
+            text = actionLabel,
+            style = TUITheme.typography.body7
+          )
         }
       }
     }
-
   }
 }
 
 data class TUISnackBarTags(
   val parentTag: String = "TUISnackBar",
   val leadingIconTag: String = "TUISnackBar_LeadingIcon",
-  val dismissActionTag: String = "TUISnackBar_DismissAction",
+  val dismissActionTag: String = "TUISnackBar_DismissAction"
 )
 
 enum class TUISnackBarType {
   Success,
   Information,
   Warning,
-  Error;
+  Error
 }
 
 @Preview
 @Composable
-fun TUIInformationSnackBarPreview() {
+private fun TUIInformationSnackBarPreview() {
   TUISnackBar(
     message = "Hello there, How are doing ? ",
     actionLabel = "dgsd",
@@ -272,24 +281,31 @@ fun TUIInformationSnackBarPreview() {
 
 @Preview
 @Composable
-fun TUISuccessSnackBarPreview() {
+private fun TUISuccessSnackBarPreview() {
   TUISnackBar(
-    message = "Hello there", actionLabel = "dgsd", leadingIcon = TarkaIcons.Regular.Delete24, type = Success
+    message = "Hello there",
+    actionLabel = "dgsd",
+    leadingIcon = TarkaIcons.Regular.Delete24,
+    type = Success
   )
 }
 
 @Preview
 @Composable
-fun TUIWarningSnackBarPreview() {
+private fun TUIWarningSnackBarPreview() {
   TUISnackBar(
-    message = "Hello there", actionLabel = "dgsd", leadingIcon = TarkaIcons.Regular.Delete24, type = Warning
+    message = "Hello there",
+    actionLabel = "dgsd",
+    leadingIcon = TarkaIcons.Regular.Delete24,
+    type = Warning
   )
 }
 
 @Preview
 @Composable
-fun TUIErrorSnackBarPreview() {
+private fun TUIErrorSnackBarPreview() {
   TUISnackBar(
-    message = "Hello there", type = TUISnackBarType.Error
+    message = "Hello there",
+    type = TUISnackBarType.Error
   )
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIStatusIndicator.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIStatusIndicator.kt
index 3870a00e..de629b2d 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIStatusIndicator.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIStatusIndicator.kt
@@ -41,7 +41,10 @@ enum class TUIStatus {
   tags: TUIStatusIndicatorTags = TUIStatusIndicatorTags()
 ) {
   val statusColor = if (status == ON) TUITheme.colors.success else TUITheme.colors.error
-  Row(modifier = modifier.testTag(tags.parentTag), verticalAlignment = Alignment.CenterVertically) {
+  Row(
+    modifier = modifier.testTag(tags.parentTag),
+    verticalAlignment = Alignment.CenterVertically
+  ) {
     Text(
       text = text,
       style = TUITheme.typography.button8,
@@ -60,14 +63,15 @@ enum class TUIStatus {
 
 data class TUIStatusIndicatorTags(
   val parentTag: String = "TUIStatusIndicator",
-  val circleTag: String = "TUIStatusIndicator_Cirlce",
+  val circleTag: String = "TUIStatusIndicator_Cirlce"
 )
 
-@Preview(showBackground = true) @Composable fun PreviewTUIStatus() {
+@Preview(showBackground = true)
+@Composable
+private fun PreviewTUIStatus() {
   Column {
     TUIStatusIndicator(text = "Connected", status = ON)
     VerticalSpacer(space = 10)
     TUIStatusIndicator(text = "Disconnected", status = OFF)
   }
-}
-
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITableCell.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITableCell.kt
index d1ae1335..05f7bddb 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITableCell.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITableCell.kt
@@ -39,7 +39,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   isHeader: Boolean,
   tags: TUITableCellTags = TUITableCellTags(),
   isTopBorderVisible: Boolean = false,
-  isBottomBorderVisible: Boolean = false,
+  isBottomBorderVisible: Boolean = false
 ) {
   val borderColor = TUITheme.colors.surfaceVariantHover
   Row(
@@ -72,21 +72,20 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         .fillMaxWidth(),
       style = TUITheme.typography.body7,
       text = cellValue,
-      color = if (isHeader)
+      color = if (isHeader) {
         TUITheme.colors.utilityDisabledContent
-      else
-        TUITheme.colors.onSurface,
+      } else {
+        TUITheme.colors.onSurface
+      }
     )
   }
 }
 
-data class TUITableCellTags(
-  val parentTag: String = "TUITableCell",
-)
+data class TUITableCellTags(val parentTag: String = "TUITableCell")
 
 @Preview(showBackground = true)
 @Composable
-fun PreviewTUITableCell() {
+private fun TUITableCellPreview() {
   TUITheme {
     Box {
       Column(modifier = Modifier.padding(10.dp)) {
@@ -180,13 +179,13 @@ fun PreviewTUITableCell() {
 }
 
 @Preview @Composable
-fun PreviewCombinedTUITableCell() {
+private fun CombinedTUITableCellPreview() {
   TUITheme(true) {
     Column(modifier = Modifier.padding(10.dp)) {
       Row(
         modifier = Modifier.height(Max),
         horizontalArrangement = Arrangement.Center,
-        verticalAlignment = Alignment.CenterVertically,
+        verticalAlignment = Alignment.CenterVertically
       ) {
         TUITableCell(
           modifier = Modifier
@@ -217,7 +216,7 @@ fun PreviewCombinedTUITableCell() {
         )
       }
       Row(
-        modifier = Modifier.height(Max),
+        modifier = Modifier.height(Max)
       ) {
         TUITableCell(
           modifier = Modifier
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITag.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITag.kt
index fea77dba..49f74bcd 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITag.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITag.kt
@@ -22,16 +22,16 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.icons.Circle12
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
-import com.tarkalabs.tarkaui.icons.Warning12
 import com.tarkalabs.tarkaui.components.TagSize.L
 import com.tarkalabs.tarkaui.components.TagSize.M
 import com.tarkalabs.tarkaui.components.TagSize.S
 import com.tarkalabs.tarkaui.components.TagType.CUSTOM
 import com.tarkalabs.tarkaui.components.TagType.HIGH
 import com.tarkalabs.tarkaui.components.TagType.LOW
+import com.tarkalabs.tarkaui.icons.Circle12
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
+import com.tarkalabs.tarkaui.icons.Warning12
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -89,9 +89,8 @@ fun TUITag(
   title: String?,
   trailingIcon: TarkaIcon? = null,
   tags: TUITagTestTags = TUITagTestTags(),
-  onClick: () -> Unit,
+  onClick: () -> Unit
 ) {
-
   val iconModifier = when (tagSize) {
     S -> Modifier.size(16.dp)
     M, L -> Modifier.size(20.dp)
@@ -134,10 +133,10 @@ fun TUITag(
   }
 
   Surface(
-     modifier = modifier
-       .clip(RoundedCornerShape(size = 4.dp))
-       .testTag(tags.parentTag)
-       .clickable { onClick.invoke() },
+    modifier = modifier
+      .clip(RoundedCornerShape(size = 4.dp))
+      .testTag(tags.parentTag)
+      .clickable { onClick.invoke() },
     color = backgroundColor
   ) {
     Box(modifier = Modifier.padding(contentPadding)) {
@@ -145,7 +144,6 @@ fun TUITag(
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
       ) {
-
         leadingIcon?.let {
           Icon(
             modifier = iconModifier,
@@ -163,7 +161,7 @@ fun TUITag(
             text = it,
             color = titleColor,
             style = titleStyle,
-            maxLines = 1,
+            maxLines = 1
           )
           HorizontalSpacer(horizontalSpace)
         }
@@ -176,7 +174,6 @@ fun TUITag(
             tint = iconTint ?: Color.Transparent
           )
         }
-
       }
     }
   }
@@ -185,52 +182,43 @@ fun TUITag(
 enum class TagSize(val size: Dp) {
   S(24.dp),
   M(32.dp),
-  L(40.dp),
+  L(40.dp)
 }
 
 sealed class TagType {
-  object HIGH : TagType()
-  object LOW : TagType()
-  data class CUSTOM(
-    val bgContentColor: Color,
-    val titleColor: Color,
-    val iconTint: Color?,
-  ) : TagType()
+  data object HIGH : TagType()
+  data object LOW : TagType()
+  data class CUSTOM(val bgContentColor: Color, val titleColor: Color, val iconTint: Color?) :
+    TagType()
 
   companion object {
     val defaultStyle: TagType = HIGH
   }
 }
 
-data class TUITagTestTags(
-  val parentTag: String = "Tag"
-)
+data class TUITagTestTags(val parentTag: String = "Tag")
 
 @Composable
 @Preview(showBackground = true)
-fun TUITagPreview() {
-
+private fun TUITagPreview() {
   TUITheme {
-
     Row(
       horizontalArrangement = Arrangement.Center,
       verticalAlignment = Alignment.Top,
       modifier = Modifier.padding(top = 10.dp)
     ) {
-
       HorizontalSpacer(space = 10)
 
       Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.Start
       ) {
-
         TUITag(
           title = "Label",
           tagType = HIGH,
           tagSize = S,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -240,7 +228,7 @@ fun TUITagPreview() {
           tagType = HIGH,
           tagSize = M,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -250,7 +238,7 @@ fun TUITagPreview() {
           tagType = HIGH,
           tagSize = L,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -260,7 +248,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = S,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -270,7 +258,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = M,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -280,7 +268,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = L,
           trailingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -294,7 +282,7 @@ fun TUITagPreview() {
           ),
           tagSize = S,
           trailingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -308,7 +296,7 @@ fun TUITagPreview() {
           ),
           tagSize = M,
           trailingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -322,9 +310,8 @@ fun TUITagPreview() {
           ),
           tagSize = L,
           trailingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
-
       }
 
       HorizontalSpacer(space = 35)
@@ -333,13 +320,12 @@ fun TUITagPreview() {
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.Start
       ) {
-
         TUITag(
           title = "Label",
           tagType = HIGH,
           tagSize = S,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -349,7 +335,7 @@ fun TUITagPreview() {
           tagType = HIGH,
           tagSize = M,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -359,7 +345,7 @@ fun TUITagPreview() {
           tagType = HIGH,
           tagSize = L,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -369,7 +355,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = S,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -379,7 +365,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = M,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -389,7 +375,7 @@ fun TUITagPreview() {
           tagType = LOW,
           tagSize = L,
           leadingIcon = TarkaIcons.Regular.Circle12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -403,7 +389,7 @@ fun TUITagPreview() {
             iconTint = TUITheme.colors.onWarning
           ),
           leadingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -417,7 +403,7 @@ fun TUITagPreview() {
             iconTint = TUITheme.colors.onWarning
           ),
           leadingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -431,9 +417,8 @@ fun TUITagPreview() {
             iconTint = TUITheme.colors.onWarning
           ),
           leadingIcon = TarkaIcons.Regular.Warning12,
-          onClick = {},
+          onClick = {}
         )
-
       }
 
       HorizontalSpacer(space = 35)
@@ -442,12 +427,11 @@ fun TUITagPreview() {
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.Start
       ) {
-
         TUITag(
           title = "Label",
           tagType = HIGH,
           tagSize = S,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -456,7 +440,7 @@ fun TUITagPreview() {
           title = "Label",
           tagType = HIGH,
           tagSize = M,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -465,7 +449,7 @@ fun TUITagPreview() {
           title = "Label",
           tagType = HIGH,
           tagSize = L,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -474,7 +458,7 @@ fun TUITagPreview() {
           title = "Label",
           tagType = LOW,
           tagSize = S,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -483,7 +467,7 @@ fun TUITagPreview() {
           title = "Label",
           tagType = LOW,
           tagSize = M,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -492,7 +476,7 @@ fun TUITagPreview() {
           title = "Label",
           tagType = LOW,
           tagSize = L,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -505,7 +489,7 @@ fun TUITagPreview() {
             iconTint = null
           ),
           tagSize = S,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -518,7 +502,7 @@ fun TUITagPreview() {
             iconTint = null
           ),
           tagSize = M,
-          onClick = {},
+          onClick = {}
         )
 
         VerticalSpacer(15)
@@ -531,7 +515,7 @@ fun TUITagPreview() {
             iconTint = null
           ),
           tagSize = L,
-          onClick = {},
+          onClick = {}
         )
         VerticalSpacer(15)
 
@@ -540,11 +524,11 @@ fun TUITagPreview() {
           tagType = CUSTOM(
             bgContentColor = TUITheme.colors.warning,
             titleColor = TUITheme.colors.onWarning,
-            iconTint =  TUITheme.colors.onWarning,
+            iconTint = TUITheme.colors.onWarning
           ),
           tagSize = L,
           onClick = {},
-          trailingIcon =  TarkaIcons.Regular.Warning12
+          trailingIcon = TarkaIcons.Regular.Warning12
         )
         VerticalSpacer(space = 10)
         TUITag(
@@ -552,18 +536,15 @@ fun TUITagPreview() {
           tagType = CUSTOM(
             bgContentColor = TUITheme.colors.warning,
             titleColor = TUITheme.colors.onWarning,
-            iconTint =  TUITheme.colors.onWarning,
+            iconTint = TUITheme.colors.onWarning
           ),
           tagSize = L,
           onClick = {},
-          leadingIcon =  TarkaIcons.Regular.Warning12
+          leadingIcon = TarkaIcons.Regular.Warning12
         )
-
       }
 
       HorizontalSpacer(space = 20)
-
     }
-
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt
index 3c79dda9..2f4a899c 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt
@@ -1,6 +1,5 @@
 package com.tarkalabs.tarkaui.components
 
-import android.util.Log
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
@@ -10,10 +9,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
@@ -42,7 +44,7 @@ import com.tarkalabs.tarkaui.components.base.TUIIconButton
 import com.tarkalabs.tarkaui.components.base.TUIIconButtonTags
 import com.tarkalabs.tarkaui.icons.Circle24
 import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
+import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -98,9 +100,8 @@ fun TUITextRow(
     menuItemList: List<TUIPopUpMenu>? = null,
     onMenuItemClick: ((TUIPopUpMenu) -> Unit)? = null,
     paddingValues: PaddingValues = PaddingValues(),
-    tags: TUITextRowTags = TUITextRowTags(),
+    tags: TUITextRowTags = TUITextRowTags()
 ) {
-
     var expanded by remember { mutableStateOf(false) }
 
     Row(
@@ -129,22 +130,25 @@ fun TUITextRow(
                     TUITextRowTitleWithNotAvailable(title, style)
                 }
             }
-
         }
         Row(verticalAlignment = Alignment.CenterVertically) {
-            if (iconOne != null) TUIIconButton(
-                icon = iconOne,
-                onIconClick = onIconOneClick,
-                iconButtonStyle = Ghost,
-                tags = tags.iconOneTags
-            )
-            if (iconTwo != null) TUIIconButton(
-                icon = iconTwo,
-                onIconClick = onIconTwoClick,
-                iconButtonStyle = Ghost,
-                tags = tags.iconTwoTags
+            if (iconOne != null) {
+                TUIIconButton(
+                    icon = iconOne,
+                    onIconClick = onIconOneClick,
+                    iconButtonStyle = Ghost,
+                    tags = tags.iconOneTags
+                )
+            }
+            if (iconTwo != null) {
+                TUIIconButton(
+                    icon = iconTwo,
+                    onIconClick = onIconTwoClick,
+                    iconButtonStyle = Ghost,
+                    tags = tags.iconTwoTags
 
-            )
+                )
+            }
             if (buttonTitle != null) {
                 OutlinedButton(
                     modifier = Modifier
@@ -164,14 +168,17 @@ fun TUITextRow(
                         tint = TUITheme.colors.utilityOutline,
                         modifier = Modifier
                             .then(
-                                if (onInfoIconClick == null && menuItemList.isNullOrEmpty()) Modifier else Modifier.clickable(
-                                    onClick = {
+                                if (onInfoIconClick == null && menuItemList.isNullOrEmpty()) {
+                                    Modifier
+                                } else {
+                                    Modifier.clickable(onClick = {
                                         if (!menuItemList.isNullOrEmpty()) {
                                             expanded = !expanded
                                         } else {
                                             onInfoIconClick?.invoke()
                                         }
                                     })
+                                }
                             )
                             .height(40.dp)
                             .width(24.dp)
@@ -182,7 +189,7 @@ fun TUITextRow(
                         onDismissRequest = { expanded = false },
                         modifier = Modifier
                             .background(TUITheme.colors.surface)
-                            .align(Alignment.TopEnd),
+                            .align(Alignment.TopEnd)
                     ) {
                         menuItemList?.forEach { item ->
                             TUIMobileOverlayMenuItem(
@@ -194,7 +201,9 @@ fun TUITextRow(
                                     onMenuItemClick?.invoke(item)
                                 },
                                 modifier = Modifier.defaultMinSize(minWidth = 160.dp),
-                                leadingContent = MobileOverlayMenuItemLeadingContentType.Icon(item.icon)
+                                leadingContent = MobileOverlayMenuItemLeadingContentType.Icon(
+                                    item.icon
+                                )
                             )
                         }
                     }
@@ -205,88 +214,84 @@ fun TUITextRow(
 }
 
 @Composable
-fun TUIDateStyle(
-    title: String,
-    style: DateStyle,
-) {
+fun TUIDateStyle(title: String, style: DateStyle) {
     Text(
         text = title,
         style = TUITheme.typography.body8,
         color = TUITheme.colors.inputTextDim
     )
     VerticalSpacer(space = 4)
-    Box(modifier = Modifier) {
-        val color = TUITheme.colors.utilityOutline
-        val pathEffect = PathEffect.dashPathEffect(floatArrayOf(4f, 4f), 0f)
+    if (style.startDate == null && style.endDate == null) {
+        Text(
+            text = stringResource(id = style.primaryNotAvailableText),
+            style = TUITheme.typography.body7,
+            color = TUITheme.colors.utilityDisabledContent,
+            modifier = Modifier
+        )
+    } else {
+        Row {
+            TUITextRowStepper()
+            Column {
+                Text(
+                    text = style.startDate ?: stringResource(id = style.primaryNotAvailableText),
+                    style = TUITheme.typography.body7,
+                    color = if (style.startDate != null) TUITheme.colors.onSurface else TUITheme.colors.utilityDisabledContent,
+                    modifier = Modifier.padding(start = 4.dp)
+                )
+                VerticalSpacer(5)
+                Text(
+                    text = style.endDate ?: stringResource(id = style.primaryNotAvailableText),
+                    style = TUITheme.typography.body7,
+                    color = if (style.endDate != null) TUITheme.colors.onSurface else TUITheme.colors.utilityDisabledContent,
+                    modifier = Modifier.padding(start = 4.dp)
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun TUITextRowStepper() {
+    val color = TUITheme.colors.utilityOutline
+    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(4f, 4f), 0f)
+    Box(
+        modifier = Modifier
+            .wrapContentWidth()
+            .height(40.dp)
+    ) {
+        Icon(
+            painter = painterResource(id = Regular.Circle24.iconRes),
+            contentDescription = Regular.Circle24.contentDescription,
+            modifier = Modifier
+                .height(18.dp)
+                .width(12.dp)
+                .align(Alignment.TopCenter),
+            tint = TUITheme.colors.utilityOutline
+
+        )
         Canvas(
-            Modifier
-                .width(0.dp)
-                .height(5.dp)
-                .align(Alignment.CenterStart)
+            modifier = Modifier
+                .size(10.dp, 12.dp)
+                .align(Alignment.Center)
+                .padding(vertical = 1.dp)
         ) {
             drawLine(
                 color = color,
-                start = Offset(16f, -2f),
-                end = Offset(16f, 20f),
+                start = Offset(x = size.width / 2, y = 0f),
+                end = Offset(x = size.width / 2, y = size.height),
+                strokeWidth = 2f,
                 pathEffect = pathEffect
             )
         }
-        Column(modifier = Modifier) {
-            Row {
-                Icon(
-                    painter = painterResource(id = TarkaIcons.Regular.Circle24.iconRes),
-                    contentDescription = TarkaIcons.Regular.Circle24.contentDescription,
-                    modifier = Modifier
-                        .height(18.dp)
-                        .width(12.dp)
-                        .align(Alignment.CenterVertically),
-                    tint = TUITheme.colors.utilityOutline
-                )
-                if (style.startDate == null) {
-                    Text(
-                        text = stringResource(id = style.primaryNotAvailableText),
-                        style = TUITheme.typography.body7,
-                        color = TUITheme.colors.utilityDisabledContent,
-                        modifier = Modifier.padding(start = 4.dp)
-                    )
-                } else {
-                    Text(
-                        text = style.startDate,
-                        style = TUITheme.typography.body7,
-                        color = TUITheme.colors.onSurface,
-                        modifier = Modifier.padding(start = 4.dp)
-                    )
-                }
-
-            }
-            Row {
-                Icon(
-                    painter = painterResource(id = TarkaIcons.Regular.Circle24.iconRes),
-                    contentDescription = TarkaIcons.Regular.Circle24.contentDescription,
-                    modifier = Modifier
-                        .height(18.dp)
-                        .width(12.dp)
-                        .align(Alignment.CenterVertically),
-                    tint = TUITheme.colors.utilityOutline
-                )
-                if (style.endDate == null) {
-                    Text(
-                        text = stringResource(id = style.primaryNotAvailableText),
-                        style = TUITheme.typography.body7,
-                        color = TUITheme.colors.utilityDisabledContent,
-                        modifier = Modifier.padding(start = 4.dp)
-                    )
-                } else {
-                    Text(
-                        text = style.endDate,
-                        style = TUITheme.typography.body7,
-                        color = TUITheme.colors.onSurface,
-                        modifier = Modifier.padding(start = 4.dp)
-                    )
-                }
-            }
-        }
-
+        Icon(
+            painter = painterResource(id = Regular.Circle24.iconRes),
+            contentDescription = Regular.Circle24.contentDescription,
+            modifier = Modifier
+                .height(18.dp)
+                .width(12.dp)
+                .align(Alignment.BottomCenter),
+            tint = TUITheme.colors.utilityOutline
+        )
     }
 }
 
@@ -315,9 +320,7 @@ private fun TUITextRowTitleWithDescription(title: String, style: TitleWithDescri
 }
 
 @Composable
-private fun TUITextRowTitleWithNotAvailable(
-    title: String, style: TitleWithNotAvailable
-) {
+private fun TUITextRowTitleWithNotAvailable(title: String, style: TitleWithNotAvailable) {
     Text(
         text = title,
         style = TUITheme.typography.body8,
@@ -338,11 +341,12 @@ sealed class TextRowStyle {
         val startDate: String? = null,
         val endDate: String? = null,
         @StringRes val primaryNotAvailableText: Int = R.string.not_availble,
+        @StringRes val secondaryNotAvailableText: Int = R.string.not_availble
     ) : TextRowStyle()
 
     data class TitleWithNotAvailable(val text: String) : TextRowStyle()
 
-    object Title : TextRowStyle()
+    data object Title : TextRowStyle()
 }
 
 interface TUIPopUpMenu {
@@ -356,18 +360,82 @@ data class TUITextRowTags(
     val iconOneTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITextRow_IconOne"),
     val iconTwoTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITextRow_IconTwo"),
     val buttonTag: String = "TUITextRow_Button",
-    val infoIconTag: String = "TUITextRow_InfoIcon",
+    val infoIconTag: String = "TUITextRow_InfoIcon"
 )
 
 @Preview(showBackground = true)
 @Composable
-fun TUITextRowPreview() {
+private fun TUITextRowPreview() {
+    TUITheme {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(20.dp)
+        ) {
+            TUITextRow(
+                title = "Duration",
+                style = DateStyle(
+                    null,
+                    null
+                ),
+                onTextRowClick = {
+                    println("TUITextRowPreview")
+                },
+                onInfoIconClick = null
+            )
 
-    TUITextRow(
-        title = "Duration", style = DateStyle(
-            null, "Jan 20 3000 friday march 32"
-        ), onTextRowClick = {
-            Log.d("TAG", "TUITextRowPreview: ")
-        }, onInfoIconClick = null
-    )
-}
+            VerticalSpacer(20)
+
+            TUITextRow(
+                title = "Duration",
+                style = DateStyle(
+                    "Jan 20 3000 friday march 32",
+                    "Jan 20 3000 friday march 32"
+                ),
+                onTextRowClick = {
+                    println("TUITextRowPreview")
+                },
+                onInfoIconClick = null
+            )
+            VerticalSpacer(20)
+
+            TUITextRow(
+                title = "Duration",
+                style = DateStyle(
+                    "Jan 20 3000 friday march 32",
+                    "Jan 20 3000 friday march 32"
+                ),
+                onTextRowClick = {
+                    println("TUITextRowPreview")
+                },
+                onInfoIconClick = null
+            )
+            VerticalSpacer(20)
+
+            TUITextRow(
+                title = "Duration",
+                style = DateStyle(
+                    null,
+                    "Jan 20 3000 friday march 32"
+                ),
+                onTextRowClick = {
+                    println("TUITextRowPreview")
+                },
+                onInfoIconClick = null
+            )
+            VerticalSpacer(20)
+
+            TUITextRow(
+                title = "Duration",
+                style = DateStyle(
+                    "Jan 20 3000 friday march 32",
+                    null
+                ),
+                onTextRowClick = {
+                    println("TUITextRowPreview")
+                },
+                onInfoIconClick = null
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIToggleSwitch.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIToggleSwitch.kt
index 2a3fd370..da7dab21 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIToggleSwitch.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIToggleSwitch.kt
@@ -25,10 +25,10 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.extentions.clickableWithoutRipple
 import com.tarkalabs.tarkaui.icons.Checkmark16
 import com.tarkalabs.tarkaui.icons.Dismiss16
 import com.tarkalabs.tarkaui.icons.TarkaIcons
-import com.tarkalabs.tarkaui.extentions.clickableWithoutRipple
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -89,7 +89,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       .width(40.dp)
       .height(24.dp)
       .background(shape = RoundedCornerShape(20.dp), color = switchBgColor)
-      .testTag(tags.parentTag),
+      .testTag(tags.parentTag)
   ) {
     Row(
       modifier = Modifier
@@ -108,21 +108,22 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       ) {
         Icon(
           modifier = Modifier,
-          painter = painterResource(if (isChecked) TarkaIcons.Filled.Checkmark16.iconRes else TarkaIcons.Regular.Dismiss16.iconRes),
+          painter = painterResource(
+            if (isChecked) TarkaIcons.Filled.Checkmark16.iconRes else TarkaIcons.Regular.Dismiss16.iconRes
+          ),
           contentDescription = null,
           tint = iconTint
         )
       }
-
     }
   }
 }
 
-data class TUIToggleSwitchTags(
-  val parentTag: String = "TUIToggleSwitchParentTag",
-)
+data class TUIToggleSwitchTags(val parentTag: String = "TUIToggleSwitchParentTag")
 
-@Preview(showBackground = true) @Composable fun TUIToggleSwitchPreview() {
+@Preview(showBackground = true)
+@Composable
+private fun TUIToggleSwitchPreview() {
   TUITheme {
     var isChecked by remember {
       mutableStateOf(true)
@@ -140,10 +141,12 @@ data class TUIToggleSwitchTags(
 
     Box(
       modifier = Modifier.fillMaxSize()
-        .background(color = TUITheme.colors.surface), contentAlignment = Alignment.Center
+        .background(color = TUITheme.colors.surface),
+      contentAlignment = Alignment.Center
     ) {
       Column(
-        horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
       ) {
         TUIToggleSwitch(isChecked = isChecked, enabled = true) {
           isChecked = !isChecked
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIAvatar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIAvatar.kt
index 88302b80..049b244e 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIAvatar.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIAvatar.kt
@@ -19,9 +19,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.tarkalabs.tarkaui.icons.Search24
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.base.AvatarSize.L
 import com.tarkalabs.tarkaui.components.base.AvatarSize.M
 import com.tarkalabs.tarkaui.components.base.AvatarSize.S
@@ -31,6 +28,9 @@ import com.tarkalabs.tarkaui.components.base.AvatarSize.XXL
 import com.tarkalabs.tarkaui.components.base.AvatarType.Icon
 import com.tarkalabs.tarkaui.components.base.AvatarType.Image
 import com.tarkalabs.tarkaui.components.base.AvatarType.Text
+import com.tarkalabs.tarkaui.icons.Search24
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 enum class AvatarSize(val size: Dp) {
@@ -46,8 +46,10 @@ enum class AvatarSize(val size: Dp) {
 sealed class AvatarType {
   @Stable
   data class Icon(val icon: TarkaIcon) : AvatarType()
+
   @Stable
   data class Text(val text: String) : AvatarType()
+
   @Stable
   data class Image(val image: ImageBitmap) : AvatarType()
 }
@@ -119,12 +121,11 @@ fun TUIAvatar(
 }
 
 @Composable
-private fun badgeSizeFor(avatarSize: AvatarSize) =
-  when (avatarSize) {
-    XS, M, S -> BadgeSize.S
-    L -> BadgeSize.M
-    XXL, XL -> BadgeSize.L
-  }
+private fun badgeSizeFor(avatarSize: AvatarSize) = when (avatarSize) {
+  XS, M, S -> BadgeSize.S
+  L -> BadgeSize.M
+  XXL, XL -> BadgeSize.L
+}
 
 @Composable
 private fun iconSizeFor(size: AvatarSize) = when (size) {
@@ -145,12 +146,12 @@ private fun typographyFor(size: AvatarSize) = when (size) {
 
 data class TUIAvatarTags(
   val parentTag: String = "TUIAvatar",
-  val badgeTag: String = "TUIAvatar_Badge",
+  val badgeTag: String = "TUIAvatar_Badge"
 )
 
 @Composable
 @Preview(showBackground = true)
-fun TUIAvatarIconPreview() {
+private fun TUIAvatarIconPreview() {
   TUIAvatar(
     avatarType = Icon(TarkaIcons.Regular.Search24),
     avatarSize = L
@@ -159,9 +160,9 @@ fun TUIAvatarIconPreview() {
 
 @Composable
 @Preview(showBackground = true)
-fun TUIAvatarTextPreview() {
+private fun TUIAvatarTextPreview() {
   TUIAvatar(
     avatarType = Text(text = "TUK"),
-    avatarSize = L,
+    avatarSize = L
   )
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIBadge.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIBadge.kt
index 9341a676..5d510d81 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIBadge.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIBadge.kt
@@ -57,7 +57,6 @@ sealed class BadgeStyle {
   tags: TUIBadgeTags = TUIBadgeTags(),
   color: Color = TUITheme.colors.error
 ) {
-
   val textStyle = when (badgeSize) {
     S, M -> TUITheme.typography.button8
     L -> TUITheme.typography.button7
@@ -69,7 +68,7 @@ sealed class BadgeStyle {
       .testTag(tags.parentTag)
       .clip(CircleShape)
       .background(color),
-    contentAlignment = Alignment.Center,
+    contentAlignment = Alignment.Center
   ) {
     when (style) {
       is BadgeStyle.Count -> {
@@ -81,7 +80,7 @@ sealed class BadgeStyle {
             textAlign = TextAlign.Center,
             text = style.count.toString(),
             style = textStyle,
-            color = TUITheme.colors.onTertiary,
+            color = TUITheme.colors.onTertiary
           )
         }
       }
@@ -100,12 +99,11 @@ sealed class BadgeStyle {
   }
 }
 
-data class TUIBadgeTags(
-  val parentTag: String = "TUIBadge",
-  val iconTag: String = "BadgeIcon",
-)
+data class TUIBadgeTags(val parentTag: String = "TUIBadge", val iconTag: String = "BadgeIcon")
 
-@Preview(showBackground = true) @Composable fun BadgePreview() {
+@Preview(showBackground = true)
+@Composable
+private fun BadgePreview() {
   Column(horizontalAlignment = Alignment.CenterHorizontally) {
     TUIBadge(style = BadgeStyle.Count(4), badgeSize = M)
     VerticalSpacer(space = 8)
@@ -115,4 +113,4 @@ data class TUIBadgeTags(
       color = TUITheme.colors.warning
     )
   }
-}
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt
index 643981d1..6ab953f7 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt
@@ -1,14 +1,5 @@
 package com.tarkalabs.tarkaui.components.base
 
-import com.tarkalabs.tarkaui.components.base.ButtonSize.L
-import com.tarkalabs.tarkaui.components.base.ButtonSize.M
-import com.tarkalabs.tarkaui.components.base.ButtonSize.S
-import com.tarkalabs.tarkaui.components.base.ButtonSize.XS
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Ghost
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Secondary
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -36,23 +27,29 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.tarkalabs.tarkaui.components.HorizontalSpacer
+import com.tarkalabs.tarkaui.components.base.ButtonSize.L
+import com.tarkalabs.tarkaui.components.base.ButtonSize.M
+import com.tarkalabs.tarkaui.components.base.ButtonSize.S
+import com.tarkalabs.tarkaui.components.base.ButtonSize.XS
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Custom
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Ghost
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.Secondary
 import com.tarkalabs.tarkaui.icons.Add24
 import com.tarkalabs.tarkaui.icons.TarkaIcon
 import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
-import com.tarkalabs.tarkaui.components.HorizontalSpacer
-import com.tarkalabs.tarkaui.components.base.ButtonStyle.Custom
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 sealed class ButtonStyle {
-  object Primary: ButtonStyle()
-  object Secondary: ButtonStyle()
-  object Ghost: ButtonStyle()
-  object Error: ButtonStyle()
-  object Outline: ButtonStyle()
-  data class Custom(
-    val containerColor: Color,
-    val contentColor: Color
-  ) : ButtonStyle()
+  data object Primary : ButtonStyle()
+  data object Secondary : ButtonStyle()
+  data object Ghost : ButtonStyle()
+  data object Error : ButtonStyle()
+  data object Outline : ButtonStyle()
+  data class Custom(val containerColor: Color, val contentColor: Color) : ButtonStyle()
 }
 
 enum class ButtonSize(val size: Dp) {
@@ -62,18 +59,14 @@ enum class ButtonSize(val size: Dp) {
   S(32.dp),
   XS(24.dp);
 
-  fun iconSize(): Dp {
-    return when (this) {
-      XL, L, M -> 24.dp
-      S, XS -> 16.dp
-    }
+  fun iconSize(): Dp = when (this) {
+    XL, L, M -> 24.dp
+    S, XS -> 16.dp
   }
 
-  fun iconSpace(): Int {
-    return when (this) {
-      XL, L, M -> 8
-      S, XS -> 4
-    }
+  fun iconSpace(): Int = when (this) {
+    XL, L, M -> 8
+    S, XS -> 4
   }
 
   fun paddingValues(isLeadingIconNull: Boolean, isTrailingIconNull: Boolean) = when (this) {
@@ -133,8 +126,8 @@ onClick = {}
   leadingIcon: TarkaIcon? = null,
   trailingIcon: TarkaIcon? = null,
   tags: TUIButtonTags = TUIButtonTags(),
-  enabled : Boolean = true,
-  onClick: () -> Unit,
+  enabled: Boolean = true,
+  onClick: () -> Unit
 ) {
   val buttonColor = when (buttonStyle) {
     Primary -> {
@@ -153,14 +146,15 @@ onClick = {}
 
     Ghost -> {
       ButtonDefaults.buttonColors(
-        containerColor = Color.Transparent, contentColor = TUITheme.colors.secondary
+        containerColor = Color.Transparent,
+        contentColor = TUITheme.colors.secondary
       )
     }
 
     Error -> {
       ButtonDefaults.buttonColors(
         containerColor = TUITheme.colors.error,
-        contentColor = TUITheme.colors.onPrimary,
+        contentColor = TUITheme.colors.onPrimary
       )
     }
 
@@ -174,7 +168,7 @@ onClick = {}
     is Custom -> {
       ButtonDefaults.buttonColors(
         containerColor = buttonStyle.containerColor,
-        contentColor = buttonStyle.contentColor,
+        contentColor = buttonStyle.contentColor
       )
     }
   }
@@ -190,12 +184,18 @@ onClick = {}
       isLeadingIconNull = leadingIcon == null,
       isTrailingIconNull = trailingIcon == null
     ),
-    border = if (buttonStyle == Outline) BorderStroke(
-      width = 1.dp, color = TUITheme.colors.onSurface
-    ) else null
+    border = if (buttonStyle == Outline) {
+      BorderStroke(
+        width = 1.dp,
+        color = TUITheme.colors.onSurface
+      )
+    } else {
+      null
+    }
   ) {
     Row(
-      verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = Arrangement.Center
     ) {
       leadingIcon?.let {
         Icon(
@@ -225,10 +225,12 @@ onClick = {}
 data class TUIButtonTags(
   val parentTag: String = "TUIButton",
   val leadingIconTag: String = "TUIButton_LeadingIcon",
-  val trailingIconTag: String = "TUIButton_TrailingIcon",
+  val trailingIconTag: String = "TUIButton_TrailingIcon"
 )
 
-@Composable @Preview(showBackground = true, showSystemUi = true) fun PreviewPrimaryButton() {
+@Composable
+@Preview(showBackground = true, showSystemUi = true)
+private fun PreviewPrimaryButton() {
   TUITheme {
     Column(
       horizontalAlignment = Alignment.CenterHorizontally,
@@ -241,22 +243,34 @@ data class TUIButtonTags(
           Text("Primary Button", fontSize = 24.sp)
           Spacer(modifier = Modifier.height(20.dp))
           TUIButton(
-            label = "Primary ", height = M, buttonStyle = Primary, onClick = {},
+            label = "Primary ",
+            height = M,
+            buttonStyle = Primary,
+            onClick = {},
             trailingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Primary ", height = L, buttonStyle = Primary, onClick = {},
+            label = "Primary ",
+            height = L,
+            buttonStyle = Primary,
+            onClick = {},
             trailingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Primary ", height = S, buttonStyle = Primary, onClick = {},
+            label = "Primary ",
+            height = S,
+            buttonStyle = Primary,
+            onClick = {},
             trailingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Primary ", height = XS, buttonStyle = Primary, onClick = {},
+            label = "Primary ",
+            height = XS,
+            buttonStyle = Primary,
+            onClick = {},
             trailingIcon = Regular.Add24
           )
         }
@@ -264,22 +278,34 @@ data class TUIButtonTags(
           Text("Secondary Button", fontSize = 24.sp)
           Spacer(modifier = Modifier.height(20.dp))
           TUIButton(
-            label = "Secondary ", height = M, buttonStyle = Secondary, onClick = {},
+            label = "Secondary ",
+            height = M,
+            buttonStyle = Secondary,
+            onClick = {},
             leadingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Secondary ", height = L, buttonStyle = Secondary, onClick = {},
+            label = "Secondary ",
+            height = L,
+            buttonStyle = Secondary,
+            onClick = {},
             leadingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Secondary ", height = S, buttonStyle = Secondary, onClick = {},
+            label = "Secondary ",
+            height = S,
+            buttonStyle = Secondary,
+            onClick = {},
             leadingIcon = Regular.Add24
           )
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(
-            label = "Secondary ", height = XS, buttonStyle = Secondary, onClick = {},
+            label = "Secondary ",
+            height = XS,
+            buttonStyle = Secondary,
+            onClick = {},
             leadingIcon = Regular.Add24
           )
         }
@@ -313,7 +339,6 @@ data class TUIButtonTags(
           TUIButton(label = "Error Button", height = S, buttonStyle = Error, onClick = {})
           Spacer(modifier = Modifier.height(10.dp))
           TUIButton(label = "Error Button", height = XS, buttonStyle = Error, onClick = {})
-
         }
       }
       Row(
@@ -337,25 +362,45 @@ data class TUIButtonTags(
           Spacer(modifier = Modifier.height(5.dp))
           Text("Custom Button", fontSize = 24.sp)
           Spacer(modifier = Modifier.height(20.dp))
-          TUIButton(label = "Custom Button", height = M, buttonStyle = Custom(
-            contentColor = TUITheme.colors.onSecondaryAlt,
-            containerColor = TUITheme.colors.secondaryAlt
-          ), onClick = {})
+          TUIButton(
+            label = "Custom Button",
+            height = M,
+            buttonStyle = Custom(
+              contentColor = TUITheme.colors.onSecondaryAlt,
+              containerColor = TUITheme.colors.secondaryAlt
+            ),
+            onClick = {}
+          )
           Spacer(modifier = Modifier.height(10.dp))
-          TUIButton(label = "Custom Button", height = L, buttonStyle = Custom(
-            contentColor = TUITheme.colors.onSecondaryAlt,
-            containerColor = TUITheme.colors.secondaryAlt
-          ), onClick = {})
+          TUIButton(
+            label = "Custom Button",
+            height = L,
+            buttonStyle = Custom(
+              contentColor = TUITheme.colors.onSecondaryAlt,
+              containerColor = TUITheme.colors.secondaryAlt
+            ),
+            onClick = {}
+          )
           Spacer(modifier = Modifier.height(10.dp))
-          TUIButton(label = "Custom Button", height = S, buttonStyle = Custom(
-            contentColor = TUITheme.colors.onSecondaryAlt,
-            containerColor = TUITheme.colors.secondaryAlt
-          ), onClick = {})
+          TUIButton(
+            label = "Custom Button",
+            height = S,
+            buttonStyle = Custom(
+              contentColor = TUITheme.colors.onSecondaryAlt,
+              containerColor = TUITheme.colors.secondaryAlt
+            ),
+            onClick = {}
+          )
           Spacer(modifier = Modifier.height(10.dp))
-          TUIButton(label = "Custom Button", height = XS, buttonStyle = Custom(
-            contentColor = TUITheme.colors.onSecondaryAlt,
-            containerColor = TUITheme.colors.secondaryAlt
-          ), onClick = {})
+          TUIButton(
+            label = "Custom Button",
+            height = XS,
+            buttonStyle = Custom(
+              contentColor = TUITheme.colors.onSecondaryAlt,
+              containerColor = TUITheme.colors.secondaryAlt
+            ),
+            onClick = {}
+          )
         }
       }
     }
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIFloatingActionButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIFloatingActionButton.kt
index 7cdd6357..b021a915 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIFloatingActionButton.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIFloatingActionButton.kt
@@ -17,14 +17,14 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.icons.ChevronRight20
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.base.FloatingActionButtonSize.L
 import com.tarkalabs.tarkaui.components.base.FloatingActionButtonSize.R
 import com.tarkalabs.tarkaui.components.base.FloatingActionButtonSize.S
 import com.tarkalabs.tarkaui.components.base.FloatingButtonStyle.Outline
 import com.tarkalabs.tarkaui.components.base.FloatingButtonStyle.Primary
+import com.tarkalabs.tarkaui.icons.ChevronRight20
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 enum class FloatingActionButtonSize(val size: Dp) {
@@ -34,8 +34,8 @@ enum class FloatingActionButtonSize(val size: Dp) {
 }
 
 sealed class FloatingButtonStyle {
-  object Primary: FloatingButtonStyle()
-  object Outline: FloatingButtonStyle()
+  data object Primary : FloatingButtonStyle()
+  data object Outline : FloatingButtonStyle()
 }
 
 /**
@@ -50,7 +50,8 @@ sealed class FloatingButtonStyle {
  * TUIFloatingActionButton(fabSize = S, icon = TarkaIcons.ChevronRight, onClick = {})
  *
  */
-@Composable fun TUIFloatingActionButton(
+@Composable
+fun TUIFloatingActionButton(
   fabSize: FloatingActionButtonSize = S,
   icon: TarkaIcon,
   tags: TUIFloatingActionButtonTags = TUIFloatingActionButtonTags(),
@@ -95,29 +96,31 @@ sealed class FloatingButtonStyle {
   }
 }
 
-data class TUIFloatingActionButtonTags(
-  val parentTag: String = "TUIFloatingActionButton",
-)
+data class TUIFloatingActionButtonTags(val parentTag: String = "TUIFloatingActionButton")
 
-@Preview(showBackground = true) @Composable fun FloatingActionButtonPreview() {
+@Preview(showBackground = true)
+@Composable
+private fun FloatingActionButtonPreview() {
   Column(
     horizontalAlignment = Alignment.CenterHorizontally,
     verticalArrangement = Arrangement.SpaceEvenly
   ) {
     TUIFloatingActionButton(
-      L, TarkaIcons.Regular.ChevronRight20, onClick = {}
+      L,
+      TarkaIcons.Regular.ChevronRight20,
+      onClick = {}
     )
     Spacer(modifier = Modifier.padding(5.dp))
     TUIFloatingActionButton(
-      R, TarkaIcons.Regular.ChevronRight20, onClick = {}
+      R,
+      TarkaIcons.Regular.ChevronRight20,
+      onClick = {}
     )
     Spacer(modifier = Modifier.padding(5.dp))
     TUIFloatingActionButton(
-      S, TarkaIcons.Regular.ChevronRight20, onClick = {}
+      S,
+      TarkaIcons.Regular.ChevronRight20,
+      onClick = {}
     )
   }
-}
-
-
-
-
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIIconButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIIconButton.kt
index 57c80a93..cb6a93d2 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIIconButton.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIIconButton.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonColors
@@ -28,9 +29,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.tarkalabs.tarkaui.icons.ChevronRight20
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.base.IconButtonSize.L
 import com.tarkalabs.tarkaui.components.base.IconButtonSize.M
 import com.tarkalabs.tarkaui.components.base.IconButtonSize.S
@@ -41,9 +39,12 @@ import com.tarkalabs.tarkaui.components.base.IconButtonStyle.Ghost
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle.Outline
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle.Primary
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle.Secondary
+import com.tarkalabs.tarkaui.icons.ChevronRight20
 import com.tarkalabs.tarkaui.icons.Stop16
 import com.tarkalabs.tarkaui.icons.Stop20
 import com.tarkalabs.tarkaui.icons.Stop24
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 enum class IconButtonSize(val size: Dp) {
@@ -51,14 +52,14 @@ enum class IconButtonSize(val size: Dp) {
   S(24.dp),
   M(32.dp),
   L(40.dp),
-  XL(48.dp),
+  XL(48.dp)
 }
 
 sealed class IconButtonStyle {
-  object Primary : IconButtonStyle()
-  object Secondary : IconButtonStyle()
-  object Ghost : IconButtonStyle()
-  object Outline : IconButtonStyle()
+  data object Primary : IconButtonStyle()
+  data object Secondary : IconButtonStyle()
+  data object Ghost : IconButtonStyle()
+  data object Outline : IconButtonStyle()
   data class Custom(val contentColor: Color, val containerColor: Color) : IconButtonStyle()
 }
 
@@ -85,8 +86,9 @@ sealed class IconButtonStyle {
   buttonSize: IconButtonSize = L,
   iconButtonStyle: IconButtonStyle = Primary,
   enabled: Boolean = true,
+  isBorderEnabled: Boolean = false,
   tags: TUIIconButtonTags = TUIIconButtonTags(),
-  onIconClick: () -> Unit = {  },
+  onIconClick: () -> Unit = { }
 ) {
   var iconButtonColors: IconButtonColors = IconButtonDefaults.iconButtonColors()
 
@@ -100,8 +102,8 @@ sealed class IconButtonStyle {
       val contentColor = icon.tintColor ?: TUITheme.colors.onSurface
       iconButtonColors = IconButtonDefaults.iconButtonColors(
         containerColor = Color.Transparent,
-        contentColor =  contentColor,
-        disabledContentColor = TUITheme.colors.onSurface.copy(alpha = 0.38f),
+        contentColor = contentColor,
+        disabledContentColor = TUITheme.colors.onSurface.copy(alpha = 0.38f)
       )
     }
 
@@ -109,7 +111,7 @@ sealed class IconButtonStyle {
       val contentColor = icon.tintColor ?: TUITheme.colors.onSecondary
       iconButtonColors = IconButtonDefaults.iconButtonColors(
         containerColor = TUITheme.colors.secondary,
-        contentColor = contentColor,
+        contentColor = contentColor
       )
     }
 
@@ -117,7 +119,7 @@ sealed class IconButtonStyle {
       val contentColor = icon.tintColor ?: TUITheme.colors.onPrimary
       iconButtonColors = IconButtonDefaults.iconButtonColors(
         containerColor = TUITheme.colors.primary,
-        contentColor = contentColor,
+        contentColor = contentColor
       )
     }
 
@@ -126,11 +128,13 @@ sealed class IconButtonStyle {
       iconButtonColors = IconButtonDefaults.iconButtonColors(
         containerColor = TUITheme.colors.surface,
         contentColor = contentColor,
-        disabledContentColor = TUITheme.colors.onSurface.copy(alpha = 0.38f),
+        disabledContentColor = TUITheme.colors.onSurface.copy(alpha = 0.38f)
       )
       parentModifier = Modifier
         .border(
-          width = 0.5.dp, color = TUITheme.colors.utilityOutline, shape = CircleShape
+          width = 0.5.dp,
+          color = TUITheme.colors.utilityOutline,
+          shape = CircleShape
         )
         .size(buttonSize.size)
     }
@@ -139,35 +143,43 @@ sealed class IconButtonStyle {
       val contentColor = icon.tintColor ?: iconButtonStyle.contentColor
       iconButtonColors = IconButtonDefaults.iconButtonColors(
         containerColor = iconButtonStyle.containerColor,
-        contentColor = contentColor,
+        contentColor = contentColor
       )
     }
   }
 
+  val borderModifier = Modifier.border(
+    width = 1.5.dp,
+    color = Color.Black,
+    shape = RoundedCornerShape(64.dp)
+  )
+
   IconButton(
     onClick = onIconClick,
-    modifier = parentModifier.testTag(tags.parentTag),
+    modifier = parentModifier.testTag(tags.parentTag)
+      .then(if (isBorderEnabled) borderModifier else Modifier),
     colors = iconButtonColors,
     enabled = enabled
   ) {
     Icon(
       modifier = Modifier
-        .heightIn(max = 24.dp)
-        .widthIn(max = 24.dp),
+        .heightIn(max = buttonSize.size)
+        .widthIn(max = buttonSize.size),
       painter = painterResource(id = icon.iconRes),
       contentDescription = icon.contentDescription
     )
   }
 }
 
-data class TUIIconButtonTags(
-  val parentTag: String = "TUIIconButton",
-)
+data class TUIIconButtonTags(val parentTag: String = "TUIIconButton")
 
-@Preview(showSystemUi = true) @Composable fun TUIIconButtonPreview() {
+@Preview(showSystemUi = true)
+@Composable
+private fun TUIIconButtonPreview() {
   TUITheme {
     Column(
-      horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center
+      horizontalAlignment = Alignment.CenterHorizontally,
+      verticalArrangement = Arrangement.Center
     ) {
       Text("Primary Icon Button", fontSize = 30.sp)
       Spacer(modifier = Modifier.width(20.dp))
@@ -177,24 +189,34 @@ data class TUIIconButtonTags(
         verticalAlignment = Alignment.CenterVertically
       ) {
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XS, iconButtonStyle = Primary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XS,
+          iconButtonStyle = Primary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = S, iconButtonStyle = Primary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = S,
+          iconButtonStyle = Primary
         )
         Spacer(modifier = Modifier.width(20.dp))
 
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = M, iconButtonStyle = Primary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = M,
+          iconButtonStyle = Primary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = L, iconButtonStyle = Primary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = L,
+          iconButtonStyle = Primary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XL, iconButtonStyle = Primary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XL,
+          iconButtonStyle = Primary
         )
       }
 
@@ -206,28 +228,37 @@ data class TUIIconButtonTags(
         verticalAlignment = Alignment.CenterVertically
       ) {
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XS, iconButtonStyle = Secondary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XS,
+          iconButtonStyle = Secondary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = S, iconButtonStyle = Secondary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = S,
+          iconButtonStyle = Secondary
         )
         Spacer(modifier = Modifier.width(20.dp))
 
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = M, iconButtonStyle = Secondary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = M,
+          iconButtonStyle = Secondary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = L, iconButtonStyle = Secondary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = L,
+          iconButtonStyle = Secondary
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XL, iconButtonStyle = Secondary
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XL,
+          iconButtonStyle = Secondary
         )
       }
 
-
       Text("Ghost Icon Button", fontSize = 30.sp)
       Spacer(modifier = Modifier.width(20.dp))
       Row(
@@ -236,24 +267,34 @@ data class TUIIconButtonTags(
         verticalAlignment = Alignment.CenterVertically
       ) {
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XS, iconButtonStyle = Ghost
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XS,
+          iconButtonStyle = Ghost
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = S, iconButtonStyle = Ghost
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = S,
+          iconButtonStyle = Ghost
         )
         Spacer(modifier = Modifier.width(20.dp))
 
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = M, iconButtonStyle = Ghost
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = M,
+          iconButtonStyle = Ghost
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = L, iconButtonStyle = Ghost
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = L,
+          iconButtonStyle = Ghost
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XL, iconButtonStyle = Ghost
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XL,
+          iconButtonStyle = Ghost
         )
       }
 
@@ -265,24 +306,34 @@ data class TUIIconButtonTags(
         verticalAlignment = Alignment.CenterVertically
       ) {
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XS, iconButtonStyle = Outline
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XS,
+          iconButtonStyle = Outline
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = S, iconButtonStyle = Outline
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = S,
+          iconButtonStyle = Outline
         )
         Spacer(modifier = Modifier.width(20.dp))
 
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = M, iconButtonStyle = Outline
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = M,
+          iconButtonStyle = Outline
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = L, iconButtonStyle = Outline
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = L,
+          iconButtonStyle = Outline
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Regular.ChevronRight20, buttonSize = XL, iconButtonStyle = Outline
+          icon = TarkaIcons.Regular.ChevronRight20,
+          buttonSize = XL,
+          iconButtonStyle = Outline
         )
       }
       Text("Custom Icon Button", fontSize = 30.sp)
@@ -293,27 +344,51 @@ data class TUIIconButtonTags(
         verticalAlignment = Alignment.CenterVertically
       ) {
         TUIIconButton(
-          icon = TarkaIcons.Filled.Stop16, buttonSize = XS, iconButtonStyle = Custom(TUITheme.colors.onSecondaryAlt, TUITheme.colors.success)
+          icon = TarkaIcons.Filled.Stop16,
+          buttonSize = XS,
+          iconButtonStyle = Custom(
+            TUITheme.colors.onSecondaryAlt,
+            TUITheme.colors.success
+          )
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Filled.Stop16, buttonSize = S, iconButtonStyle = Custom(TUITheme.colors.onSecondaryAlt, TUITheme.colors.success)
+          icon = TarkaIcons.Filled.Stop16,
+          buttonSize = S,
+          iconButtonStyle = Custom(
+            TUITheme.colors.onSecondaryAlt,
+            TUITheme.colors.success
+          )
         )
         Spacer(modifier = Modifier.width(20.dp))
 
         TUIIconButton(
-          icon = TarkaIcons.Filled.Stop20, buttonSize = M, iconButtonStyle = Custom(TUITheme.colors.onSecondaryAlt, TUITheme.colors.success)
+          icon = TarkaIcons.Filled.Stop20,
+          buttonSize = M,
+          iconButtonStyle = Custom(
+            TUITheme.colors.onSecondaryAlt,
+            TUITheme.colors.success
+          )
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Filled.Stop20, buttonSize = L, iconButtonStyle = Custom(TUITheme.colors.onSecondaryAlt, TUITheme.colors.success)
+          icon = TarkaIcons.Filled.Stop20,
+          buttonSize = L,
+          iconButtonStyle = Custom(
+            TUITheme.colors.onSecondaryAlt,
+            TUITheme.colors.success
+          )
         )
         Spacer(modifier = Modifier.width(20.dp))
         TUIIconButton(
-          icon = TarkaIcons.Filled.Stop24, buttonSize = XL, iconButtonStyle = Custom(TUITheme.colors.onSecondaryAlt, TUITheme.colors.success)
+          icon = TarkaIcons.Filled.Stop24,
+          buttonSize = XL,
+          iconButtonStyle = Custom(
+            TUITheme.colors.onSecondaryAlt,
+            TUITheme.colors.success
+          )
         )
       }
     }
   }
-}
-
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIInputField.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIInputField.kt
index 58067274..8222a9fa 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIInputField.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIInputField.kt
@@ -2,6 +2,7 @@ package com.tarkalabs.tarkaui.components.base
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -20,7 +21,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.testTag
@@ -41,15 +41,14 @@ import com.tarkalabs.tarkaui.extentions.clickableWithoutRipple
 import com.tarkalabs.tarkaui.icons.CheckmarkCircle16
 import com.tarkalabs.tarkaui.icons.TarkaIcon
 import com.tarkalabs.tarkaui.icons.TarkaIcons
-import com.tarkalabs.tarkaui.icons.Timer20
 import com.tarkalabs.tarkaui.icons.Warning12
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 enum class TUIInputFieldStatus {
-  Normal,
-  Error,
-  Success,
-  Alert,
+    Normal,
+    Error,
+    Success,
+    Alert
 }
 
 /**
@@ -58,15 +57,15 @@ enum class TUIInputFieldStatus {
  * LookupInputField -> it will restrict user's to input via keyboard and allow user's to get click event and set different color style of TUIInputField
  */
 enum class TUIInputFieldType {
-  InputField,
-  LookupInputField
+    InputField,
+    LookupInputField
 }
 
 sealed class TUIInputFieldContentType {
-  data class Icon(val icon: TarkaIcon, val onIconClick: (() -> Unit)? = null) :
-    TUIInputFieldContentType()
+    data class Icon(val icon: TarkaIcon, val onIconClick: (() -> Unit)? = null) :
+        TUIInputFieldContentType()
 
-  data class Text(val text: String) : TUIInputFieldContentType()
+    data class Text(val text: String) : TUIInputFieldContentType()
 }
 
 /**
@@ -83,217 +82,244 @@ sealed class TUIInputFieldContentType {
  * @param testTags Tags for testing purposes to identify specific elements within the input field.
  * @param inputFieldTye Set the type of InputField either NormalInputField or LookupInputField
  */
-@Composable fun TUIInputField(
-  modifier: Modifier = Modifier,
-  value: String,
-  label: String? = null,
-  onValueChange: (String) -> Unit,
-  status: TUIInputFieldStatus,
-  enabled: Boolean = true,
-  leadingContent: TUIInputFieldContentType? = null,
-  trailingContent: TUIInputFieldContentType? = null,
-  helperMessage: String? = null,
-  testTags: TUIInputFieldTags = TUIInputFieldTags(),
-  keyboardOption: KeyboardOptions = KeyboardOptions.Default,
-  keyboardAction: KeyboardActions = KeyboardActions.Default,
-  maxLines: Int = 1,
-  minLines: Int = 1,
-  maxCharLength: Int = Int.MAX_VALUE,
-  singleLine: Boolean = false,
-  inputShape: Shape = RoundedCornerShape(8.dp),
-  inputFieldTye: TUIInputFieldType = InputField,
-  visualTransformation: VisualTransformation = VisualTransformation.None,
+@Composable
+fun TUIInputField(
+    modifier: Modifier = Modifier,
+    value: String,
+    label: String? = null,
+    onValueChange: (String) -> Unit,
+    status: TUIInputFieldStatus,
+    enabled: Boolean = true,
+    leadingContent: TUIInputFieldContentType? = null,
+    trailingContent: TUIInputFieldContentType? = null,
+    helperMessage: String? = null,
+    testTags: TUIInputFieldTags = TUIInputFieldTags(),
+    keyboardOption: KeyboardOptions = KeyboardOptions.Default,
+    keyboardAction: KeyboardActions = KeyboardActions.Default,
+    maxLines: Int = 1,
+    minLines: Int = 1,
+    maxCharLength: Int = Int.MAX_VALUE,
+    singleLine: Boolean = false,
+    inputShape: Shape = RoundedCornerShape(8.dp),
+    inputFieldTye: TUIInputFieldType = InputField,
+    visualTransformation: VisualTransformation = VisualTransformation.None
 ) {
+    val icon = iconFor(status)
+    val colors = colorsFor(status, inputFieldTye)
 
-  val icon = iconFor(status)
-  val colors = colorsFor(status, inputFieldTye)
+    val leadingIconLambda: @Composable () -> Unit = {
+        if (leadingContent != null) {
+            when (leadingContent) {
+                is Icon -> Icon(
+                    painter = painterResource(id = leadingContent.icon.iconRes),
+                    contentDescription = leadingContent.icon.contentDescription,
+                    modifier = Modifier.testTag(testTags.leadingContentTag),
+                    tint = TUITheme.colors.inputText
+                )
 
-  val leadingIconLambda: @Composable () -> Unit = {
-    if (leadingContent != null) when (leadingContent) {
-      is Icon -> Icon(
-        painter = painterResource(id = leadingContent.icon.iconRes),
-        contentDescription = leadingContent.icon.contentDescription,
-        modifier = Modifier.testTag(testTags.leadingContentTag),
-        tint = TUITheme.colors.inputText
-      )
-
-      is Text -> Text(
-        text = leadingContent.text.take(1),
-        style = TUITheme.typography.body5,
-        color = TUITheme.colors.inputDim,
-        modifier = Modifier.testTag(testTags.leadingContentTag),
-      )
+                is Text -> Text(
+                    text = leadingContent.text.take(1),
+                    style = TUITheme.typography.body5,
+                    color = TUITheme.colors.inputDim,
+                    modifier = Modifier.testTag(testTags.leadingContentTag)
+                )
+            }
+        }
     }
+    val tailingIconLambda: @Composable () -> Unit = {
+        if (trailingContent != null) {
+            when (trailingContent) {
+                is Icon -> Icon(
+                    painter = painterResource(id = trailingContent.icon.iconRes),
+                    contentDescription = trailingContent.icon.contentDescription,
+                    modifier = Modifier
+                        .testTag(testTags.trailingContentTag)
+                        .then(
+                            if (trailingContent.onIconClick ==
+                                null
+                            ) {
+                                Modifier
+                            } else {
+                                Modifier.clickableWithoutRipple {
+                                    trailingContent.onIconClick.invoke()
+                                }
+                            }
+                        ),
+                    tint = TUITheme.colors.inputText
+                )
 
-  }
-  val tailingIconLambda: @Composable () -> Unit = {
-    if (trailingContent != null) when (trailingContent) {
-      is Icon -> Icon(painter = painterResource(id = trailingContent.icon.iconRes),
-        contentDescription = trailingContent.icon.contentDescription,
-        modifier = Modifier
-          .testTag(testTags.trailingContentTag)
-          .then(if (trailingContent.onIconClick == null) Modifier else Modifier.clickableWithoutRipple {
-            trailingContent.onIconClick.invoke()
-          }),
-        tint = TUITheme.colors.inputText)
-
-      is Text -> Text(
-        text = trailingContent.text.take(1),
-        style = TUITheme.typography.body5,
-        color = TUITheme.colors.inputTextDim.copy(alpha = 0.7f),
-        modifier = Modifier.testTag(testTags.trailingContentTag),
-      )
+                is Text -> Text(
+                    text = trailingContent.text,
+                    style = TUITheme.typography.body5,
+                    color = TUITheme.colors.inputTextDim.copy(alpha = 0.7f),
+                    modifier = Modifier
+                        .testTag(testTags.trailingContentTag)
+                        .padding(end = 10.dp)
+                )
+            }
+        }
     }
-
-  }
-  val labelLambda: @Composable () -> Unit = {
-    if (label != null) Text(
-      text = label,
-      modifier = Modifier.testTag(testTags.labelTag)
-    )
-  }
-  val helperMessageLambda: @Composable (() -> Unit)? = if (helperMessage != null) {
-    {
-      Row(verticalAlignment = Alignment.CenterVertically) {
-        if (icon != null) {
-          Icon(
-            tint = indicatorColorFor(status),
-            painter = painterResource(id = icon.iconRes),
-            modifier = Modifier.testTag(testTags.helperIconTag),
-            contentDescription = icon.contentDescription
-          )
-          HorizontalSpacer(space = 5)
+    val labelLambda: @Composable () -> Unit = {
+        if (label != null) {
+            Text(
+                text = label,
+                modifier = Modifier.testTag(testTags.labelTag)
+            )
         }
-        Text(
-          text = helperMessage,
-          style = TUITheme.typography.body7,
-          color = TUITheme.colors.inputText,
-          modifier = Modifier.testTag(testTags.helperTextTag)
-        )
-      }
     }
-  } else {
-    null
-  }
-  TextField(
-    modifier = modifier
-      .fillMaxWidth()
-      .testTag(testTags.parentTag)
-      .clip(inputShape),
-    value = value,
-    onValueChange = {
-      if (it.length <= maxCharLength) onValueChange(it)
-    },
-    enabled = enabled && inputFieldTye == InputField,
-    singleLine = singleLine,
-    colors = colors,
-    label = if (label != null) labelLambda else null,
-    leadingIcon = if (leadingContent != null) leadingIconLambda else null,
-    trailingIcon = if (trailingContent != null) tailingIconLambda else null,
-    keyboardOptions = keyboardOption,
-    keyboardActions = keyboardAction,
-    supportingText = helperMessageLambda,
-    maxLines = maxLines,
-    minLines = minLines,
-    textStyle = TUITheme.typography.body6,
-    visualTransformation = visualTransformation
-  )
+    val helperMessageLambda: @Composable (() -> Unit)? = if (helperMessage != null) {
+        {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                if (icon != null) {
+                    Icon(
+                        tint = indicatorColorFor(status),
+                        painter = painterResource(id = icon.iconRes),
+                        modifier = Modifier.testTag(testTags.helperIconTag),
+                        contentDescription = icon.contentDescription
+                    )
+                    HorizontalSpacer(space = 5)
+                }
+                Text(
+                    text = helperMessage,
+                    style = TUITheme.typography.body7,
+                    color = TUITheme.colors.inputText,
+                    modifier = Modifier.testTag(testTags.helperTextTag)
+                )
+            }
+        }
+    } else {
+        null
+    }
+    TextField(
+        modifier = modifier
+            .fillMaxWidth()
+            .testTag(testTags.parentTag),
+        value = value,
+        onValueChange = {
+            if (it.length <= maxCharLength) onValueChange(it)
+        },
+        enabled = enabled && inputFieldTye == InputField,
+        singleLine = singleLine,
+        colors = colors,
+        label = if (label != null) labelLambda else null,
+        leadingIcon = if (leadingContent != null) leadingIconLambda else null,
+        trailingIcon = if (trailingContent != null) tailingIconLambda else null,
+        keyboardOptions = keyboardOption,
+        keyboardActions = keyboardAction,
+        supportingText = helperMessageLambda,
+        maxLines = maxLines,
+        minLines = minLines,
+        textStyle = TUITheme.typography.body6,
+        visualTransformation = visualTransformation,
+        shape = inputShape
+    )
 }
 
-fun iconFor(status: TUIInputFieldStatus): TarkaIcon? {
-  return when (status) {
+fun iconFor(status: TUIInputFieldStatus): TarkaIcon? = when (status) {
     Success -> TarkaIcons.Regular.CheckmarkCircle16
     Alert -> TarkaIcons.Regular.Warning12
     else -> null
-  }
 }
 
-@Composable fun colorsFor(
-  status: TUIInputFieldStatus,
-  inputFieldTye: TUIInputFieldType
-): TextFieldColors {
-  val focusedIndicatorColor = indicatorColorFor(status)
+@Composable
+fun colorsFor(status: TUIInputFieldStatus, inputFieldTye: TUIInputFieldType): TextFieldColors {
+    val focusedIndicatorColor = indicatorColorFor(status)
 
-  var disabledLabelColor = TUITheme.colors.inputDim
-  var disabledTextColor = TUITheme.colors.utilityDisabledContent
+    var disabledLabelColor = TUITheme.colors.inputDim
+    var disabledTextColor = TUITheme.colors.utilityDisabledContent
 
-  when (inputFieldTye) {
-    InputField -> {
-      disabledTextColor = TUITheme.colors.utilityDisabledContent
-      disabledLabelColor = TUITheme.colors.inputDim
-    }
-    LookupInputField -> {
-      disabledLabelColor = TUITheme.colors.inputDim
-      disabledTextColor = TUITheme.colors.inputText
+    when (inputFieldTye) {
+        InputField -> {
+            disabledTextColor = TUITheme.colors.utilityDisabledContent
+            disabledLabelColor = TUITheme.colors.inputDim
+        }
+
+        LookupInputField -> {
+            disabledLabelColor = TUITheme.colors.inputDim
+            disabledTextColor = TUITheme.colors.inputText
+        }
     }
-  }
 
-  return TextFieldDefaults.colors(
-    focusedLabelColor = TUITheme.colors.inputDim,
-    focusedTextColor = TUITheme.colors.inputText,
-    focusedIndicatorColor = focusedIndicatorColor,
-    focusedContainerColor = TUITheme.colors.inputBackground,
-    unfocusedLabelColor = TUITheme.colors.inputDim,
-    unfocusedTextColor = TUITheme.colors.inputText,
-    unfocusedIndicatorColor = if (status == Error) focusedIndicatorColor else TUITheme.colors.utilityDisabledBackground,
-    unfocusedContainerColor = TUITheme.colors.inputBackground,
-    disabledLabelColor = disabledLabelColor,
-    disabledTextColor = disabledTextColor,
-    disabledContainerColor = TUITheme.colors.inputBackground,
-    disabledIndicatorColor =  Color.Transparent,
-    errorLabelColor = TUITheme.colors.inputDim,
-    errorContainerColor = TUITheme.colors.inputBackground,
-  )
+    return TextFieldDefaults.colors(
+        focusedLabelColor = TUITheme.colors.inputDim,
+        focusedTextColor = TUITheme.colors.inputText,
+        focusedIndicatorColor = focusedIndicatorColor,
+        focusedContainerColor = TUITheme.colors.inputBackground,
+        unfocusedLabelColor = TUITheme.colors.inputDim,
+        unfocusedTextColor = TUITheme.colors.inputText,
+        unfocusedIndicatorColor = if (status == Error) {
+            focusedIndicatorColor
+        } else {
+            TUITheme.colors.utilityDisabledBackground
+        },
+        unfocusedContainerColor = TUITheme.colors.inputBackground,
+        disabledLabelColor = disabledLabelColor,
+        disabledTextColor = disabledTextColor,
+        disabledContainerColor = TUITheme.colors.inputBackground,
+        disabledIndicatorColor = Color.Transparent,
+        errorLabelColor = TUITheme.colors.inputDim,
+        errorContainerColor = TUITheme.colors.inputBackground
+    )
 }
 
-@Composable private fun indicatorColorFor(status: TUIInputFieldStatus) = when (status) {
-  Normal -> TUITheme.colors.primary
-  Error -> TUITheme.colors.error
-  Success -> TUITheme.colors.success
-  Alert -> TUITheme.colors.warning
+@Composable
+private fun indicatorColorFor(status: TUIInputFieldStatus) = when (status) {
+    Normal -> TUITheme.colors.primary
+    Error -> TUITheme.colors.error
+    Success -> TUITheme.colors.success
+    Alert -> TUITheme.colors.warning
 }
 
-@Preview(showBackground = true) @Composable fun TUIPreview() {
-  TUITheme {
-    var textValue by remember {
-      mutableStateOf("")
-    }
-    Box(modifier = Modifier.padding(10.dp)) {
-      TUIInputField(leadingContent = Text("$"),
-        trailingContent = Icon(TarkaIcons.Regular.Timer20),
-        value = textValue,
-        onValueChange = { textValue = it },
-        status = Success,
-        inputFieldTye = LookupInputField,
-        label = "Label",
-        modifier = Modifier.clickable {
-          textValue = "Hello World"
-        })
-
+@Preview(showBackground = true)
+@Composable
+private fun TUIPreview() {
+    TUITheme {
+        var textValue by remember {
+            mutableStateOf("")
+        }
+        Box(modifier = Modifier.padding(10.dp)) {
+            TUIInputField(
+                leadingContent = Text("$"),
+                trailingContent = Text("MKBUHG"),
+                value = textValue,
+                onValueChange = { textValue = it },
+                status = Success,
+                inputFieldTye = LookupInputField,
+                label = "Label",
+                modifier = Modifier.clickable {
+                    textValue = "Hello World"
+                }
+            )
+        }
     }
-  }
 }
 
-@Preview(showBackground = true) @Composable fun TUIPreviewDark() {
-  TUITheme(true) {
-    var textValue by remember {
-      mutableStateOf("hello world")
+@Preview(showBackground = true)
+@Composable
+private fun TUIPreviewDark() {
+    TUITheme(true) {
+        var textValue by remember {
+            mutableStateOf("hello world")
+        }
+        Column(modifier = Modifier
+            .fillMaxWidth()
+            .padding(20.dp)) {
+            TUIInputField(
+                leadingContent = Text("$*****"),
+                trailingContent = Text("MKBUHG"),
+                value = textValue,
+                onValueChange = { textValue = it },
+                status = Success
+            )
+        }
     }
-    TUIInputField(
-      leadingContent = Text("$"),
-      trailingContent = Icon(TarkaIcons.Regular.Timer20),
-      value = textValue,
-      onValueChange = { textValue = it },
-      status = Success
-    )
-  }
 }
 
 data class TUIInputFieldTags(
-  val parentTag: String = "TUIInputField_InputField",
-  val trailingContentTag: String = "TUIInputField_TrailingContent",
-  val leadingContentTag: String = "TUIInputField_LeadingContent",
-  val labelTag: String = "TUIInputField_Label",
-  val helperTextTag: String = "TUIInputField_HelperText",
-  val helperIconTag: String = "TUIInputField_HelperIcon",
+    val parentTag: String = "TUIInputField_InputField",
+    val trailingContentTag: String = "TUIInputField_TrailingContent",
+    val leadingContentTag: String = "TUIInputField_LeadingContent",
+    val labelTag: String = "TUIInputField_Label",
+    val helperTextTag: String = "TUIInputField_HelperText",
+    val helperIconTag: String = "TUIInputField_HelperIcon"
 )
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIToggleRow.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIToggleRow.kt
index 3b963903..aec11f51 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIToggleRow.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIToggleRow.kt
@@ -1,5 +1,6 @@
 package com.tarkalabs.tarkaui.components.base
 
+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
@@ -8,8 +9,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.R
 import com.tarkalabs.tarkaui.components.VerticalSpacer
 import com.tarkalabs.tarkaui.components.base.ToggleRowStyle.Title
 import com.tarkalabs.tarkaui.components.base.ToggleRowStyle.TitleWithDescription
@@ -28,10 +31,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  *  TUIToggleRow(title = "Title", style = TitleWithDescription("Description"))
  *
  */
-@Composable fun TUIToggleRow(
+@Composable
+fun TUIToggleRow(
   modifier: Modifier = Modifier,
   title: String,
   style: ToggleRowStyle = Title,
+  @StringRes primaryNotAvailableText: Int = R.string.not_availble
 ) {
   Row(
     modifier
@@ -41,31 +46,51 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   ) {
     Column(Modifier.weight(1f)) {
       when (style) {
-        is TitleWithDescription ->  TUIToggleRowTitleWithDescription(title, style)
-        is Title ->  TUIToggleRowTitle(title)
+        is TitleWithDescription -> TUIToggleRowTitleWithDescription(
+          title,
+          style,
+          primaryNotAvailableText
+        )
+
+        is Title -> TUIToggleRowTitle(title, primaryNotAvailableText)
       }
     }
   }
 }
 
 sealed class ToggleRowStyle {
-  data class TitleWithDescription(val description: String) : ToggleRowStyle()
-  object Title : ToggleRowStyle()
+  data class TitleWithDescription(
+    val description: String,
+    @StringRes val primaryNotAvailableText: Int = R.string.not_availble
+  ) : ToggleRowStyle()
+
+  data object Title : ToggleRowStyle()
 }
 
-@Composable private fun TUIToggleRowTitle(title: String) {
-  Text(
-    text = title,
-    style = TUITheme.typography.heading7,
-    color = TUITheme.colors.onSurface
-  )
+@Composable
+private fun TUIToggleRowTitle(title: String?, @StringRes primaryNotAvailableText: Int) {
+  if (title.isNullOrEmpty()) {
+    Text(
+      text = stringResource(id = primaryNotAvailableText),
+      style = TUITheme.typography.heading7,
+      color = TUITheme.colors.utilityDisabledContent
+    )
+  } else {
+    Text(
+      text = title,
+      style = TUITheme.typography.heading7,
+      color = TUITheme.colors.onSurface
+    )
+  }
 }
 
-@Composable private fun TUIToggleRowTitleWithDescription(
+@Composable
+private fun TUIToggleRowTitleWithDescription(
   title: String,
-  style: TitleWithDescription
+  style: TitleWithDescription,
+  @StringRes primaryNotAvailableText: Int = R.string.not_availble
 ) {
-  TUIToggleRowTitle(title = title)
+  TUIToggleRowTitle(title = title, primaryNotAvailableText)
   VerticalSpacer(space = 4)
   Text(
     text = style.description,
@@ -74,12 +99,16 @@ sealed class ToggleRowStyle {
   )
 }
 
-@Preview(showBackground = true) @Composable fun TUIToggleRowPreview() {
+@Preview(showBackground = true)
+@Composable
+private fun TUIToggleRowPreview() {
   TUITheme {
     Column {
       TUIToggleRow(title = "Title", style = Title)
       TUIToggleRow(title = "Title", style = TitleWithDescription("Description"))
+      TUIToggleRow(title = "", style = TitleWithDescription("Description"))
       TUIToggleRow(title = "Title", style = Title)
+      TUIToggleRow(title = "Title")
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUIDraggableCard.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUIDraggableCard.kt
index 77e59254..103061ff 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUIDraggableCard.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUIDraggableCard.kt
@@ -19,10 +19,10 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
-import com.tarkalabs.tarkaui.icons.ReOrderDotsVertical24
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.TUIToggleSwitch
 import com.tarkalabs.tarkaui.components.VerticalSpacer
+import com.tarkalabs.tarkaui.icons.ReOrderDotsVertical24
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -43,7 +43,7 @@ fun TUIDraggableCard(
   switchCheckedState: Boolean,
   onSwitchCheckedChange: () -> Unit,
   isDragging: Boolean = false,
-  tags: TUIDraggableCardTags = TUIDraggableCardTags(),
+  tags: TUIDraggableCardTags = TUIDraggableCardTags()
 ) {
   Row(
     modifier = modifier
@@ -58,7 +58,6 @@ fun TUIDraggableCard(
     verticalAlignment = Alignment.CenterVertically,
     horizontalArrangement = Arrangement.SpaceAround
   ) {
-
     Icon(
       modifier = dragIconModifier
         .testTag(tags.leadReOrderIconTag)
@@ -75,7 +74,7 @@ fun TUIDraggableCard(
         .padding(horizontal = 16.dp),
       text = title,
       color = TUITheme.colors.inputText,
-      style = TUITheme.typography.heading6,
+      style = TUITheme.typography.heading6
     )
 
     TUIToggleSwitch(isChecked = switchCheckedState, onCheckedChange = onSwitchCheckedChange)
@@ -84,16 +83,14 @@ fun TUIDraggableCard(
 
 data class TUIDraggableCardTags(
   val parentTag: String = "TUIDraggableCard",
-  val leadReOrderIconTag: String = "TUIDraggableCard_DragIcon",
+  val leadReOrderIconTag: String = "TUIDraggableCard_DragIcon"
 )
 
 @Preview
 @Composable
-fun TUIDraggableCardPreview() {
+private fun TUIDraggableCardPreview() {
   TUITheme(darkTheme = true) {
-
     Column(modifier = Modifier.background(color = TUITheme.colors.onSurface)) {
-
       VerticalSpacer(space = 5)
 
       TUIDraggableCard(
@@ -113,7 +110,6 @@ fun TUIDraggableCardPreview() {
       )
 
       VerticalSpacer(space = 5)
-
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUISelectionCard.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUISelectionCard.kt
index b9457532..35ac2c23 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUISelectionCard.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/card/TUISelectionCard.kt
@@ -69,7 +69,8 @@ fun TUISelectionCard(
   leadingIcon: TarkaIcon? = null,
   label: String? = null,
   primaryDescription: String? = null,
-  @StringRes primaryNotAvailableText : Int = R.string.not_availble,
+  @StringRes primaryNotAvailableText: Int = R.string.not_availble,
+  showPrimaryDetails: Boolean = false,
   secondaryDescription: String? = null,
   primaryDetails: String? = null,
   secondaryDetails: String? = null,
@@ -79,23 +80,21 @@ fun TUISelectionCard(
   isSelected: Boolean = false,
   showCheckMarkIcon: Boolean = false,
   tags: TUISelectionCardTags = TUISelectionCardTags(),
-  onCardClicked: () -> Unit,
+  onCardClicked: () -> Unit
 ) {
-
   Row(
     modifier = modifier
       .testTag(tags.parentTag)
       .semantics { testTagsAsResourceId = true }
       .clip(RoundedCornerShape(16.dp))
       .background(
-        if (isSelected) TUITheme.colors.primaryAlt else TUITheme.colors.surface,
+        if (isSelected) TUITheme.colors.primaryAlt else TUITheme.colors.surface
       )
       .clickable {
         onCardClicked.invoke()
       }
-      .padding(horizontal = 16.dp, vertical = 12.dp),
+      .padding(horizontal = 16.dp, vertical = 12.dp)
   ) {
-
     leadingIcon?.let {
       Icon(
         modifier = Modifier
@@ -112,7 +111,6 @@ fun TUISelectionCard(
         .padding(start = if (leadingIcon != null) 16.dp else 0.dp)
         .weight(1f)
     ) {
-
       label?.let {
         Text(
           modifier = Modifier.testTag(tags.labelTag),
@@ -123,7 +121,6 @@ fun TUISelectionCard(
         VerticalSpacer(space = 4)
       }
 
-
       if (primaryDescription.isNullOrEmpty()) {
         Text(
           modifier = Modifier.testTag(tags.descriptionTag),
@@ -140,11 +137,18 @@ fun TUISelectionCard(
         )
       }
       VerticalSpacer(space = 4)
-
-      primaryDetails?.let {
+      if (primaryDetails.isNullOrEmpty() && showPrimaryDetails) {
         Text(
           modifier = Modifier.testTag(tags.detailsTag),
-          text = it,
+          text = stringResource(id = primaryNotAvailableText),
+          color = TUITheme.colors.utilityDisabledContent,
+          style = TUITheme.typography.body7
+        )
+        VerticalSpacer(space = 4)
+      } else if (!primaryDetails.isNullOrEmpty()) {
+        Text(
+          modifier = Modifier.testTag(tags.detailsTag),
+          text = primaryDetails,
           color = TUITheme.colors.inputTextDim.copy(alpha = 0.7f),
           style = TUITheme.typography.body7
         )
@@ -165,12 +169,17 @@ fun TUISelectionCard(
         Text(
           modifier = Modifier.testTag(tags.details2Tag),
           text = it,
-          color = if (secondaryDetailStyle == NORMAL) TUITheme.colors.inputTextDim.copy(alpha = 0.7f) else TUITheme.colors.error,
+          color = if (secondaryDetailStyle ==
+            NORMAL
+          ) {
+            TUITheme.colors.inputTextDim.copy(alpha = 0.7f)
+          } else {
+            TUITheme.colors.error
+          },
           style = TUITheme.typography.body7
         )
         VerticalSpacer(space = 4)
       }
-
     }
 
     badgeCount?.let {
@@ -209,7 +218,6 @@ fun TUISelectionCard(
         )
       }
     }
-
   }
 }
 
@@ -223,13 +231,12 @@ data class TUISelectionCardTags(
   val details2Tag: String = "TUISelectionCard_SecondaryDetailsTag",
   val badgeTag: String = "TUISelectionCard_BadgeTag",
   val trailingFrontArrowIconTag: String = "TUISelectionCard_TrailingFrontArrowIconTag",
-  val trailingCheckMarkIconTag: String = "TUISelectionCard_TrailingCheckMarkIconTag",
+  val trailingCheckMarkIconTag: String = "TUISelectionCard_TrailingCheckMarkIconTag"
 )
 
 @Preview
 @Composable
-fun TUISelectionCardPreview() {
-
+private fun TUISelectionCardPreview() {
   Column(
     modifier = Modifier
       .fillMaxSize()
@@ -321,6 +328,5 @@ fun TUISelectionCardPreview() {
       showTrailingIcon = true,
       isSelected = true
     ) {}
-
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBox.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBox.kt
index d1b65afe..31862268 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBox.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBox.kt
@@ -36,10 +36,10 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  * How to use TUICheckBox() composable function
  *
  *     TUICheckBox(
-        checked = isChecked,
-        enabled = true,
-        onCheckedChange = { isChecked = !isChecked }
-      )
+checked = isChecked,
+enabled = true,
+onCheckedChange = { isChecked = !isChecked }
+)
  */
 @Composable fun TUICheckBox(
   modifier: Modifier = Modifier,
@@ -62,12 +62,18 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       )
       .border(width = 1.dp, color = borderColor, shape = shape)
       .then(
-        if (onCheckedChange == null) Modifier else Modifier.toggleable(value = checked,
-          onValueChange = {
-            if (enabled) {
-              onCheckedChange.invoke()
+        if (onCheckedChange == null) {
+          Modifier
+        } else {
+          Modifier.toggleable(
+            value = checked,
+            onValueChange = {
+              if (enabled) {
+                onCheckedChange.invoke()
+              }
             }
-          })
+          )
+        }
       )
       .testTag(tags.parentTag)
   ) {
@@ -84,7 +90,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   }
 }
 
-@Preview @Composable fun PreviewTUICheckBox() {
+@Preview @Composable
+private fun PreviewTUICheckBox() {
   Column(
     modifier = Modifier
       .padding(20.dp)
@@ -109,10 +116,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       TUICheckBox(checked = false, enabled = false, icon = Filled.Checkmark16) {
       }
     }
-
   }
 }
 
-data class TUICheckBoxTags(
-  val parentTag: String = "TUICheckBox",
-)
\ No newline at end of file
+data class TUICheckBoxTags(val parentTag: String = "TUICheckBox")
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBoxRow.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBoxRow.kt
index 33fd0e5d..380e6f10 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBoxRow.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/checkbox/TUICheckBoxRow.kt
@@ -1,5 +1,6 @@
 package com.tarkalabs.tarkaui.components.checkbox
 
+import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -16,6 +17,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.R
 import com.tarkalabs.tarkaui.components.HorizontalSpacer
 import com.tarkalabs.tarkaui.components.TUITextRowTags
 import com.tarkalabs.tarkaui.components.base.TUIToggleRow
@@ -54,7 +56,8 @@ onCheckedChange = { isChecked = !isChecked }
   style: ToggleRowStyle,
   tags: TUICheckBoxRowTags = TUICheckBoxRowTags(),
   paddingValues: PaddingValues = PaddingValues(),
-  onCheckedChange: () -> Unit,
+  @StringRes primaryNotAvailableText: Int = R.string.not_availble,
+  onCheckedChange: () -> Unit
 ) {
   val minHeight = if (style == Title) 40.dp else 56.dp
   Row(
@@ -81,6 +84,7 @@ onCheckedChange = { isChecked = !isChecked }
     TUIToggleRow(
       title = title,
       style = style,
+      primaryNotAvailableText = primaryNotAvailableText
     )
   }
 }
@@ -88,10 +92,11 @@ onCheckedChange = { isChecked = !isChecked }
 data class TUICheckBoxRowTags(
   val parentTag: String = "TUICheckBoxRow",
   val checkBoxTags: TUICheckBoxTags = TUICheckBoxTags(parentTag = "TUICheckBoxRow_CheckBox"),
-  val textRowTags: TUITextRowTags = TUITextRowTags(parentTag = "TUICheckBoxRow_TextRow"),
+  val textRowTags: TUITextRowTags = TUITextRowTags(parentTag = "TUICheckBoxRow_TextRow")
 )
 
-@Preview @Composable fun PreviewTUICheckBoxRow() {
+@Preview @Composable
+private fun PreviewTUICheckBoxRow() {
   Column(
     modifier = Modifier
       .padding(20.dp)
@@ -128,10 +133,12 @@ data class TUICheckBoxRowTags(
       ) {}
 
       TUICheckBoxRow(
-        checked = true, enabled = false, icon = Filled.Checkmark16, title = "Title", style = Title
+        checked = true,
+        enabled = false,
+        icon = Filled.Checkmark16,
+        title = "Title",
+        style = Title
       ) {}
-
     }
-
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailAreaField.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailAreaField.kt
index e9326900..441cc3d0 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailAreaField.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailAreaField.kt
@@ -33,12 +33,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  * @param testTags The test tags for testing purposes.
  *
  * TUIEmailAreaField(
-    modifier = Modifier,
-    placeHolder = "Enter email content",
-    text = emailContent,
-    onTextChanged = { text ->  },
-    testTags = TUIEmailAreaFieldTags()
-    )
+modifier = Modifier,
+placeHolder = "Enter email content",
+text = emailContent,
+onTextChanged = { text ->  },
+testTags = TUIEmailAreaFieldTags()
+)
  */
 
 @Composable fun TUIEmailAreaField(
@@ -53,16 +53,15 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   onTextChanged: (String) -> Unit,
   testTags: TUIEmailAreaFieldTags = TUIEmailAreaFieldTags()
 ) {
-
   val colors = TextFieldDefaults.colors(
-    unfocusedIndicatorColor =  Color.Transparent,
+    unfocusedIndicatorColor = Color.Transparent,
     focusedIndicatorColor = Color.Transparent,
     focusedTextColor = TUITheme.colors.inputText,
     unfocusedTextColor = TUITheme.colors.inputText,
     unfocusedContainerColor = Color.Transparent,
     focusedContainerColor = Color.Transparent,
-    cursorColor = TUITheme.colors.inputText,
-    )
+    cursorColor = TUITheme.colors.inputText
+  )
   TextField(
     modifier = modifier,
     value = text,
@@ -88,10 +87,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
 }
 
 data class TUIEmailAreaFieldTags(
-  val parentTag: String = "TUIEmailSubjectFieldTag", val placeHolderTag: String = "PlaceHolderTag"
+  val parentTag: String = "TUIEmailSubjectFieldTag",
+  val placeHolderTag: String = "PlaceHolderTag"
 )
 
-@Preview @Composable fun TUIEmailAreaFieldPreview() {
+@Preview @Composable
+private fun TUIEmailAreaFieldPreview() {
   TUITheme {
     var data by remember {
       mutableStateOf("")
@@ -102,12 +103,13 @@ data class TUIEmailAreaFieldTags(
         .wrapContentHeight()
     ) {
       TUIEmailAreaField(
-        placeHolder = "Subject", text = data, onTextChanged = {
+        placeHolder = "Subject",
+        text = data,
+        onTextChanged = {
           data = it
-
-        }, modifier = Modifier.fillMaxWidth()
+        },
+        modifier = Modifier.fillMaxWidth()
       )
-
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailField.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailField.kt
index a105a72f..03a9175b 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailField.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailField.kt
@@ -76,8 +76,11 @@ import kotlinx.coroutines.launch
  * @param onInvalidEmail The callback function to be invoked when user enter a invalid email address.
  */
 @OptIn(
-  ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class
-) @Composable fun TUIEmailField(
+  ExperimentalLayoutApi::class,
+  ExperimentalMaterial3Api::class
+)
+@Composable
+fun TUIEmailField(
   modifier: Modifier = Modifier,
   title: String,
   emailAddressList: ImmutableList<String>,
@@ -87,10 +90,9 @@ import kotlinx.coroutines.launch
   onItemRemoved: (Int) -> Unit,
   onItemAdd: (String) -> Unit,
   onInvalidEmail: () -> Unit,
-  showTextField : Boolean = false,
-  toggleTextFieldVisibility : () -> Unit = {}
+  showTextField: Boolean = false,
+  toggleTextFieldVisibility: () -> Unit = {}
 ) {
-
   var textData by rememberSaveable {
     mutableStateOf("")
   }
@@ -99,8 +101,8 @@ import kotlinx.coroutines.launch
   val scope = rememberCoroutineScope()
   val interactionSource = remember { MutableInteractionSource() }
 
-
-  Column(verticalArrangement = Arrangement.Top,
+  Column(
+    verticalArrangement = Arrangement.Top,
     horizontalAlignment = Alignment.CenterHorizontally,
     modifier = modifier
       .testTag(tags.parentTag)
@@ -118,7 +120,7 @@ import kotlinx.coroutines.launch
     Row(
       modifier = Modifier
         .fillMaxWidth(),
-      verticalAlignment = Alignment.Top,
+      verticalAlignment = Alignment.Top
     ) {
       Text(
         text = title,
@@ -136,16 +138,22 @@ import kotlinx.coroutines.launch
           maxItemsInEachRow = 3
         ) {
           emailAddressList.forEachIndexed { index, email ->
-            TUIChip(modifier = Modifier
-              .padding(2.dp)
-              .testTag(email), type = Input(
-              trailingIcon = Filled.Dismiss20,
-              containerColor = TUITheme.colors.surfaceVariant
-            ), label = email, tags = tags.chipTags, onClick = {
-
-            }, onDismissClick = {
-              onItemRemoved.invoke(index)
-            })
+            TUIChip(
+              modifier = Modifier
+                .padding(2.dp)
+                .testTag(email),
+              type = Input(
+                trailingIcon = Filled.Dismiss20,
+                containerColor = TUITheme.colors.surfaceVariant
+              ),
+              label = email,
+              tags = tags.chipTags,
+              onClick = {
+              },
+              onDismissClick = {
+                onItemRemoved.invoke(index)
+              }
+            )
           }
         }
 
@@ -157,7 +165,7 @@ import kotlinx.coroutines.launch
           disabledIndicatorColor = Color.Transparent,
           errorIndicatorColor = Color.Transparent,
           focusedTextColor = TUITheme.colors.inputText,
-          unfocusedTextColor =  TUITheme.colors.inputText,
+          unfocusedTextColor = TUITheme.colors.inputText
         )
 
         AnimatedVisibility(visible = showTextField) {
@@ -175,7 +183,8 @@ import kotlinx.coroutines.launch
               }
             }),
             keyboardOptions = KeyboardOptions(
-              keyboardType = KeyboardType.Email, imeAction = ImeAction.Done
+              keyboardType = KeyboardType.Email,
+              imeAction = ImeAction.Done
             ),
             modifier = Modifier
               .fillMaxWidth()
@@ -187,13 +196,15 @@ import kotlinx.coroutines.launch
                 colors = colors,
                 interactionSource = interactionSource,
                 focusedIndicatorLineThickness = 1.dp,
-                unfocusedIndicatorLineThickness = 1.dp,
+                unfocusedIndicatorLineThickness = 1.dp
               )
               .height(45.dp),
             enabled = true,
             singleLine = true,
             interactionSource = interactionSource,
-            textStyle = TUITheme.typography.body7.copy(color = TUITheme.colors.inputText ),
+            textStyle = TUITheme.typography.body7.copy(
+              color = TUITheme.colors.inputText
+            ),
             cursorBrush = SolidColor(TUITheme.colors.inputText)
           ) {
             DecorationBox(
@@ -203,10 +214,13 @@ import kotlinx.coroutines.launch
               enabled = true,
               visualTransformation = VisualTransformation.None,
               contentPadding = TextFieldDefaults.contentPaddingWithLabel(
-                top = 0.dp, bottom = 0.dp, start = 0.dp, end = 0.dp
+                top = 0.dp,
+                bottom = 0.dp,
+                start = 0.dp,
+                end = 0.dp
               ),
               interactionSource = interactionSource,
-              colors = colors,
+              colors = colors
             )
           }
         }
@@ -225,7 +239,6 @@ import kotlinx.coroutines.launch
       thickness = if (showTextField) 2 else 1,
       modifier = Modifier.padding(top = 10.dp)
     )
-
   }
 }
 
@@ -237,7 +250,8 @@ data class TUIEmailFieldTags(
   val chipTags: TUIChipTags = TUIChipTags()
 )
 
-@Preview @Composable fun PreviewTUIEmailField() {
+@Preview @Composable
+private fun PreviewTUIEmailField() {
   TUITheme {
     val emailList = remember {
       mutableStateListOf<String>()
@@ -254,21 +268,18 @@ data class TUIEmailFieldTags(
             emailList.removeAt(position)
           },
           trailingIconClick = {
-
           },
           onItemAdd = {
             emailList.add(it)
           },
           onInvalidEmail = {
-
           },
           showTextField = showEditText,
           toggleTextFieldVisibility = {
             showEditText = !showEditText
-            showEditText2  = false
+            showEditText2 = false
           }
         )
-
       }
 
       Box(modifier = Modifier.fillMaxWidth()) {
@@ -280,21 +291,18 @@ data class TUIEmailFieldTags(
             emailList.removeAt(position)
           },
           trailingIconClick = {
-
           },
           onItemAdd = {
             emailList.add(it)
           },
           onInvalidEmail = {
-
           },
           showTextField = showEditText2,
           toggleTextFieldVisibility = {
             showEditText = false
-            showEditText2  = !showEditText2
+            showEditText2 = !showEditText2
           }
         )
-
       }
       TextField(
         value = "",
@@ -304,20 +312,19 @@ data class TUIEmailFieldTags(
           .fillMaxWidth()
           .padding(20.dp)
           .onFocusChanged {
-
             if (it.hasFocus) {
               showEditText = false
               showEditText2 = false
             }
           },
-        label = { Text(text = "PlaceHolder")}
+        label = { Text(text = "PlaceHolder") }
       )
 
       Button(
         onClick = {
           showEditText = true
           showEditText2 = false
-        },
+        }
       ) {
         Text(text = "Field One")
       }
@@ -326,10 +333,8 @@ data class TUIEmailFieldTags(
         showEditText = false
         showEditText2 = true
       }) {
-
         Text(text = "Field Two")
       }
-
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailSubjectField.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailSubjectField.kt
index 529b9c9b..04f15081 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailSubjectField.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/email/TUIEmailSubjectField.kt
@@ -34,12 +34,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
  * @param maxCharLength the maximum numbers of text allowed in email subject field
  *
  * TUIEmailSubjectField(
-    modifier = Modifier,
-    placeHolder = "Enter subject",
-    text = emailSubject,
-    onTextChanged = { text -> },
-    testTags = TUIEmailSubjectFieldTags()
-    )
+modifier = Modifier,
+placeHolder = "Enter subject",
+text = emailSubject,
+onTextChanged = { text -> },
+testTags = TUIEmailSubjectFieldTags()
+)
  */
 @Composable fun TUIEmailSubjectField(
   modifier: Modifier = Modifier,
@@ -54,7 +54,6 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   onTextChanged: (String) -> Unit,
   testTags: TUIEmailSubjectFieldTags = TUIEmailSubjectFieldTags()
 ) {
-
   val colors = TextFieldDefaults.colors(
     unfocusedIndicatorColor = TUITheme.colors.surfaceVariant,
     focusedIndicatorColor = TUITheme.colors.primary,
@@ -63,7 +62,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
     unfocusedContainerColor = Color.Transparent,
     focusedContainerColor = Color.Transparent,
     cursorColor = TUITheme.colors.inputText
-    )
+  )
   TextField(
     modifier = modifier,
     value = text,
@@ -89,10 +88,12 @@ import com.tarkalabs.tarkaui.theme.TUITheme
 }
 
 data class TUIEmailSubjectFieldTags(
-  val parentTag: String = "TUIEmailSubjectField", val placeHolderTag: String = "TUIEmailSubjectField_PlaceHolder"
+  val parentTag: String = "TUIEmailSubjectField",
+  val placeHolderTag: String = "TUIEmailSubjectField_PlaceHolder"
 )
 
-@Preview @Composable fun TUIEmailSubjectFieldPreview() {
+@Preview @Composable
+private fun TUIEmailSubjectFieldPreview() {
   TUITheme {
     var data by remember {
       mutableStateOf("")
@@ -103,12 +104,13 @@ data class TUIEmailSubjectFieldTags(
         .wrapContentHeight()
     ) {
       TUIEmailSubjectField(
-        placeHolder = "Subject", text = data, onTextChanged = {
+        placeHolder = "Subject",
+        text = data,
+        onTextChanged = {
           data = it
-
-        }, modifier = Modifier.fillMaxWidth()
+        },
+        modifier = Modifier.fillMaxWidth()
       )
-
     }
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioButton.kt
index e62165de..ec949c49 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioButton.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioButton.kt
@@ -44,7 +44,7 @@ enabled = true)
   selected: Boolean,
   enabled: Boolean = true,
   tags: TUIRadioButtonTags = TUIRadioButtonTags(),
-  onOptionSelected: (() -> Unit)? = null,
+  onOptionSelected: (() -> Unit)? = null
 ) {
   val borderColor = if (selected) Color.Transparent else TUITheme.colors.utilityOutline
   val backgroundColor = if (selected) TUITheme.colors.primary else Color.Transparent
@@ -59,13 +59,16 @@ enabled = true)
       )
       .border(width = 1.dp, color = borderColor, shape = shape)
       .then(
-        if (onOptionSelected == null) Modifier else
+        if (onOptionSelected == null) {
+          Modifier
+        } else {
           Modifier.selectable(
             selected = selected,
             role = Role.RadioButton,
             onClick = { if (enabled) onOptionSelected.invoke() },
             enabled = enabled
           )
+        }
       )
       .testTag(tags.parentTag)
   ) {
@@ -77,10 +80,7 @@ enabled = true)
 }
 
 @Composable
-fun Circle(
-  modifier: Modifier,
-  color: Color,
-) {
+fun Circle(modifier: Modifier, color: Color) {
   Canvas(
     modifier = modifier
       .width(8.dp)
@@ -96,7 +96,8 @@ fun Circle(
   }
 }
 
-@Preview @Composable fun PreviewTUIRadioButton() {
+@Preview @Composable
+private fun PreviewTUIRadioButton() {
   Column(
     modifier = Modifier
       .padding(20.dp)
@@ -121,10 +122,7 @@ fun Circle(
       TUIRadioButton(selected = true, enabled = false) {
       }
     }
-
   }
 }
 
-data class TUIRadioButtonTags(
-  val parentTag: String = "TUIRadioButton",
-)
\ No newline at end of file
+data class TUIRadioButtonTags(val parentTag: String = "TUIRadioButton")
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioRow.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioRow.kt
index 6cd51ac1..9460aa43 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioRow.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/radiobutton/TUIRadioRow.kt
@@ -51,7 +51,7 @@ onOptionSelected = { selected = !isSelected }
   style: ToggleRowStyle,
   tags: TUIRadioRowTags = TUIRadioRowTags(),
   paddingValues: PaddingValues = PaddingValues(),
-  onOptionSelected: () -> Unit,
+  onOptionSelected: () -> Unit
 ) {
   Row(
     horizontalArrangement = Arrangement.Center,
@@ -75,18 +75,20 @@ onOptionSelected = { selected = !isSelected }
     HorizontalSpacer(space = 16)
     TUIToggleRow(
       title = title,
-      style = style,
+      style = style
     )
   }
 }
 
 data class TUIRadioRowTags(
   val parentTag: String = "TUIRadioButtonRow",
-  val radioButtonTags: TUIRadioButtonTags = TUIRadioButtonTags(parentTag = "TUIRadioButtonRow_RadioButton"),
-  val textRowTags: TUITextRowTags = TUITextRowTags(parentTag = "TUIRadioButtonRow_TextRow"),
+  val radioButtonTags: TUIRadioButtonTags =
+    TUIRadioButtonTags(parentTag = "TUIRadioButtonRow_RadioButton"),
+  val textRowTags: TUITextRowTags = TUITextRowTags(parentTag = "TUIRadioButtonRow_TextRow")
 )
 
-@Preview @Composable fun PreviewTUIRadioRow() {
+@Preview @Composable
+private fun PreviewTUIRadioRow() {
   Column(
     modifier = Modifier
       .padding(20.dp)
@@ -128,6 +130,5 @@ data class TUIRadioRowTags(
       ) {
       }
     }
-
   }
 }
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITab.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITab.kt
index 6afc7144..598c5584 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITab.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITab.kt
@@ -54,25 +54,26 @@ fun TUITab(
   isSelected: Boolean = false,
   leadingIcon: TarkaIcon? = null,
   tags: TUITabTags = TUITabTags(),
-  onTabClicked: () -> Unit,
+  onTabClicked: () -> Unit
 ) {
-  Tab(modifier = modifier
-    .testTag(title)
-    .padding(4.dp)
-    .clip(RoundedCornerShape(32.dp))
-    .background(if (isSelected) TUITheme.colors.secondary else Color.Transparent),
+  Tab(
+    modifier = modifier
+      .testTag(title)
+      .padding(4.dp)
+      .clip(RoundedCornerShape(32.dp))
+      .background(if (isSelected) TUITheme.colors.secondary else Color.Transparent),
     selected = isSelected,
     selectedContentColor = TUITheme.colors.secondary,
     unselectedContentColor = TUITheme.colors.onSurface,
     onClick = {
       onTabClicked.invoke()
-    }) {
+    }
+  ) {
     Row(
       modifier = Modifier.padding(start = if (leadingIcon != null) 6.dp else 0.dp),
       horizontalArrangement = Arrangement.Center,
       verticalAlignment = Alignment.CenterVertically
     ) {
-
       leadingIcon?.let {
         Icon(
           modifier = Modifier
@@ -80,7 +81,7 @@ fun TUITab(
             .size(20.dp),
           painter = painterResource(id = it.iconRes),
           contentDescription = it.contentDescription,
-          tint = if (isSelected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface,
+          tint = if (isSelected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface
         )
       }
 
@@ -93,22 +94,18 @@ fun TUITab(
         ),
         text = title,
         style = TUITheme.typography.button6,
-        color = if (isSelected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface,
+        color = if (isSelected) TUITheme.colors.onSecondary else TUITheme.colors.onSurface
       )
     }
-
   }
 }
 
-data class TUITabTags(
-  val leadIconTag: String = "TUITab_leadIcon_Tag",
-)
+data class TUITabTags(val leadIconTag: String = "TUITab_leadIcon_Tag")
 
 @Preview(showBackground = true)
 @Composable
-fun TUITabPreview() {
+private fun TUITabPreview() {
   Column {
-
     Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
       TUITab(modifier = Modifier.width(105.dp), title = "Tab") {}
       HorizontalSpacer(space = 5)
@@ -131,6 +128,5 @@ fun TUITabPreview() {
         isSelected = true
       ) {}
     }
-
   }
-}
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITabBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITabBar.kt
index 1d60e523..f9668b3d 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITabBar.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/tab/TUITabBar.kt
@@ -12,7 +12,7 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -20,10 +20,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.components.VerticalSpacer
 import com.tarkalabs.tarkaui.icons.Circle12
 import com.tarkalabs.tarkaui.icons.TarkaIcon
 import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
-import com.tarkalabs.tarkaui.components.VerticalSpacer
 import com.tarkalabs.tarkaui.theme.TUITheme
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
@@ -40,13 +40,13 @@ import kotlinx.collections.immutable.toImmutableList
  *
  * How to use TUITab() composable function
  *
-    TUITab(
-      isUserScrollEnabledOnContent = true,
-      isPagerEnabled = true,
-      tabItems = listOf(TabItem("TabName", TarkaIcons.Tabs24Regular),
-      selectedTabIndex = 1,
-      onTabChanged = {}
-    )
+TUITab(
+isUserScrollEnabledOnContent = true,
+isPagerEnabled = true,
+tabItems = listOf(TabItem("TabName", TarkaIcons.Tabs24Regular),
+selectedTabIndex = 1,
+onTabChanged = {}
+)
  */
 
 @Composable fun TUITabBar(
@@ -54,7 +54,7 @@ import kotlinx.collections.immutable.toImmutableList
   tabItems: ImmutableList<TabItem>,
   selectedTabIndex: Int,
   tags: TUITabBarTags = TUITabBarTags(),
-  onTabChanged: (Int) -> Unit,
+  onTabChanged: (Int) -> Unit
 ) {
   Row(
     horizontalArrangement = Arrangement.SpaceAround,
@@ -68,29 +68,21 @@ import kotlinx.collections.immutable.toImmutableList
       TUITab(
         title = item.name,
         isSelected = selectedTabIndex == index,
-        leadingIcon = item.leadingTabIcon,
-        ) {
+        leadingIcon = item.leadingTabIcon
+      ) {
         onTabChanged.invoke(index)
       }
     }
-
   }
 }
 
-data class TabItem(
-  val name: String,
-  val leadingTabIcon: TarkaIcon? = null,
-)
+data class TabItem(val name: String, val leadingTabIcon: TarkaIcon? = null)
 
-data class TUITabBarTags(
-  val parentId: String = "TUITabBar",
-)
+data class TUITabBarTags(val parentId: String = "TUITabBar")
 
 @Composable
 @Preview(showBackground = true)
-fun PreviewTUITabRow() {
-
-
+private fun PreviewTUITabRow() {
   val tabItems = listOf(
     TabItem("Tab"),
     TabItem("Tab"),
@@ -99,7 +91,7 @@ fun PreviewTUITabRow() {
     TabItem("Tab"),
     TabItem("Tab"),
     TabItem("Tab"),
-    TabItem("Tab"),
+    TabItem("Tab")
   )
   val tabItemsWithIcons = listOf(
     TabItem("Tab", leadingTabIcon = Regular.Circle12),
@@ -109,22 +101,21 @@ fun PreviewTUITabRow() {
     TabItem("Tab", leadingTabIcon = Regular.Circle12),
     TabItem("Tab", leadingTabIcon = Regular.Circle12),
     TabItem("Tab", leadingTabIcon = Regular.Circle12),
-    TabItem("Tab", leadingTabIcon = Regular.Circle12),
+    TabItem("Tab", leadingTabIcon = Regular.Circle12)
   )
 
   TUITheme {
     var currentTab by remember {
-      mutableStateOf(0)
+      mutableIntStateOf(0)
     }
     var selectedTab by remember {
-      mutableStateOf(0)
+      mutableIntStateOf(0)
     }
     Column(
       modifier = Modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Top,
-      horizontalAlignment = Alignment.CenterHorizontally,
+      horizontalAlignment = Alignment.CenterHorizontally
     ) {
-
       TUITabBar(
         modifier = Modifier.padding(10.dp),
         tabItems = tabItems.toImmutableList(),
@@ -146,7 +137,6 @@ fun PreviewTUITabRow() {
       )
 
       VerticalSpacer(space = 10)
-
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Color.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Color.kt
index ce74a4e2..7c6791c9 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Color.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Color.kt
@@ -24,6 +24,7 @@ open class TUIColors(
   val success20: Color,
   val error: Color,
   val onError: Color,
+  val error55: Color,
   val error10: Color,
   val warning: Color,
   val onWarning: Color,
@@ -46,7 +47,7 @@ open class TUIColors(
   val constantDark: Color,
   val inputTextDim: Color,
   val surfaceHover: Color,
-  val primaryAltHover:Color,
+  val primaryAltHover: Color,
   val accent: Color,
   val accentBaseA: Color,
   val accentBaseB: Color,
@@ -86,7 +87,6 @@ open class TUIColors(
   val onAccentQ: Color,
   val onAccentR: Color
 )
-
 val LocalTUIColors = staticCompositionLocalOf {
   defaultLightColors
 }
@@ -109,6 +109,7 @@ val defaultLightColors = TUIColors(
   success10 = Color(0xFF148F47).copy(alpha = 0.10f),
   success20 = Color(0xFF148F47).copy(alpha = 0.20f),
   error = Color(0xFFCD1D32),
+  error55 = Color(0xFFCD1D32).copy(alpha = 0.55f),
   onError = Color(0xFFFEFBFB),
   error10 = Color(0xFFCD1D32).copy(alpha = 0.10f),
   warning = Color(0xFFFFB938),
@@ -149,7 +150,7 @@ val defaultLightColors = TUIColors(
   accentBaseM = Color(0xFFDEDEED),
   accentBaseN = Color(0xFFE3DEED),
   accentBaseO = Color(0xFFE8DEED),
-  accentBaseP = Color(0XFFEDDEED) ,
+  accentBaseP = Color(0XFFEDDEED),
   accentBaseQ = Color(0xFFEDDEE8),
   accentBaseR = Color(0xFFEDDEE3),
   onAccent = Color(0xFF5F008F),
@@ -168,9 +169,9 @@ val defaultLightColors = TUIColors(
   onAccentM = Color(0xFF00008F),
   onAccentN = Color(0xFF30008F),
   onAccentO = Color(0xFF5F008F),
-  onAccentP = Color(0XFF8F008F) ,
+  onAccentP = Color(0XFF8F008F),
   onAccentQ = Color(0xFF8F005F),
-  onAccentR = Color(0xFF8F0030),
+  onAccentR = Color(0xFF8F0030)
 )
 
 val defaultDarkColors = TUIColors(
@@ -191,6 +192,7 @@ val defaultDarkColors = TUIColors(
   success10 = Color(0xFF55E792).copy(alpha = 0.10f),
   success20 = Color(0xFF55E792).copy(alpha = 0.20f),
   error = Color(0xFFD42136),
+  error55 = Color(0xFFD42136).copy(alpha = 0.55f),
   onError = Color(0xFFFFFAFA),
   error10 = Color(0xFFD42136).copy(alpha = 0.10f),
   warning = Color(0xFFFFB938),
@@ -231,13 +233,13 @@ val defaultDarkColors = TUIColors(
   accentBaseM = Color(0xFF20203C),
   accentBaseN = Color(0xFF29203C),
   accentBaseO = Color(0xFF32203C),
-  accentBaseP = Color(0XFF3C203C) ,
+  accentBaseP = Color(0XFF3C203C),
   accentBaseQ = Color(0xFF3C2032),
   accentBaseR = Color(0xFF3C2029),
   onAccent = Color(0xFFDD99FF),
   onAccentA = Color(0xFFFF9999),
   onAccentB = Color(0xFFFFBB99),
-  onAccentC =Color(0xFFFFDD99),
+  onAccentC = Color(0xFFFFDD99),
   onAccentD = Color(0xFFFFFF99),
   onAccentE = Color(0xFFDDFF99),
   onAccentF = Color(0XFFBBFF99),
@@ -250,8 +252,7 @@ val defaultDarkColors = TUIColors(
   onAccentM = Color(0xFF9999FF),
   onAccentN = Color(0xFFBB99FF),
   onAccentO = Color(0xFFDD99FF),
-  onAccentP = Color(0XFFFF99FF) ,
+  onAccentP = Color(0XFFFF99FF),
   onAccentQ = Color(0xFFFF99DD),
-  onAccentR = Color(0xFFFF99BB),
-  )
-
+  onAccentR = Color(0xFFFF99BB)
+)
\ No newline at end of file
diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Shape.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Shape.kt
index 6a852457..e63dd6c8 100644
--- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Shape.kt
+++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/theme/Shape.kt
@@ -7,5 +7,7 @@ import androidx.compose.ui.unit.dp
 val Shapes = Shapes(
   small = RoundedCornerShape(4.dp),
   medium = RoundedCornerShape(4.dp),
-  large = RoundedCornerShape(0.dp)
+  large = RoundedCornerShape(0.dp),
+  // extraSmall is used to set rounded corner of DropdownMenu
+  extraSmall = RoundedCornerShape(16.dp)
 )
\ No newline at end of file